Pull request: 4775 fix query log issue on tablet devices

Updates #4775

Squashed commit of the following:

commit 9ad85d2306b68227e11c7b1dd792e3fe6389939d
Merge: 95aa29d6 41f081d8
Author: Ildar Kamalov <ik@adguard.com>
Date:   Tue Aug 2 11:44:04 2022 +0300

    Merge branch 'master' into 4775-popup

commit 95aa29d68bdf5e9c4e7aa59f42d04328b1872115
Author: Ildar Kamalov <ik@adguard.com>
Date:   Mon Aug 1 16:21:23 2022 +0300

    client: fix query log issue on tablet devices
This commit is contained in:
Ildar Kamalov 2022-08-02 11:51:49 +03:00
parent 41f081d8da
commit 053bb72a00
4 changed files with 55 additions and 15 deletions

View File

@ -139,11 +139,23 @@ const Row = memo(({
}
};
const blockButton = <button
className={classNames('title--border text-center button-action--arrow-option', { 'bg--danger': !isBlocked })}
onClick={onToggleBlock}>
const blockButton = (
<>
<div className="title--border" />
<button
type="button"
className={
classNames(
'button-action--arrow-option',
{ 'bg--danger': !isBlocked },
{ 'bg--green': isFiltered },
)}
onClick={onToggleBlock}
>
{t(buttonType)}
</button>;
</button>
</>
);
const blockForClientButton = <button
className='text-center font-weight-bold py-2 button-action--arrow-option'

View File

@ -102,10 +102,6 @@
padding: 0.5rem 0.75rem 0.5rem 2rem !important;
}
.bg--danger {
color: var(--danger) !important;
}
.form-control--search {
box-shadow: 0 1px 0 #ddd;
padding: 0 2.5rem;
@ -230,6 +226,12 @@
height: 1.6rem;
}
@media screen and (max-width: 1024px) {
.button-action__container {
display: none;
}
}
.button-action__container--detailed {
bottom: 1.3rem;
}
@ -310,16 +312,34 @@
border: 0;
display: block;
width: 100%;
text-align: left;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
font-weight: 700;
color: inherit;
cursor: pointer;
}
.button-action--arrow-option:hover,
.button-action--arrow-option:focus {
outline: none;
}
.button-action--arrow-option:focus-visible {
outline: 2px solid #295a9f;
}
.button-action--arrow-option:disabled {
display: none;
}
.tooltip-custom__container .button-action--arrow-option {
padding-bottom: 0;
text-align: left;
font-weight: 400;
}
.tooltip-custom__container .button-action--arrow-option:not(:disabled):hover {
cursor: pointer;
background: var(--gray-f3);
overflow: hidden;
}
@ -457,3 +477,11 @@
font-weight: normal;
margin-bottom: 1rem;
}
.bg--danger {
color: var(--danger);
}
.bg--green {
color: var(--green79);
}

View File

@ -7,7 +7,7 @@ import queryString from 'query-string';
import classNames from 'classnames';
import {
BLOCK_ACTIONS,
SMALL_SCREEN_SIZE,
MEDIUM_SCREEN_SIZE,
} from '../../helpers/constants';
import Loading from '../ui/Loading';
import Filters from './Filters';
@ -80,7 +80,7 @@ const Logs = () => {
const search = search_url_param || filter?.search || '';
const response_status = response_status_url_param || filter?.response_status || '';
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_SIZE);
const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= MEDIUM_SCREEN_SIZE);
const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
const [isModalOpened, setModalOpened] = useState(false);
@ -99,7 +99,7 @@ const Logs = () => {
})();
}, [response_status, search]);
const mediaQuery = window.matchMedia(`(max-width: ${SMALL_SCREEN_SIZE}px)`);
const mediaQuery = window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`);
const mediaQueryHandler = (e) => {
setIsSmallScreen(e.matches);
if (e.matches) {

View File

@ -588,7 +588,7 @@ export const FORM_NAME = {
};
export const SMALL_SCREEN_SIZE = 767;
export const MEDIUM_SCREEN_SIZE = 1023;
export const MEDIUM_SCREEN_SIZE = 1024;
export const SECONDS_IN_DAY = 60 * 60 * 24;