Second version for responsive design

glances/outputs/glances_bottle.py

@@ -132,38 +132,33 @@ class glancesBottle:
         """
 
         html = template('header', refresh_time=refresh_time)
-        html += "<header>"
+        html += '<header>'
         html += self.display_plugin('system', self.stats.get_plugin('system').get_curse(args=self.args))
         html += self.display_plugin('uptime', self.stats.get_plugin('uptime').get_curse(args=self.args))
-        html += "</header>"
+        html += '</header>'
         html += template('newline')
-        html += "<section>"
+        html += '<section>'
         html += self.display_plugin('cpu', self.stats.get_plugin('cpu').get_curse(args=self.args))
         html += self.display_plugin('load', self.stats.get_plugin('load').get_curse(args=self.args))
         html += self.display_plugin('mem', self.stats.get_plugin('mem').get_curse(args=self.args))
         html += self.display_plugin('memswap', self.stats.get_plugin('memswap').get_curse(args=self.args))
-        html += "</section>"
+        html += '</section>'
         html += template('newline')
-        html += "<section>"
-        html += "<aside>"
+        html += '<div>'
+        html += '<aside>'
         html += self.display_plugin('network', self.stats.get_plugin('network').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('diskio', self.stats.get_plugin('diskio').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('fs', self.stats.get_plugin('fs').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('sensors', self.stats.get_plugin('sensors').get_curse(args=self.args))
-        html += "</aside>"
-        html += "<aside>"
+        html += '</aside>'
+        html += '<section>'
         html += self.display_plugin('alert', self.stats.get_plugin('alert').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('processcount', self.stats.get_plugin('processcount').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('monitor', self.stats.get_plugin('monitor').get_curse(args=self.args))
-        html += template('newline')
         html += self.display_plugin('processlist', self.stats.get_plugin('processlist').get_curse(args=self.args))
-        html += "</aside>"
-        html += "</section>"
+        html += '</section>'
+        html += '</div>'
+        html += template('newline')
         html += template('footer')
 
         return html

glances/outputs/static/css/normalize.css

@@ -0,0 +1 @@
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

glances/outputs/static/css/style.css

@@ -0,0 +1,136 @@
+body {
+    background: black;
+    color: #BBB;
+    font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
+    font-size: 100%;
+}
+header,footer,
+article,section,
+hgroup,nav,
+figure,div,aside {
+    display: block;
+}
+section {
+    text-align: justify;
+}
+section > article {
+    display: inline-block;
+    vertical-align: top;
+    *display: inline;
+    zoom: 1;    
+}
+section:after {
+    content: "";
+    width: 100%;
+    display: inline-block;    
+}
+aside {
+    float: left;
+    margin-right: 2%;
+}
+div#newline{
+    clear: both;
+    height: 1em;
+}
+#underline{
+    text-decoration: underline
+}
+#bold{
+    font-weight: bold;
+}
+#sort{
+    font-weight: bold;
+}
+#sort:after{
+    content: '\25BC'
+}
+/*Theme*/
+#title{
+    font-weight: bold;
+    color: white;
+}
+#table {
+    display: table;
+}
+.row {
+    display: table-row;
+}
+.cell {
+    display: table-cell;
+}
+#ok {
+    color: green;
+}
+#ok_log {
+    background-color: green;
+    color: white;
+}
+#careful {
+    color: blueviolet;
+}
+#careful_log {
+    background-color: blueviolet;
+    color: white;
+}
+#warning {
+    color: orange;
+}
+#warning_log {
+    background-color: orange;
+    color: white;
+}
+#critical {
+    color: red;
+}
+#critical_log {
+    background-color: red;
+    color: white;
+}
+/*Plugins*/
+#system {
+    float: left;
+}
+#uptime {
+    float: right;
+}
+#cpu {}
+#load {}
+#mem {}
+#memswap {}
+#network {
+    margin-bottom: 1em;
+}
+#diskio {
+    margin-bottom: 1em;
+}
+#fs {
+    margin-bottom: 1em;
+}
+#sensors {}
+#processcount {
+    margin-bottom: 1em;
+}
+#monitor {
+    margin-bottom: 1em;
+}
+#processlist {}
+article#processlist>div>div>span:last-child {
+    visibility: hidden;
+    white-space: nowrap;
+}
+#alert {    
+    margin-bottom: 1em;
+}
+#now {}
+/*Responsive design*/
+@media only screen and (max-width: 1024px) {
+    body { font-size:90%; }
+}
+@media only screen and (max-width: 768px) {
+    body { font-size:60%; }
+    aside { margin-right: 1%; }
+}
+@media only screen and (max-width: 480px) {
+    body { font-size:30%; }
+    aside { margin-right: 1%; }
+}