Solve layout pb on Web interface (isssue #364)

glances/core/glances_globals.py

@@ -19,7 +19,7 @@
 
 # Glances informations
 __appname__ = 'glances'
-__version__ = '2.0_RC3'
+__version__ = '2.0_RC4'
 __author__ = 'Nicolas Hennion <nicolas@nicolargo.com>'
 __license__ = 'LGPL'
 

glances/outputs/glances_bottle.py

@@ -182,10 +182,15 @@ class glancesBottle:
                 tpl += '<div class="row">'
                 continue
             if plugin_name == 'processlist' and m['splittable']:
-                # Display first word of splittable stats (Process name)
-                tpl += '<span class="cell" id="%s">%s</span>' % \
-                    (self.__style_list[m['decoration']],
-                     m['msg'].split(' ', 1)[0].replace(' ', '&nbsp;'))
+                # Processlist: Display first 20 chars of the process name
+                if m['msg'].split(' ', 1)[0] != '':
+                    tpl += '<span class="cell" id="%s">&nbsp;%s</span>' % \
+                        (self.__style_list[m['decoration']],
+                        m['msg'].split(' ', 1)[0].replace(' ', '&nbsp;')[:20])
+            elif m['optional']:
+                # Manage optional stats (responsive design)
+                tpl += '<span class="cell hide" id="%s">%s</span>' % \
+                    (self.__style_list[m['decoration']], m['msg'].replace(' ', '&nbsp;'))
             else:
                 # Display stat
                 tpl += '<span class="cell" id="%s">%s</span>' % \

glances/outputs/static/css/style.css

@@ -127,20 +127,31 @@ div#newline{
     margin: 1em;
 }
 #processlist {}
+/*
 article#processlist>div>div>span:last-child {
     visibility: hidden;
     white-space: nowrap;
 }
+*/
 #now {}
 /*Responsive design*/
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: 1600px) {
     body { font-size:90%; }
 }
+@media only screen and (max-width: 1280px) {
+    body { font-size:80%; }
+}
+@media only screen and (max-width: 1024px) {
+    body { font-size:80%; }
+    #processlist .hide { display: none; }
+}
 @media only screen and (max-width: 768px) {
-    body { font-size:60%; }
+    body { font-size:70%; }
     aside { margin-right: 1%; }
+    .hide { display: none; }
 }
 @media only screen and (max-width: 480px) {
-    body { font-size:30%; }
+    body { font-size:60%; }
     aside { margin-right: 1%; }
+    .hide { display: none; }
 }