evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apps/web: remove page elements order changing

Browse Source
This commit is contained in:
vchikalkin 2024-03-23 13:43:06 +03:00
parent 56fcb384f3
commit ec32c0dea6
3 changed files with 4 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/web/Components/Layout/Page.jsx
View File

@ -1,30 +1,12 @@
import { max, min } from '@/styles/mq';
import styled, { css } from 'styled-components';
import { min } from '@/styles/mq';
import styled from 'styled-components';
import { Box } from 'ui/grid';
const order = css`
${max('laptop')} {
#settings {
order: 1;
}
#form {
order: 2;
}
#output {
order: 3;
}
}
`;
export const Grid = styled(Box)`
display: flex;
flex-direction: column;
gap: 10px;
${order}
${min('laptop')} {
display: grid;
align-items: flex-start;

2
apps/web/config/ui.js
View File

@ -1,5 +1,5 @@
/* eslint-disable canonical/sort-keys */
const threshold = 1;
const threshold = 0;
const screens = {
tablet: 768,

2
apps/web/styles/mq.ts
View File

@ -1,7 +1,7 @@
import { screens, threshold } from '@/config/ui';
export function min(breakpoint: keyof typeof screens) {
return `@media (min-width: calc(${screens[breakpoint]}px))`;
return `@media (min-width: calc(${screens[breakpoint]}px + ${threshold}px))`;
}
export function max(breakpoint: keyof typeof screens) {
return `@media (max-width: calc(${screens[breakpoint]}px - ${threshold}px))`;