From b45162a0f20b035c36ceb75cbc2485fa49012628 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov <ik@adguard.com> Date: Wed, 29 Sep 2021 16:28:05 +0300 Subject: [PATCH] fix: stats table layout --- client/src/components/Dashboard/Counters.js | 43 ++++++++++++------- client/src/components/Dashboard/Dashboard.css | 35 +++++++++++++++ 2 files changed, 63 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 = ({ ? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink> : count; - return <tr key={label}> - <td> - <Trans components={translationComponents}>{label}</Trans> - <Tooltip content={tooltipTitle} placement="top" - className="tooltip-container tooltip-custom--narrow text-center"> - <svg className="icons icon--20 icon--lightgray ml-2"> - <use xlinkHref="#question" /> - </svg> - </Tooltip> - </td> - <td className="text-right"><strong>{content}</strong></td> - </tr>; + return ( + <div className="counters__row" key={label}> + <div className="counters__column"> + <span className="counters__title"> + <Trans components={translationComponents}> + {label} + </Trans> + </span> + <span className="counters__tooltip"> + <Tooltip + content={tooltipTitle} + placement="top" + className="tooltip-container tooltip-custom--narrow text-center" + > + <svg className="icons icon--20 icon--lightgray ml-2"> + <use xlinkHref="#question" /> + </svg> + </Tooltip> + </span> + </div> + <div className="counters__column counters__column--value"> + <strong>{content}</strong> + </div> + </div> + ); }; const Counters = ({ refreshButton, subtitle }) => { @@ -88,9 +101,9 @@ const Counters = ({ refreshButton, subtitle }) => { bodyType="card-table" refresh={refreshButton} > - <table className="table card-table"> - <tbody>{rows.map(Row)}</tbody> - </table> + <div className="counters"> + {rows.map(Row)} + </div> </Card> ); }; diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css index 9e733044..7c9a3b69 100644 --- a/client/src/components/Dashboard/Dashboard.css +++ b/client/src/components/Dashboard/Dashboard.css @@ -49,3 +49,38 @@ 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; +} + +@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; + } +}