From 105d4328e0c0de08071b1a71e744b04c95485631 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Orsini Date: Tue, 11 Feb 2014 17:45:16 +0000 Subject: [PATCH] redesigned web pages css consistent with website --- www/Makefile.am | 1 - www/Makefile.in | 1 - www/details.html | 12 ++-- www/index.html | 105 ++++++++++++++++++++++++++--- www/monitor.html | 111 ------------------------------- www/psensor.js | 18 ++--- www/style.css | 198 +++++++++++++++++++++++++++++++++---------------------- 7 files changed, 229 insertions(+), 217 deletions(-) delete mode 100644 www/monitor.html diff --git a/www/Makefile.am b/www/Makefile.am index de61dcf..17dca21 100644 --- a/www/Makefile.am +++ b/www/Makefile.am @@ -4,7 +4,6 @@ defaultwww_DATA = \ index.html \ excanvas.js \ favicon.ico \ - monitor.html \ psensor.js \ jqplot.dateAxisRenderer.js \ jqplot.css \ diff --git a/www/Makefile.in b/www/Makefile.in index ce82eb6..9a2f2f0 100644 --- a/www/Makefile.in +++ b/www/Makefile.in @@ -257,7 +257,6 @@ defaultwww_DATA = \ index.html \ excanvas.js \ favicon.ico \ - monitor.html \ psensor.js \ jqplot.dateAxisRenderer.js \ jqplot.css \ diff --git a/www/details.html b/www/details.html index 3dabb65..56cb972 100644 --- a/www/details.html +++ b/www/details.html @@ -3,10 +3,6 @@ Sensor - - @@ -44,21 +40,23 @@ href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin"> + +

-
- +
+
diff --git a/www/index.html b/www/index.html index 4c57443..722024d 100644 --- a/www/index.html +++ b/www/index.html @@ -1,22 +1,109 @@ - Psensor Server - + + Psensor Server Monitoring + + + + -
-
-

Psensor Server

+
+ -
-

Go to the Monitoring page

+
+

System Monitoring

+ +

Uptime:

+ +

CPU

+ + + + + + + + + + + +
Current usageLoad 1mnLoad 5mnLoad 15mn
+

Memory

+ + + + + + + + + + + + + + + + +
TotalUsedFreeSharedBuffer
+ +

Network

+ + + + + + + + + + + +
InterfaceBytes InBytes Out
+ +

Sensors

+ + + + + + + + + + + + +
NameValueMinMaxType
+
+ +
- - diff --git a/www/monitor.html b/www/monitor.html deleted file mode 100644 index 04d5303..0000000 --- a/www/monitor.html +++ /dev/null @@ -1,111 +0,0 @@ - - - - Psensor Server Monitoring - - - - - - - - - - - - -
-

System Monitoring

- -

Uptime:

- -

CPU

- - - - - - - - - - - -
Current usageLoad 1mnLoad 5mnLoad 15mn
- -

Memory

- - - - - - - - - - - - - - - - -
TotalUsedFreeSharedBuffer
- -

Network

- - - - - - - - - - - -
InterfaceBytes InBytes Out
- -

Sensors

