Refactor WebUI responsive

glances/outputs/static/css/custom.scss

@@ -5,7 +5,7 @@
 
 // Include any default variable overrides here (though functions won't be available)
 
-@import "../node_modules/bootstrap/scss/bootstrap";
+// @import "../node_modules/bootstrap/scss/bootstrap";
 
 // Then add additional custom code here
 
@@ -15,32 +15,36 @@
 // // ====================================
 
 // // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
-// @import "../node_modules/bootstrap/scss/functions";
+@import "../node_modules/bootstrap/scss/functions";
 
 // // 2. Include any default variable overrides here
+// $body-bg: #000;
+// $body-color: #111;
 
 // // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
-// @import "../node_modules/bootstrap/scss/variables";
-// @import "../node_modules/bootstrap/scss/variables-dark";
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
 
 // // 4. Include any default map overrides here
 
 // // 5. Include remainder of required parts
-// @import "../node_modules/bootstrap/scss/maps";
-// @import "../node_modules/bootstrap/scss/mixins";
-// @import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
 
 // // 6. Optionally include any other parts as needed
-// @import "../node_modules/bootstrap/scss/utilities";
-// @import "../node_modules/bootstrap/scss/reboot";
-// @import "../node_modules/bootstrap/scss/type";
-// @import "../node_modules/bootstrap/scss/images";
-// @import "../node_modules/bootstrap/scss/containers";
-// @import "../node_modules/bootstrap/scss/grid";
-// @import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/helpers";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/progress";
 
 // // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
-// @import "../node_modules/bootstrap/scss/utilities/api";
+@import "../node_modules/bootstrap/scss/utilities/api";
 
 // // 8. Add additional custom code here
 

glances/outputs/static/css/style.scss

@@ -84,7 +84,7 @@
 }
 
 .text-truncate {
-    display: block;
+    // display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

glances/outputs/static/js/App.vue

@@ -9,10 +9,10 @@
                 <div class="col-auto" v-if="!args.disable_system">
                     <glances-plugin-system :data="data"></glances-plugin-system>
                 </div>
-                <div class="col" v-if="!args.disable_ip">
+                <div class="col d-none d-xl-block d-xxl-block" v-if="!args.disable_ip">
                     <glances-plugin-ip :data="data"></glances-plugin-ip>
                 </div>
-                <div class="col-auto ms-auto" v-if="!args.disable_now">
+                <div class="col-auto ms-auto d-none d-xxl-block" v-if="!args.disable_now">
                     <glances-plugin-now :data="data"></glances-plugin-now>
                 </div>
                 <div class="col-auto ms-auto" v-if="!args.disable_uptime">

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

@@ -4,7 +4,7 @@
         <span v-if="address">{{ address }}/{{ maskCdir }}</span>
         <span v-if="publicAddress" class="title">Pub</span>
         <span v-if="publicAddress">{{ publicAddress }}</span>
-        <span v-if="publicInfo">{{ publicInfo }}</span>
+        <span class="text-truncate" v-if="publicInfo">{{ publicInfo }}</span>
     </section>
 </template>
 

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

@@ -101,7 +101,7 @@
                     <td scope="row" class="hidden-xs hidden-sm" v-show="ioReadWritePresent">
                         {{ $filters.bytes(process.io_write) }}
                     </td>
-                    <td scope="row" v-show="args.process_short_name">
+                    <td scope="row" class="text-truncate" v-show="args.process_short_name">
                         {{ process.name }}
                     </td>
                     <td scope="row" v-show="!args.process_short_name">

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

@@ -1,10 +1,10 @@
 <template>
     <section id="quicklook" class="plugin">
         <div class="d-flex justify-content-between">
-            <span class="text-start">
+            <span class="text-start text-truncate">
                 {{ cpu_name }}
             </span>
-            <span class="text-end" v-if="cpu_hz_current">
+            <span class="text-end d-none d-xxl-block" v-if="cpu_hz_current">
                 {{ cpu_hz_current }}/{{ cpu_hz }}Ghz
             </span>
         </div>