From ce0e3c7945d1f3bc4a27636b2b861b2b11776a57 Mon Sep 17 00:00:00 2001 From: nicolargo Date: Sat, 23 Nov 2024 10:16:36 +0100 Subject: [PATCH] Correct display issue on Containers plugin in WebUI #3028 --- glances/outputs/static/css/style.scss | 43 +++++++++++- .../js/components/plugin-containers.vue | 65 ++++++++++--------- .../js/components/plugin-processlist.vue | 18 ++--- .../static/js/components/plugin-vms.vue | 2 +- glances/outputs/static/public/browser.js | 2 +- glances/outputs/static/public/glances.js | 8 +-- 6 files changed, 89 insertions(+), 49 deletions(-) diff --git a/glances/outputs/static/css/style.scss b/glances/outputs/static/css/style.scss index 5f6fdbbc3..c7990a238 100644 --- a/glances/outputs/static/css/style.scss +++ b/glances/outputs/static/css/style.scss @@ -214,6 +214,12 @@ body { } #vms { + span { + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } .table { margin-bottom: 1em; } @@ -232,13 +238,23 @@ body { * > td:nth-child(7) { width: 10em; } + * > td:nth-child(6), td:nth-child(7), td:nth-child(8) { + text-overflow: ellipsis; + white-space: nowrap; + } } #containers { + span { + padding-left: 10px; + } + span:nth-child(1) { + padding-left: 0px; + } .table { margin-bottom: 1em; } - * > th:not(:last-child), td:not(:last-child) { + * > td:not(:last-child) { width: 5em; } * > td:nth-child(1) { @@ -247,12 +263,31 @@ body { * > td:nth-child(2), td:nth-child(3) { width: 15em; } - * > td:nth-child(4), td:nth-child(5) { + * > td:nth-child(4) { width: 6em; } + * > td:nth-child(5) { + width: 10em; + text-overflow: ellipsis; + white-space: nowrap; + } + * > td:nth-child(8) { + width: 10em; + text-overflow: ellipsis; + white-space: nowrap; + } + * > td:nth-child(9), td:nth-child(10) { + width: 8em; + text-overflow: ellipsis; + white-space: nowrap; + } * > td:nth-child(7), td:nth-child(9), td:nth-child(11) { text-align: right; } + * > td:nth-child(13) { + text-overflow: ellipsis; + white-space: nowrap; + } } #processcount { @@ -275,6 +310,10 @@ body { .table { margin-bottom: 1em; } + * > td:nth-child(8) { + text-overflow: ellipsis; + white-space: nowrap; + } } #processlist { diff --git a/glances/outputs/static/js/components/plugin-containers.vue b/glances/outputs/static/js/components/plugin-containers.vue index d81d5aa45..aaea3ff98 100644 --- a/glances/outputs/static/js/components/plugin-containers.vue +++ b/glances/outputs/static/js/components/plugin-containers.vue @@ -1,67 +1,68 @@