Optimize plot sizes for smaller screens

wuurrd · Jan 11, 2011 · 6c08115 · 6c08115
1 parent f139237
commit 6c08115
Showing 1 changed file with 21 additions and 2 deletions.
diff --git a/speedcenter/media/css/main.css b/speedcenter/media/css/main.css
@@ -218,15 +218,17 @@ div#contentwrap div.rightcolumn { padding-left: 0.8em; }
 
 div#contentwrap div div { display: block; }
 
-/*Remove outher margins so that it comfortably fits in a 1024px wide screen */
+/* 1024px wide screen Tablet, Netbook */
+/* Remove outher margins so that it comfortably fits */
 @media only screen and (max-width:1090px)  {
     div#containter { width: 100%; margin: 0; }
     div#sidebar { width: 12em; }
     div#configbar { margin-left: 12.8em; }
     div#content { margin-left: 12.8em; }
 }
 
-/* For smaller screens the changes view should only show one colunm */
+/* Less than 1024px wide screens (Smartphones) */
+/* The changes view should only show one colunm */
 @media only screen and (max-width:1020px)  {
     div#contentwrap div { display: table-row!important; }
     table.info { margin-bottom: 0.8em; }
@@ -318,6 +320,7 @@ a#permalink:hover { text-decoration: underline; }
 
 /* Plot styles */
 div#plot { text-align: left; height: 500px; width: 100%; }
+
 div.miniplot {
     cursor: pointer;
     margin: 0.5em;
@@ -333,6 +336,7 @@ div.miniplot:hover { background-color: #F1F1F1; }
 .jqplot-highlighter-tooltip {
     -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;
 }
+
 div.compplot {
     text-align: left;
     height: 450px;
@@ -341,6 +345,21 @@ div.compplot {
     margin-bottom: 2em;
 }
 
+/* 1024px wide screen (Tablet, Netbook) */
+/* Reduce plot hight */
+@media only screen and (max-width:1090px)  {
+    div#plot { height: 450px; }
+    div.miniplot { height: 120px; }
+}
+
+/* Less than 1024px wide screens (Smartphones) */
+/* Reduce plot hight */
+@media only screen and (max-width:1020px)  {
+    div#plot { height: 400px; }
+    div.miniplot { height: 100px; }
+    div.compplot { height: 400px; }
+}
+
 p.note, p.warning {
     margin-top: 0;
     padding: 1.2em;