Pull request: client: fix statistics table layout
Squashed commit of the following: commit02834e6b7b
Author: Ildar Kamalov <ik@adguard.com> Date: Wed Sep 29 16:47:14 2021 +0300 client: nowrap commitb45162a0f2
Author: Ildar Kamalov <ik@adguard.com> Date: Wed Sep 29 16:28:05 2021 +0300 fix: stats table layout
This commit is contained in:
parent
ce0df255be
commit
e178cb631f
|
@ -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}>
|
||||||
|
{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">
|
<svg className="icons icon--20 icon--lightgray ml-2">
|
||||||
<use xlinkHref="#question" />
|
<use xlinkHref="#question" />
|
||||||
</svg>
|
</svg>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</td>
|
</span>
|
||||||
<td className="text-right"><strong>{content}</strong></td>
|
</div>
|
||||||
</tr>;
|
<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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue