From e178cb631f7334230ecb7d53cedd150e72b79467 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Wed, 29 Sep 2021 17:25:22 +0300 Subject: [PATCH] Pull request: client: fix statistics table layout Squashed commit of the following: commit 02834e6b7b42793e31fd01cadf0af6da875d556b Author: Ildar Kamalov Date: Wed Sep 29 16:47:14 2021 +0300 client: nowrap commit b45162a0f20b035c36ceb75cbc2485fa49012628 Author: Ildar Kamalov Date: Wed Sep 29 16:28:05 2021 +0300 fix: stats table layout --- client/src/components/Dashboard/Counters.js | 43 ++++++++++++------- client/src/components/Dashboard/Dashboard.css | 36 ++++++++++++++++ 2 files changed, 64 insertions(+), 15 deletions(-) diff --git a/client/src/components/Dashboard/Counters.js b/client/src/components/Dashboard/Counters.js index 6b57484e..2434bb8c 100644 --- a/client/src/components/Dashboard/Counters.js +++ b/client/src/components/Dashboard/Counters.js @@ -16,18 +16,31 @@ const Row = ({ ? {formatNumber(count)} : count; - return - - {label} - - - - - - - {content} - ; + return ( +
+
+ + + {label} + + + + + + + + + +
+
+ {content} +
+
+ ); }; const Counters = ({ refreshButton, subtitle }) => { @@ -88,9 +101,9 @@ const Counters = ({ refreshButton, subtitle }) => { bodyType="card-table" refresh={refreshButton} > - - {rows.map(Row)} -
+
+ {rows.map(Row)} +
); }; diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css index 9e733044..ee36d265 100644 --- a/client/src/components/Dashboard/Dashboard.css +++ b/client/src/components/Dashboard/Dashboard.css @@ -49,3 +49,39 @@ display: block; } } + +.counters__row { + display: flex; + align-items: center; + justify-content: space-between; + border-top: 1px solid #dee2e6; + padding: 0.75rem 1.5rem; +} + +.counters__column--value { + flex-shrink: 0; + margin-left: 1.5rem; + text-align: right; + white-space: nowrap; +} + +@media screen and (min-width: 768px) { + .counters__column { + display: flex; + align-items: center; + overflow: hidden; + } + + .counters__title { + display: block; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + .counters__tooltip { + display: block; + flex-shrink: 0; + } +}