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;
+ }
+}