Improve CCS of WebUI #3024

conf/glances.conf

@@ -30,7 +30,7 @@ history_size=1200
 # Set the the Curses and WebUI interface left menu plugin list (comma-separated)
 #left_menu=network,wifi,connections,ports,diskio,fs,irq,folders,raid,smart,sensors,now
 # Limit the number of processes to display (in the WebUI)
-max_processes_display=25
+#max_processes_display=25
 # Options for WebUI
 #------------------
 # Set URL prefix for the WebUI and the API

glances/outputs/static/css/style.scss

@@ -20,6 +20,7 @@ body {
     color: $glances-fg;
     font-family: $glances-fonts;
     font-size: $glances-fonts-size;
+    overflow: hidden;
 }
 
 .title {
@@ -77,6 +78,26 @@ body {
     font-weight: bold !important;
 }
 
+// Layout
+
+.header {
+    height: 30px;
+}
+
+.top {
+    height: 140px;
+}
+
+.left-sidebar {
+    overflow-y: auto;
+    height: calc(100vh - 30px - 140px);
+}
+
+.right-sidebar {
+    overflow-y: auto;
+    height: calc(100vh - 30px - 140px);
+}
+
 // Table
 
 .table {
@@ -119,23 +140,6 @@ body {
     background: $glances-link-hover-color;
 }
 
-// Separator
-
-.separator {
-    overflow: hidden;
-    height: 5px;
-}
-
-.separator:after {
-    content: '';
-    display: block;
-    margin: -25px auto 0;
-    width: 100%;
-    height: 24px;
-    border-radius: 125px / 12px;
-    box-shadow: 0 0 8px #555555;
-}
-
 // Plugins
 
 .plugin {
@@ -270,6 +274,8 @@ body {
 }
 
 #processlist {
+    overflow-y: auto;
+    height: 600px;
     * > td:nth-child(-n+12) {
         width: 5em;
     }
@@ -280,7 +286,7 @@ body {
         width: 7em;
     }
     * > td:nth-child(7) {
-        width: 6em;
+        width: 7em;
     }
     * > td:nth-child(9),td:nth-child(10) {
         width: 2em;

glances/outputs/static/js/App.vue

@@ -4,7 +4,7 @@
     </div>
     <glances-help v-else-if="args.help_tag"></glances-help>
     <main v-else>
-        <div class="container-fluid margin-bottom">
+        <div class="container-fluidheader">
             <div class="row justify-content-between">
                 <div class="col-auto" v-if="!args.disable_system">
                     <glances-plugin-system :data="data"></glances-plugin-system>
@@ -25,8 +25,7 @@
                 </div>
             </div>
         </div>
-        <div class="row separator" v-if="args.enable_separator"></div>
-        <div class="container-fluid margin-top margin-bottom">
+        <div class="container-fluid top">
             <div class="row justify-content-between">
                 <!-- Quicklook -->
                 <div class="col-3 d-none d-lg-block d-xl-block d-xxl-block" v-if="!args.disable_quicklook">
@@ -64,17 +63,16 @@
                 </div>
             </div>
         </div>
-        <div class="row separator" v-if="args.enable_separator"></div>
-        <div class="container-fluid margin-top">
+        <div class="container-fluid">
             <div class="row">
-                <div class="col-3 sidebar" v-if="!args.disable_left_sidebar">
+                <div class="col-3 left-sidebar" v-if="!args.disable_left_sidebar">
                     <template v-for="plugin in leftMenu">
                         <component v-if="!args[`disable_${plugin}`]" :is="`glances-plugin-${plugin}`"
-                            :id="`plugin-${plugin}`" class="plugin" :data="data">
+                            :id="`plugin-${plugin}`" :data="data">
                         </component>
                     </template>
                 </div>
-                <div class="col">
+                <div class="col right-sidebar">
                     <glances-plugin-vms v-if="!args.disable_vms" :data="data"></glances-plugin-vms>
                     <glances-plugin-containers v-if="!args.disable_containers" :data="data"></glances-plugin-containers>
                     <glances-plugin-process :data="data"></glances-plugin-process>

glances/outputs/static/js/components/plugin-quicklook.vue

@@ -13,14 +13,8 @@
                 <tr v-if="!args.percpu">
                     <td scope="col">CPU</td>
                     <td scope="col" class="progress">
-                        <div
-                            :class="`progress-bar progress-bar-${getDecoration('cpu')}`"
-                            role="progressbar"
-                            :aria-valuenow="cpu"
-                            aria-valuemin="0"
-                            aria-valuemax="100"
-                            :style="`width: ${cpu}%;`"
-                        >
+                        <div :class="`progress-bar progress-bar-${getDecoration('cpu')}`" role="progressbar"
+                            :aria-valuenow="cpu" aria-valuemin="0" aria-valuemax="100" :style="`width: ${cpu}%;`">
                             &nbsp;
                         </div>
                     </td>
@@ -29,30 +23,20 @@
                 <tr v-if="args.percpu" v-for="(percpu, percpuId) in percpus" :key="percpuId">
                     <td scope="col">CPU{{ percpu.number }}</td>
                     <td scope="col" class="progress">
-                        <div
-                            :class="`progress-bar progress-bar-${getDecoration('cpu')}`"
-                            role="progressbar"
-                            :aria-valuenow="percpu.total"
-                            aria-valuemin="0"
-                            aria-valuemax="100"
-                            :style="`width: ${percpu.total}%;`"
-                        >
+                        <div :class="`progress-bar progress-bar-${getDecoration('cpu')}`" role="progressbar"
+                            :aria-valuenow="percpu.total" aria-valuemin="0" aria-valuemax="100"
+                            :style="`width: ${percpu.total}%;`">
                             &nbsp;
                         </div>
                     </td>
                     <td scope="col" class="text-end">{{ percpu.total }}%</td>
                 </tr>
-                <tr v-for="(key) in stats_list_after_cpu">
+                <tr v-if="!args.percpu" v-for="(key) in stats_list_after_cpu">
                     <td scope="col">{{ key.toUpperCase() }}</td>
                     <td scope="col" class="progress">
-                        <div
-                            :class="`progress-bar progress-bar-${getDecoration(key)}`"
-                            role="progressbar"
-                            :aria-valuenow="stats[key]"
-                            aria-valuemin="0"
-                            aria-valuemax="100"
-                            :style="`width: ${stats[key]}%;`"
-                        >
+                        <div :class="`progress-bar progress-bar-${getDecoration(key)}`" role="progressbar"
+                            :aria-valuenow="stats[key]" aria-valuemin="0" aria-valuemax="100"
+                            :style="`width: ${stats[key]}%;`">
                             &nbsp;
                         </div>
                     </td>