mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pull request: 4815 fix table view of the query log modal 

Updates #4815

Squashed commit of the following:

commit a547c546a2b3cdbfb6988c910d8a970e0189ae5a
Merge: 3c1e745d f5602d9c
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 17:40:38 2022 +0300

    Merge branch 'master' into 4815-tablet-view-fix

commit 3c1e745dc2e34a62be8264ad003b5e6c155bb241
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Oct 10 16:50:10 2022 +0300

    fix mobile view

commit a1d0b36473982854eecf1d96cf5a7033059e7720
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 17:57:14 2022 +0300

    client: fix styles

commit f34f928e1dbeef5ed37a0de3515be8d12f2241f6
Author: Ildar Kamalov <ik@adguard.com>
Date:   Sun Oct 9 16:59:23 2022 +0300

    client: fix table view of query log modal
This commit is contained in:
Ildar Kamalov 2022-10-10 17:49:19 +03:00
parent f5602d9c46
commit 0eba31ca03
5 changed files with 41 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Logs/Cells/ClientCell.js
View File

@ -121,7 +121,7 @@ const ClientCell = ({
{options.map(({ name, onClick, disabled }) => (
<button
key={name}
className="button-action--arrow-option px-4 py-2"
className="button-action--arrow-option px-4 py-1"
onClick={onClick}
disabled={disabled}
>

27
client/src/components/Logs/Cells/IconTooltip.css
View File

@ -50,9 +50,30 @@
}
@media (max-width: 1024px) {
.grid .key-colon, .grid .title--border {
.grid .title--border {
margin-bottom: 4px;
font-weight: 600;
}
.grid .key-colon {
margin-right: 4px;
color: var(--gray-8);
}
.grid__row {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin-bottom: 2px;
font-size: 14px;
word-break: break-all;
overflow: hidden;
}
.grid__row .filteringRules__filter,
.grid__row .filteringRules {
margin-bottom: 0;
}
}
@media (max-width: 767.98px) {
@ -100,7 +121,7 @@
}
.title--border {
padding-top: 2rem;
padding-top: 1rem;
}
.title--border:before {
@ -109,7 +130,7 @@
left: 0;
border-top: 0.5px solid var(--gray-d8) !important;
width: 100%;
margin-top: -1rem;
margin-top: -0.5rem;
}
.icon-cross {

6
client/src/components/Logs/Cells/index.js
View File

@ -146,7 +146,7 @@ const Row = memo(({
type="button"
className={
classNames(
'button-action--arrow-option',
'button-action--arrow-option mb-1',
{ 'bg--danger': !isBlocked },
{ 'bg--green': isFiltered },
)}
@ -158,13 +158,13 @@ const Row = memo(({
);
const blockForClientButton = <button
className='text-center font-weight-bold py-2 button-action--arrow-option'
className='text-center font-weight-bold py-1 button-action--arrow-option'
onClick={onBlockingForClientClick}>
{t(blockingForClientKey)}
</button>;
const blockClientButton = <button
className='text-center font-weight-bold py-2 button-action--arrow-option'
className='text-center font-weight-bold py-1 button-action--arrow-option'
onClick={onBlockingClientClick}
disabled={processingSet || lastRuleInAllowlist}>
{t(blockingClientKey)}

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

@ -312,8 +312,8 @@
border: 0;
display: block;
width: 100%;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
text-align: center;
font-weight: 700;
color: inherit;

19
client/src/components/Logs/index.js
View File

@ -47,17 +47,20 @@ const processContent = (data) => Object.entries(data)
keyClass = '';
}
return isHidden ? null : <div key={key}>
<div
return isHidden ? null : (
<div className="grid__row" key={key}>
<div
className={classNames(`key__${key}`, keyClass, {
'font-weight-bold': isBoolean && value === true,
})}>
<Trans>{isButton ? value : key}</Trans>
})}
>
<Trans>{isButton ? value : key}</Trans>
</div>
<div className={`value__${key} text-pre text-truncate`}>
<Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
</div>
</div>
<div className={`value__${key} text-pre text-truncate`}>
<Trans>{(isTitle || isButton || isBoolean) ? '' : value || '—'}</Trans>
</div>
</div>;
);
});
const Logs = () => {