muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

made fixed-with lab

Browse source
This commit is contained in:
Fedor Katurov 2021-09-14 17:03:28 +07:00
parent 6ba26e9c3e
commit 9d5db84456
2 changed files with 3 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/layouts/LabLayout/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useCallback, useEffect } from 'react'; import React, { FC, useEffect } from 'react';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { Sticky } from '~/components/containers/Sticky'; import { Sticky } from '~/components/containers/Sticky';
import { Container } from '~/containers/main/Container'; import { Container } from '~/containers/main/Container';
@ -11,27 +11,12 @@ import { LabStats } from '~/containers/lab/LabStats';
import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
import { selectLabList } from '~/redux/lab/selectors'; import { selectLabList } from '~/redux/lab/selectors';
import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { SidebarRouter } from '~/containers/main/SidebarRouter';
import { Superpower } from '~/components/boris/Superpower';
import { Toggle } from '~/components/input/Toggle';
import { usePersistedState } from '~/utils/hooks/usePersistedState';
import classNames from 'classnames';
interface IProps {} interface IProps {}
enum Layout {
Fluid = 'fluid',
Default = 'default',
}
const LabLayout: FC<IProps> = () => { const LabLayout: FC<IProps> = () => {
const { is_loading } = useShallowSelect(selectLabList); const { is_loading } = useShallowSelect(selectLabList);
const dispatch = useDispatch(); const dispatch = useDispatch();
const [layout, setLayout] = usePersistedState('lab_layout', Layout.Default);
const isFluid = layout === Layout.Fluid;
const toggleLayout = useCallback(() => {
setLayout(isFluid ? Layout.Default : Layout.Fluid);
}, [setLayout, isFluid]);
useEffect(() => { useEffect(() => {
dispatch(labGetList()); dispatch(labGetList());
@ -40,7 +25,7 @@ const LabLayout: FC<IProps> = () => {
return ( return (
<div> <div>
<div className={classNames(styles.container, { [styles.fluid]: isFluid })}> <Container>
<div className={styles.wrap}> <div className={styles.wrap}>
<Group className={styles.content}> <Group className={styles.content}>
<LabHead isLoading={is_loading} /> <LabHead isLoading={is_loading} />
@ -53,7 +38,7 @@ const LabLayout: FC<IProps> = () => {
</Sticky> </Sticky>
</div> </div>
</div> </div>
</div> </Container>
<SidebarRouter prefix="/lab" isLab /> <SidebarRouter prefix="/lab" isLab />
</div> </div>

30
src/layouts/LabLayout/styles.module.scss
View file

@ -1,13 +1,5 @@
@import "~/styles/variables.scss"; @import "~/styles/variables.scss";
@mixin fluid {
@media(min-width: $content_width) {
.fluid & {
@content
}
}
}
.wrap { .wrap {
display: grid; display: grid;
grid-template-columns: 3fr 1fr; grid-template-columns: 3fr 1fr;
@ -18,11 +10,6 @@
grid-auto-flow: row; grid-auto-flow: row;
padding: 0 $gap / 2; padding: 0 $gap / 2;
} }
@include fluid {
grid-template-columns: 3fr $cell;
padding: 0 $gap;
}
} }
.panel { .panel {
@ -37,20 +24,3 @@
margin: 0 $gap $gap 0; margin: 0 $gap $gap 0;
} }
} }
.toggles {
padding: $gap;
}
.container {
width: 100%;
max-width: $content_width;
&.fluid {
max-width: 100vw;
}
}
.content {
min-width: 0;
}