- - - - - - - - - - - - -
NameValueMinMaxType
-
- - - - diff --git a/www/psensor.js b/www/psensor.js index 6f4ef7e..3e90285 100644 --- a/www/psensor.js +++ b/www/psensor.js @@ -169,8 +169,17 @@ function update_menu() { str = ""; $.getJSON("/api/1.1/sensors", function(data) { - str += "
  • Sensors\n
      "; + str += "
    • CPU
        "; + url = "details.html?id="+escape("/api/1.1/cpu/usage"); + link = "usage"; + str += "
      • "+link+"
        • "; + str += "
      "; + str += "
    • Network
      • "; + + str += "
    • Memory
      • "; + + str += "
    • Sensors\n
        "; $.each(data, function(i, item) { name = item["name"]; url = "details.html?id="+escape("/api/1.1/sensors/"+item["id"]); @@ -178,13 +187,6 @@ function update_menu() { str += "
      • "+link+"
        • "; }); str += "
      "; - - str += "
    • CPU
        "; - url = "details.html?id="+escape("/api/1.1/cpu/usage"); - link = "usage"; - str += "
      • "+link+"
        • "; - - str += "
      "; $("#menu-list").append(str); diff --git a/www/style.css b/www/style.css index 456a739..865c3d2 100644 --- a/www/style.css +++ b/www/style.css @@ -1,133 +1,171 @@ + body { - padding: 1em 1em 1em 1em; - font-family: "Ubuntu", sans-serif; - font-size: 100%; - font-style: normal; - font-weight: normal; - color: #000; - background-color: #fff; - margin: 0 0 0 0; + background: #e2e2e2; + color: #333333; + font-family: Ubuntu,Arial,sans-serif; + line-height: 1.6; + font-weight: lighter; + margin: 1em 2em 2em 2em; + padding: 0 0 0 0; } -a { - color: #1982D1; - font-style: normal; - text-decoration: none; +h1 { + font-size: 2.813em; + margin: 0 0 0.267em 0; + padding: 0 0 0 0; + font-weight: normal; } -a:hover { - text-decoration: underline; +h2 { + font-size: 2em; + margin: 0 0 0.375em; + padding: 0 0 0 0; + font-weight: normal; } -h1 { - font-size: 140%; - font-style: normal; - font-weight: bold; - text-transform: uppercase; - margin: 0 0 1em 0; +h3 { + font-size: 1.438em; + margin: 0 0 0.522em; padding: 0 0 0 0; + font-weight: normal; } +h4 { + font-size: 1.219em; + margin: 0 0 0.615em; + padding: 0 0 0 0; + font-weight: normal; +} -h2, #toctitle{ - font-size: 110%; - font-style: normal; +h5 { + font-size: 1em; + margin: 0 0 0.75em; + padding: 0 0 0 0; font-weight: bold; +} + +h6 { + font-weight: normal; + font-size: 0.813em; + letter-spacing: 0.1em; + margin: 0 0 0.923em; text-transform: uppercase; - margin: 2em 0em 1em 0em; padding: 0 0 0 0; } -#footer { - padding-top: 2em; - color: #666; - clear: both; - text-align: right; - font-size: 75%; +li { + margin: 0 0 0 1em; + line-height: 1.6; } -p { - font-size: 100%; - margin-bottom: 8px; +li p { + margin: 0 0 0 0; } -table { - text-align: left; +ul { + margin: 0 0 0 0; padding: 0 0 0 0; - min-width: 50%; - border-spacing: 0; - border: 0; } -thead { - background-color: #000; - color: #fff; - padding: 0 0 0 0; +a:link, a:visited { + color: #19B6EE; + text-decoration: none; } -tbody { - padding: 0 0 0 0; +a:hover { + text-decoration: underline; } -th { - padding: 0.25em 0.5em 0.25em 0.5em; - font-style: normal; +code, pre, tt { + font-family: "Ubuntu Mono","Courier New",Courier,monospace; font-weight: normal; + color: #333333; } -td { - padding: 0.25em 0.25em 0em 0.25em; +pre { + background: none repeat scroll 0 0 #e0e0e0; + border-radius: 4px; + padding: 0.5em 0.5em; + margin: 0 0 0 0; + white-space: pre-wrap; + word-wrap: break-word; } -#chart { - color: #000; - font-style: normal; - font-weight: normal; +table { width: 100%; - height: 300px; -} - -ul#menu-list li { - list-style: none; + text-align: left; } -#menu-list { - padding: 0 0 0 0; +#footer { margin: 0 0 0 0; + font-size: 0.8em; + font-weight: lighter; + clear: both; + text-align: right; } -#menu { - float: left; - width: 20%; - padding: 0 0 0 0; +#page { margin: 0 0 0 0; + padding: 0 0 0 0; } #main { - float: right; - width: 80%; - padding: 0 0 0 0; - margin: 0 0em 0 0; -} + background: #ffffff; -em { - font-weight: bold; - font-style: normal; + -moz-box-sizing: border-box; + + padding: 2em 2em 2em 2em; + + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + -webkit-box-shadow: 0 2px 2px 0 #C2C2C2; + box-shadow: 0 2px 2px 0 #C2C2C2; } -#uptime { - font-weight: normal; +#menu { + background: #ffffff; + -moz-box-sizing: border-box; + padding: 2em 2em 2em 2em; + + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + -webkit-box-shadow: 0 2px 2px 0 #C2C2C2; + box-shadow: 0 2px 2px 0 #C2C2C2; } -#menu-list em { - text-transform: uppercase; +#menu-list, #menu-list > li > ul { + list-style-type: none; } -#menu ul li { - padding-bottom: 1em; +/* menu on left col, content on right col */ + +#menu { + float: left; + width: 18%; } -#menu-list ul li { - padding: 0 0 0 0em; +#main { + float: right; + width: 80%; } +/* asciidoc */ + +#toc, #content { + margin: 0em 0em 2em 0em; + + background: #ffffff; + -moz-box-sizing: border-box; + padding: 2em 2em 2em 2em; + + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + -webkit-box-shadow: 0 2px 2px 0 #C2C2C2; + box-shadow: 0 2px 2px 0 #C2C2C2; +} \ No newline at end of file -- 2.7.4