mirrors/AdGuardHome
1
0
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-22 04:55:33 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: stats table layout

Browse source
This commit is contained in:
Ildar Kamalov 2021-09-29 16:28:05 +03:00
parent ce0df255be
commit b45162a0f2
2 changed files with 63 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/src/components/Dashboard/Counters.js
View file

@ -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">
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>
</td>
<td className="text-right"><strong>{content}</strong></td>
</tr>;
</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>
);
};

35
client/src/components/Dashboard/Dashboard.css
View file

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