a
/
badguardhome
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Pull request: client: fix statistics table layout 

Squashed commit of the following:

commit 02834e6b7b42793e31fd01cadf0af6da875d556b
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Sep 29 16:47:14 2021 +0300

    client: nowrap

commit b45162a0f20b035c36ceb75cbc2485fa49012628
Author: Ildar Kamalov <ik@adguard.com>
Date:   Wed Sep 29 16:28:05 2021 +0300

    fix: stats table layout
This commit is contained in:
Ildar Kamalov 2021-09-29 17:25:22 +03:00
parent ce0df255be
commit e178cb631f
2 changed files with 64 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/components/Dashboard/Counters.js
View File

@ -16,18 +16,31 @@ const Row = ({
? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink> ? <LogsSearchLink response_status={response_status}>{formatNumber(count)}</LogsSearchLink>
: count; : count;
return <tr key={label}> return (
<td> <div className="counters__row" key={label}>
<Trans components={translationComponents}>{label}</Trans> <div className="counters__column">
<Tooltip content={tooltipTitle} placement="top" <span className="counters__title">
className="tooltip-container tooltip-custom--narrow text-center"> <Trans components={translationComponents}>
<svg className="icons icon--20 icon--lightgray ml-2"> {label}
<use xlinkHref="#question" /> </Trans>
</svg> </span>
</Tooltip> <span className="counters__tooltip">
</td> <Tooltip
<td className="text-right"><strong>{content}</strong></td> content={tooltipTitle}
</tr>; 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 }) => { const Counters = ({ refreshButton, subtitle }) => {
@ -88,9 +101,9 @@ const Counters = ({ refreshButton, subtitle }) => {
bodyType="card-table" bodyType="card-table"
refresh={refreshButton} refresh={refreshButton}
> >
<table className="table card-table"> <div className="counters">
<tbody>{rows.map(Row)}</tbody> {rows.map(Row)}
</table> </div>
</Card> </Card>
); );
}; };

36
client/src/components/Dashboard/Dashboard.css
View File

@ -49,3 +49,39 @@
display: block; 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;
}
}