UI improved

taverngoal · Sep 16, 2014 · 939814c · 939814c
1 parent a41c9f3
commit 939814c
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 18 deletions.
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -58,4 +58,9 @@ form label { font-family: 'Helvetica',serif; font-weight: normal }
         #ping_view .data-block > .ping-obj {padding: 0 5px; width: 100%; margin-bottom: 1px;}
             #ping_view .ping-obj > span {float:left; display: inline-block; padding: 0 5px; height: 30px; line-height: 30px; margin-right: 1px; width:10%; text-align: right  }
             #ping_view .ping-obj > span.address {width: 28%; text-align:left }
-            #ping_view .ping-obj:first-child span{ text-align: center }
+            #ping_view .ping-obj:first-child span{ text-align: center }
+
+#ping_view .ping-info{ width: 100%; margin-bottom: 5px; table-layout:fixed;}
+    #ping_view .ping-info tr{ margin-bottom: 1px; }
+    #ping_view .ping-info th{ text-align: center;   margin-bottom: 1px;}
+    #ping_view .ping-info td{ padding:5px; text-align: center; margin-bottom: 1px;}
diff --git a/app/assets/main_controller.js b/app/assets/main_controller.js
@@ -172,7 +172,7 @@ angular.module("LemonerTerminal", ["ngRoute"])
             this.$sent = 0;
             this.$received = 0;
             this.$max = 0;
-            this.$min = 0;
+            this.$min = 10000;
             this.$lost = 0;
             this.$loss = 0;
             this.$avg = 0;

diff --git a/app/assets/theme/black_orange.css b/app/assets/theme/black_orange.css
@@ -9,13 +9,15 @@ input { background: #336699 !important; font-size: 16px !important; color: #fefe
 #Content .setting{ background: transparent; }
 header .actionbar li{ background: transparent; color:#fefefe }
 
-#Content .nav>li{ width: 25%; background: #eee}
+#Content .nav>li{width: 33%;  margin-bottom: 2px}
 #Content .terminal .terminal { background-color: transparent;color: #CC9900 }
-#Content .nav>li>a { padding:5px 5px; }
-#Content .nav-tabs>li>a { border-radius: 0 }
-#Content .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {background-color: #ffcc00; border:0; color:#666}
+#Content .nav>li>a { padding:5px; border:0;  background: #eee ;color: #444}
+#Content .nav-tabs>li>a {  border-radius: 5px}
+#Content .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {background-color: #ffcc00; color:#666}
+#Content .alert{ ; border: 0}
 /*.nav>li>a:hover { background: #428bca; color:#fefefe}*/
 
 .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus{
     color: #fefefe;    background-color: #336699;
 }
+#ping_view .ping-info { background: #336699; color:#fff; border-radius: 5px}
diff --git a/app/assets/theme/default.css b/app/assets/theme/default.css
@@ -12,7 +12,9 @@ input { border:0 !important; }
 #ping_view .ping-obj > span { background: #eee; color:#000;}
 #ping_view .ping-obj > span.address { background: #428bca; color:#fff; }
 
-#Content .nav>li{ width: 25%; background: #eee}
-#Content .nav>li>a { padding:5px 5px; }
-#Content .nav-tabs>li>a { border-radius: 0 }
-#Content .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #aaa; border:0; color:#fff}
+#Content .nav>li{ width: 33%; margin-bottom: 2px}
+#Content .nav>li>a { padding:5px 5px; background: #ddd; color: #444 }
+#Content .nav-tabs>li>a { border-radius: 5px; border:0 }
+#Content .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { background-color: #999; border:0; color:#fff}
+
+#ping_view .ping-info { background: #428bca; color:#fff; border-radius: 5px }
diff --git a/app/views/ping.html b/app/views/ping.html
@@ -32,14 +32,24 @@
             </li>
         </ul>
         <div class="tab-content">
-            <div class="ping-obj clearfix">
-                <span class="sent">Sent:{{active_p.$sent}}</span>
-                <span class="received">Received:{{active_p.$received}}</span>
-                <span class="lost">Lost{{active_p.$lost}}</span>
-                <span class="max">Max:{{active_p.$max}}</span>
-                <span class="min">Min:{{active_p.$min}}</span>
-                <span class="avg">Avg:{{active_p.$avg}}</span>
-            </div>
+            <table class="ping-info" cellspacing="1">
+                <tr>
+                    <th>Sent</th>
+                    <th>Received</th>
+                    <th>Lost</th>
+                    <th>Max</th>
+                    <th>Min</th>
+                    <th>Avg</th>
+                </tr>
+                <tr>
+                    <td>{{active_p.$sent}}</td>
+                    <td>{{active_p.$received}}</td>
+                    <td>{{active_p.$lost}}%</td>
+                    <td>{{active_p.$max}}</td>
+                    <td>{{active_p.$min}}</td>
+                    <td>{{active_p.$avg}}</td>
+                </tr>
+            </table>
             <div ng-class="{'alert alert-success':d.type=='low', 'alert alert-warning':d.type=='high','alert alert-danger':d.type=='error'}"
                  ng-repeat="d in active_p.$data | limitTo:20">{{d.time | date: 'HH:mm:ss'}}&nbsp; Ping
                 {{active_p.$obj.address}} :: {{d.value}}ms