Graphics rearranged

Author: linuxitux

graphics.php

@@ -19,13 +19,28 @@ function draw() {
 
                 case 'cpu':
                 ?>
-                <div class="small-metrics">
-                <h4>CPU</h4>
-                <canvas id="cpu" width="140" height="85">Your browser doesn't support canvas.</canvas>
+                <div class="metrics-container">
+                  <div class="multi-metrics">
+                    <h4>CPU</h4>
+                    <canvas id="cpu" width="140" height="85">Your browser doesn't support canvas.</canvas>
+                  </div>
+                  <div class="multi-metrics">
+                    <h4>Load</h4>
+                    <center><p class="bigmetric"><span id="lda_value_big">No data.</span></p></center>
+                  </div>
+<br /><br />
+                  <div class="multi-metrics">
+                    <h4>Memory</h4>
+                    <canvas id="mem" width="140" height="85">Your browser doesn't support canvas.</canvas>
+                  </div>
+                  <div class="multi-metrics">
+                    <h4>Swap</h4>
+                    <canvas id="swp" width="140" height="85">Your browser doesn't support canvas.</canvas>
+                  </div>
                 </div>
                 <?php
                 break;
-
+/*
                 case 'mem':
                 ?>
                 <div class="small-metrics">
@@ -76,12 +91,12 @@ function draw() {
                 </div>
                 <?php
                 break;
-
+*/
             }
 
         }
 
-        echo "<br />";
+        //echo "<br />";
 
         // big graphics
         foreach ($this->graphList as $g) {
@@ -109,7 +124,9 @@ function draw() {
                 <td><p><b>&uarr;</b> sent</p></td></tr>
                 </table>
                 </center>
+<!--
                 <p class="smallnote">Total number of kilobytes received and transmitted per second.</p>
+-->
                 </div>
                 <?php
                 break;
@@ -120,10 +137,10 @@ function draw() {
                 <h3>Metrics</h3>
                 <table id="metricstable" class="metricstable">
                 <tr><td>CPU</td><td style="text-align: right;"><span id="cpu_value">No data.</span></td></tr>
-                <tr><td>TPS</td><td style="text-align: right;"><span id="tps_value">No data.</span></td></tr>
+                <tr><td>Load</td><td style="text-align: right;"><span id="lda_value">No data.</span></td></tr>
                 <tr><td>Memory</td><td style="text-align: right;"><span id="mem_value">No data.</span></td></tr>
                 <tr><td>Swap</td><td style="text-align: right;"><span id="swp_value">No data.</span></td></tr>
-                <tr><td>Load</td><td style="text-align: right;"><span id="lda_value">No data.</span></td></tr>
+                <tr><td>I/O (TPS)</td><td style="text-align: right;"><span id="tps_value">No data.</span></td></tr>
                 <tr><td>kB received</td><td style="text-align: right;"><span id="ifr_value">No data.</span></td></tr>
                 <tr><td>kB sent</td><td style="text-align: right;"><span id="ift_value">No data.</span></td></tr>
                 <tr><td>ESTABLISHED</td><td style="text-align: right;"><span id="connections">No data.</span></td></tr>

login.php

@@ -38,7 +38,7 @@
 <div class="container">
 <div class="metrics">
 <h4>Welcome to sere</h4>
-<p>Enter username and password:</p>
+<p class="smallnote" style="text-align: center;">Please enter username and password:</p>
 <input class="login" type="text" value="<?php echo $_POST['user']; ?>" id="user" name="user" /><br />
 <input class="login" type="password" value="" id="pass" name="pass" /><br />
 <div class="login_error">

template.css

@@ -78,7 +78,7 @@ margin-right: auto;
 text-align: center;
 }
 
-.metrics, .small-metrics {
+.metrics, .small-metrics, .metrics-container {
 /*
 -webkit-border-radius: 5px;
 border-radius: 5px;
@@ -92,20 +92,27 @@ background-color: #ECECEC;
 /*
 border: 1px solid #bbb;
 */
-max-width: 280px;
-min-width: 140px;
 }
 
-.metrics {
+.metrics, .metrics-container {
+width: 310px;
 padding: 15px;
-height: 240px;
+height: 250px;
 }
 
 .small-metrics {
+min-width: 140px;
 padding: 10px;
 height: 105px;
 }
 
+.multi-metrics {
+display: inline-block;
+vertical-align: top;
+width: 150px;
+height: 110px;
+}
+
 .bigmetric {
 font-size: 1.3em;
 }