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

fixed flow cell sizes

Browse source
This commit is contained in:
Fedor Katurov 2022-06-20 17:22:16 +07:00
parent 2c39fcda25
commit 489094f6fe
2 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/FlowLayout/styles.module.scss
View file

@ -22,7 +22,7 @@ $cols: math.div($content_width, $cell);
} }
.grid { .grid {
grid-template-rows: 50vh $cell; grid-template-rows: 50vh;
@include flow_grid; @include flow_grid;
} }

35
src/styles/_mixins.scss
View file

@ -202,33 +202,44 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr)); grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
grid-auto-rows: $cell;
grid-auto-flow: row dense; grid-auto-flow: row dense;
grid-column-gap: $gap; grid-column-gap: $gap;
grid-row-gap: $gap; grid-row-gap: $gap;
grid-auto-rows: $cell;
// 4 cells
@media (max-width: $cell * 5 + $gap * 4 + 55) {
grid-auto-rows: calc(25vw - 30px);
}
// 3 cells
@media (max-width: $cell * 4 + $gap * 3 + 55) {
grid-auto-rows: calc(33vw - 30px);
}
// 2 cells
@media (max-width: $cell * 3 + $gap * 2 + 55) {
grid-auto-rows: calc(50vw - 40px);
background: yellow;
}
// < 870px
@media (max-width: ($cell + 10) * 3) { @media (max-width: ($cell + 10) * 3) {
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr)); grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
grid-auto-rows: $fluid_cell;
grid-template-rows: calc(50vw - 10px) $fluid_cell; grid-template-rows: calc(50vw - 10px) $fluid_cell;
} }
// < 776px
@media (max-width: $cell_tablet) { @media (max-width: $cell_tablet) {
grid-template-rows: calc(66vw - 10px) auto $fluid_cell; grid-template-rows: calc(66vw - 10px) auto calc(50vw - 40px);
} }
// < 520px
@media (max-width: $cell_mobile) { @media (max-width: $cell_mobile) {
// rework stamp, so it will be shown as smaller one on mobiles
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
grid-template-rows: calc(80vw - 10px) auto 50vw; grid-template-rows: calc(100vw - 10px) auto calc(50vw - 10px);
grid-auto-rows: 50vw; background: green;
}
@media (max-width: ($fluid_cell + 5) * 1.5 + 20) {
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
grid-template-rows: calc(80vw - 10px) auto 50vw;
grid-auto-rows: 50vw;
} }
} }