From 489094f6fe4c749f2566a7982e23d0669446e5aa Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 20 Jun 2022 17:22:16 +0700
Subject: [PATCH] fixed flow cell sizes
---
src/layouts/FlowLayout/styles.module.scss | 2 +-
src/styles/_mixins.scss | 35 +++++++++++++++--------
2 files changed, 24 insertions(+), 13 deletions(-)
diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss
index f00fe269..4d20581b 100644
--- a/src/layouts/FlowLayout/styles.module.scss
+++ b/src/layouts/FlowLayout/styles.module.scss
@@ -22,7 +22,7 @@ $cols: math.div($content_width, $cell);
}
.grid {
- grid-template-rows: 50vh $cell;
+ grid-template-rows: 50vh;
@include flow_grid;
}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index c23fc8fc..fccf7be6 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -202,33 +202,44 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
- grid-auto-rows: $cell;
grid-auto-flow: row dense;
grid-column-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) {
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
- grid-auto-rows: $fluid_cell;
grid-template-rows: calc(50vw - 10px) $fluid_cell;
}
+ // < 776px
@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) {
- // 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-rows: calc(80vw - 10px) auto 50vw;
- grid-auto-rows: 50vw;
- }
-
- @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;
+ grid-template-rows: calc(100vw - 10px) auto calc(50vw - 10px);
+ background: green;
}
}