From 66edc5c4d35c882fd7dd2f38a9e3de719d5de8ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Tue, 31 May 2022 15:23:42 +0200 Subject: [PATCH] Web: include name of status in worker list This makes it a bit easier to interpret. Just having the colours might be too little information. --- web/app/src/assets/base.css | 3 ++- web/app/src/components/workers/WorkersTable.vue | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css index 677db2de..639d919a 100644 --- a/web/app/src/assets/base.css +++ b/web/app/src/assets/base.css @@ -304,8 +304,9 @@ footer { background-color: var(--indicator-color); border: calc(var(--indicator-size)/2) solid var(--indicator-color); border-radius: 50%; - display: block; + display: inline-block; height: var(--indicator-size); + vertical-align: middle; width: var(--indicator-size); } diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue index 054fec99..ad142f3f 100644 --- a/web/app/src/components/workers/WorkersTable.vue +++ b/web/app/src/components/workers/WorkersTable.vue @@ -43,7 +43,11 @@ export default { // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), }, { title: 'Status', field: 'status', sorter: 'string', - formatter: (cell) => indicator(cell.getData().status, 'worker-'), + formatter: (cell) => { + const status = cell.getData().status; + const dot = indicator(status, 'worker-'); + return `${dot} ${status}`; + }, }, { title: 'Name', field: 'nickname', sorter: 'string' }, ],