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

- client: fix whois wrap and vertical alignment

This commit is contained in:
Ildar Kamalov 2020-07-24 17:17:11 +03:00
parent 0dab36a108
commit 1c9d3acaa8
4 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/components/Logs/Cells/getClientCell.js
View File

@ -16,6 +16,7 @@ const getClientCell = ({
const autoClient = autoClients.find((autoClient) => autoClient.name === client); const autoClient = autoClients.find((autoClient) => autoClient.name === client);
const source = autoClient?.source; const source = autoClient?.source;
const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
const id = nanoid(); const id = nanoid();
@ -33,7 +34,7 @@ const getClientCell = ({
const isFiltered = checkFiltered(reason); const isFiltered = checkFiltered(reason);
const nameClass = classNames('w-90 o-hidden d-flex flex-column', { const nameClass = classNames('w-90 o-hidden d-flex flex-column', {
'mt-2': isDetailed && !name && !whois_info, 'mt-2': isDetailed && !name && !whoisAvailable,
'white-space--nowrap': isDetailed, 'white-space--nowrap': isDetailed,
}); });
@ -78,12 +79,19 @@ const getClientCell = ({
content: processedData, content: processedData,
placement: 'bottom', placement: 'bottom',
})} })}
<div <div className={nameClass}>
className={nameClass}> <div data-tip={true} data-for={id}>
<div data-tip={true} data-for={id}>{formatClientCell(row, isDetailed)}</div> {formatClientCell(row, isDetailed)}
{isDetailed && name </div>
&& !whois_info && <div className="detailed-info d-none d-sm-block logs__text"
title={name}>{name}</div>} {isDetailed && name && !whoisAvailable && (
<div
className="detailed-info d-none d-sm-block logs__text"
title={name}
>
{name}
</div>
)}
</div> </div>
{renderBlockingButton(isFiltered, domain)} {renderBlockingButton(isFiltered, domain)}
</div> </div>

4
client/src/components/Logs/Logs.css
View File

@ -58,8 +58,7 @@
width: 100%; width: 100%;
} }
.logs__text--wrap, .logs__text--wrap {
.logs__text--whois {
line-height: 1.4; line-height: 1.4;
white-space: normal; white-space: normal;
} }
@ -71,6 +70,7 @@
.logs__text--whois { .logs__text--whois {
line-height: 1.2; line-height: 1.2;
color: #9aa0ac;
} }
.logs__row .tooltip-custom { .logs__row .tooltip-custom {

2
client/src/helpers/constants.js
View File

@ -296,7 +296,7 @@ export const DEFAULT_LOGS_FILTER = {
export const DEFAULT_LANGUAGE = 'en'; export const DEFAULT_LANGUAGE = 'en';
export const TABLE_DEFAULT_PAGE_SIZE = 50; export const TABLE_DEFAULT_PAGE_SIZE = 25;
export const TABLE_FIRST_PAGE = 0; export const TABLE_FIRST_PAGE = 0;

5
client/src/helpers/formatClientCell.js
View File

@ -31,10 +31,11 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
if (info) { if (info) {
const { name, whois_info } = info; const { name, whois_info } = info;
const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;
if (name) { if (name) {
if (isLogs) { if (isLogs) {
nameContainer = !whois_info && isDetailed nameContainer = !whoisAvailable && isDetailed
? ( ? (
<small title={value}>{value}</small> <small title={value}>{value}</small>
) : ( ) : (
@ -54,7 +55,7 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
} }
} }
if (whois_info && isDetailed) { if (whoisAvailable && isDetailed) {
whoisContainer = ( whoisContainer = (
<div className="logs__text logs__text--wrap logs__text--whois"> <div className="logs__text logs__text--wrap logs__text--whois">
{getFormattedWhois(whois_info)} {getFormattedWhois(whois_info)}