kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reponsive fixes for dynamic grid v2

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-18 08:12:39 +02:00
parent daeaea5488
commit 67554b020d
1 changed files with 52 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/back/jdd-components/dynamic-grid-v2/dynamic-grid-v2.css
View File

@ -1,4 +1,6 @@
.dynamic-grid { .dynamic-grid {
container-type: inline-size;
&.dynamic-grid--bleed-bleed { &.dynamic-grid--bleed-bleed {
grid-column: bleed !important; grid-column: bleed !important;
} }
@ -47,12 +49,6 @@
box-sizing: border-box; box-sizing: border-box;
.tile-content-wrapper { .tile-content-wrapper {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-height: 20px;
overflow: hidden;
.tile-title { .tile-title {
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
@ -182,40 +178,66 @@
} }
} }
@container (max-width: 950px) { @container (max-width: 900px) {
.tab-container { .tiles-container {
.tiles-container { grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
.tile.vertical { .tile.vertical {
grid-row: span 1; grid-row: span 1;
grid-column: span 1; grid-column: span 1;
.tile-image--vertical { .tile-image--vertical {
display: none; display: none;
}
.tile-image--horizontal {
display: none;
}
.tile-image--square {
display: block;
picture img {
display: block !important;
}
}
} }
.tile.horizontal { .tile-image--horizontal {
grid-column: span 1; display: none;
}
.tile-image--square {
display: block;
picture img {
display: block !important;
}
} }
} }
} }
} }
@container (max-width: 700px) { @container (max-width: 700px) {
.tiles-container {
grid-template-columns: repeat(2, 1fr);
.tile.vertical {
grid-row: span 1;
grid-column: span 1;
.tile-image--vertical {
display: none;
}
.tile-image--horizontal {
display: none;
}
.tile-image--square {
display: block;
picture img {
display: block !important;
}
}
}
.tile.vertical {
grid-row: span 2;
grid-column: span 1;
}
}
}
@container (max-width: 500px) {
.tiles-container { .tiles-container {
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: 700px; max-width: 700px;