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

use container queries in flow

Browse source
This commit is contained in:
Fedor Katurov 2025-01-25 21:37:33 +07:00
parent 71306d4c14
commit fd8907dd3a
4 changed files with 62 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,19 @@
@import 'src/styles/variables';
$target_flow_cell_width: 225px;
/** Makes a breakpoint for target cell width **/
@mixin breakpoint($columns) {
@container sizer (max-width: #{$target_flow_cell_width* $columns}) {
grid-template-columns: repeat(#{$columns}, 1fr);
grid-auto-rows: calc(
(100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
);
@content;
}
}
.wrap {
max-width: 2000px;
padding: 0 40px 40px 40px;
@ -14,6 +27,7 @@ $cols: math.div($content_width, $cell);
.container {
@include container;
margin-top: $page_top_offset;
container: sizer / size;
@include tablet {
padding: 0 $gap;
@ -22,9 +36,37 @@ $cols: math.div($content_width, $cell);
}
.grid {
grid-template-rows: 50vh;
width: 100%;
min-height: 200px;
display: grid;
gap: #{$gap};
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
grid-template-rows: 40vh;
grid-auto-flow: row dense;
@include flow_grid;
@include breakpoint(5);
@include breakpoint(4);
@include breakpoint(3) {
grid-template-rows: calc(66cqw - #{$gap}) auto;
}
@include breakpoint(2) {
grid-template-rows: calc(100cqw - #{$gap}) auto;
}
@container sizer (width < #{$flow_hide_recents}) {
.stamp {
grid-column-start: 1;
grid-row-end: span 1;
}
.login {
display: flex;
grid-column: 1 / 2;
grid-row-end: span 2;
}
}
}
.pad_last {
@ -52,11 +94,6 @@ $cols: math.div($content_width, $cell);
justify-content: stretch;
overflow: hidden;
position: relative;
@media (max-width: $flow_hide_recents) {
grid-column-start: 1;
grid-row-end: span 1;
}
}
.login {
@ -72,10 +109,4 @@ $cols: math.div($content_width, $cell);
@include desktop {
display: none;
}
@media (max-width: $flow_hide_recents) {
display: flex;
grid-column: 1 / 2;
grid-row-end: span 2;
}
}