From bc53cb6c2f26484f395b30fd986e882f655fc1f1 Mon Sep 17 00:00:00 2001
From: linuxitux <linuxito@openmailbox.org>
Date: Mon, 12 Jun 2017 09:30:23 -0400
Subject: [PATCH] Re-arrangement of graphics, minor css changes

---
 config.example.php |  2 +-
 graphics.php       | 66 ++++++++++++++++++++++++++++------------------
 template.css       | 26 +++++++++---------
 3 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/config.example.php b/config.example.php
index e48a950..a474b0b 100644
--- a/config.example.php
+++ b/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');
 
 /***********************/
 
diff --git a/graphics.php b/graphics.php
index 956c9e7..2d0e804 100644
--- a/graphics.php
+++ b/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">
diff --git a/template.css b/template.css
index 6e7f6c3..f5fe212 100644
--- a/template.css
+++ b/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 {