mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
returned fluid lab
This commit is contained in:
parent
8ff18dfd10
commit
2e4cb24cf4
4 changed files with 41 additions and 37 deletions
|
@ -18,20 +18,9 @@ import classNames from 'classnames';
|
|||
|
||||
interface IProps {}
|
||||
|
||||
enum Layout {
|
||||
Fluid = 'fluid',
|
||||
Default = 'default',
|
||||
}
|
||||
|
||||
const LabLayout: FC<IProps> = () => {
|
||||
const { is_loading } = useShallowSelect(selectLabList);
|
||||
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(() => {
|
||||
dispatch(labGetList());
|
||||
|
@ -39,8 +28,8 @@ const LabLayout: FC<IProps> = () => {
|
|||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classNames(styles.container, { [styles.fluid]: isFluid })}>
|
||||
<Container>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.wrap}>
|
||||
<Group className={styles.content}>
|
||||
<LabHead isLoading={is_loading} />
|
||||
|
@ -56,7 +45,7 @@ const LabLayout: FC<IProps> = () => {
|
|||
</div>
|
||||
|
||||
<SidebarRouter prefix="/lab" isLab />
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
@ -1,28 +1,15 @@
|
|||
@import "~/styles/variables.scss";
|
||||
|
||||
@mixin fluid {
|
||||
@media(min-width: $content_width) {
|
||||
.fluid & {
|
||||
@content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
column-gap: $gap;
|
||||
column-gap: $gap/2;
|
||||
|
||||
@include tablet {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
padding: 0 $gap / 2;
|
||||
}
|
||||
|
||||
@include fluid {
|
||||
grid-template-columns: 3fr $cell;
|
||||
padding: 0 $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue