From 939814c2a51d13f578fef0b40035309dac96c3f7 Mon Sep 17 00:00:00 2001 From: tavern Date: Wed, 17 Sep 2014 00:57:17 +0800 Subject: [PATCH] UI improved --- app/assets/main.css | 7 ++++++- app/assets/main_controller.js | 2 +- app/assets/theme/black_orange.css | 10 ++++++---- app/assets/theme/default.css | 10 ++++++---- app/views/ping.html | 26 ++++++++++++++++++-------- 5 files changed, 37 insertions(+), 18 deletions(-) diff --git a/app/assets/main.css b/app/assets/main.css index 6cd259a..0f96c24 100644 --- 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 } \ No newline at end of file + #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;} \ No newline at end of file diff --git a/app/assets/main_controller.js b/app/assets/main_controller.js index 642a389..dca7000 100644 --- 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 index 9f7ad7f..97a765c 100644 --- 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} \ No newline at end of file diff --git a/app/assets/theme/default.css b/app/assets/theme/default.css index b6ffb1f..a860b32 100644 --- 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} \ No newline at end of file +#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 } \ No newline at end of file diff --git a/app/views/ping.html b/app/views/ping.html index 26ea4dc..89dbd0e 100644 --- a/app/views/ping.html +++ b/app/views/ping.html @@ -32,14 +32,24 @@
-
- Sent:{{active_p.$sent}} - Received:{{active_p.$received}} - Lost{{active_p.$lost}} - Max:{{active_p.$max}} - Min:{{active_p.$min}} - Avg:{{active_p.$avg}} -
+ + + + + + + + + + + + + + + + + +
SentReceivedLostMaxMinAvg
{{active_p.$sent}}{{active_p.$received}}{{active_p.$lost}}%{{active_p.$max}}{{active_p.$min}}{{active_p.$avg}}
{{d.time | date: 'HH:mm:ss'}}  Ping {{active_p.$obj.address}} :: {{d.value}}ms