Re-arrangement of graphics, minor css changes

Author: linuxitux

config.example.php

@@ -29,7 +29,7 @@
     upt - Uptime
 
 */
-$graphs = array('cpu','mem','swp','top','lda','ifx','tps','met','upt');
+$graphs = array('cpu','mem','swp','lda','tps','top','ifx','met','upt');
 
 /***********************/
 

graphics.php

@@ -12,6 +12,7 @@ function draw() {
             return 1;
         }
 
+        // small graphics
         foreach ($this->graphList as $g) {
 
             switch($g) {
@@ -44,25 +45,54 @@ function draw() {
 
                 break;
 
-                case 'top':
-                ?>
-                <div class="metrics">
-                <h3>Top processes</h3>
-                <table id="top" class="toptable"><tr><td>No data.</td></tr></table>
-                </div>
-                <?php
-                break;
-
                 case 'lda':
                 ?>
-                <div class="metrics">
-                <h3>Load</h3>
+                <div class="small-metrics">
+                <h4>Load</h4>
                 <center><p class="bigmetric"><span id="lda_value_big">No data.</span></p></center>
+<!--
                 <p class="smallnote">System load average for the last minute.
                 The load average is calculated as the average number
                 of runnable or running tasks (R state), and the number
                 of tasks in uninterruptible sleep (D state) over the
                 specified interval.</p>
+-->
+                </div>
+                <?php
+                break;
+
+                case 'tps':
+                ?>
+                <div class="small-metrics">
+                <h4>I/O</h4>
+                <center><p class="bigmetric"><span id="tps_value_big">No data.</span></p></center>
+<!--
+                <p class="smallnote">Total number of transfers per second that
+                were issued to physical devices. A transfer
+                is an I/O request to a physical device.
+                Multiple logical requests can be combined
+                into a single I/O request to the device.</p>
+-->
+                </div>
+                <?php
+                break;
+
+            }
+
+        }
+
+        echo "<br />";
+
+        // big graphics
+        foreach ($this->graphList as $g) {
+
+            switch($g) {
+
+                case 'top':
+                ?>
+                <div class="metrics">
+                <h3>Top processes</h3>
+                <table id="top" class="toptable"><tr><td>No data.</td></tr></table>
                 </div>
                 <?php
                 break;
@@ -84,20 +114,6 @@ function draw() {
                 <?php
                 break;
 
-                case 'tps':
-                ?>
-                <div class="metrics">
-                <h3>I/O</h3>
-                <center><p class="bigmetric"><span id="tps_value_big">No data.</span></p></center>
-                <p class="smallnote">Total number of transfers per second that
-                were issued to physical devices. A transfer
-                is an I/O request to a physical device.
-                Multiple logical requests can be combined
-                into a single I/O request to the device.</p>
-                </div>
-                <?php
-                break;
-
                case 'met':
                 ?>
                 <div class="metrics">

template.css

@@ -78,26 +78,28 @@ margin-right: auto;
 text-align: center;
 }
 
-.metrics {
-padding: 15px;
+.metrics, .small-metrics {
+-webkit-border-radius: 5px;
+border-radius: 5px;
+-webkit-box-shadow: 0 0 5px 0 #bbb;
+box-shadow: 0 0 5px 0 #bbb;
 margin: 5px;
-background-color: #fafafa;
-/*border: 2px solid #fafafa;*/
-height: 240px;
 display: inline-block;
-max-width: 280px;
 vertical-align: top;
+background-color: #fafafa;
+border: 1px solid #bbb;
+max-width: 280px;
+min-width: 140px;
+}
+
+.metrics {
+padding: 15px;
+height: 240px;
 }
 
 .small-metrics {
 padding: 10px;
-margin: 5px;
-background-color: #fafafa;
-/*border: 2px solid #fafafa;*/
 height: 105px;
-display: inline-block;
-max-width: 280px;
-vertical-align: top;
 }
 
 .bigmetric {