sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

refactor(sticky-columns-layout): initial responsiveness and breakpoints

Browse Source
This commit is contained in:
enes 2024-08-28 18:05:30 +02:00
parent 5c8cbc1956
commit b3564389f9
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/layouts/StickySideColumns.module.scss
View File

@ -3,9 +3,26 @@
.container { .container {
display: grid; display: grid;
@media only screen and (max-width: 767px) {
gap: 20px;
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
> * {
scroll-snap-align: start;
}
}
@media only screen and (min-width: 768px) {
grid-template-columns: 0.75fr 1.5fr 0.75fr; grid-template-columns: 0.75fr 1.5fr 0.75fr;
grid-gap: 30px; gap: 30px;
flex-grow: 1; }
} }
.sidesWrap { .sidesWrap {
@ -16,8 +33,10 @@
} }
.sides { .sides {
@media only screen and (min-width: 768px) {
position: sticky; position: sticky;
top: $header-height + $body-vertical-padding; top: $header-height + $body-vertical-padding;
}
} }
.files { .files {
@ -29,4 +48,9 @@
padding: 10px; padding: 10px;
border: 10px solid $overlay-background-color; border: 10px solid $overlay-background-color;
border-radius: 4px; border-radius: 4px;
@media only screen and (max-width: 767px) {
max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
overflow-y: auto;
}
} }

4
src/pages/create/style.module.scss
View File

@ -135,11 +135,11 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
@container (min-width: 204px) { @container (min-width: 204px) {
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr);
} }
@container (min-width: 309px) { @container (min-width: 309px) {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr);
} }
gap: 15px; gap: 15px;