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

Split view fixes

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 17:33:08 +02:00
parent bd262784d6
commit 5b5c7b2e4b
2 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/back/jdd-components/split-view/split-view.css
View File

@ -3,12 +3,7 @@
display: grid; display: grid;
grid-template-columns: subgrid; grid-template-columns: subgrid;
grid-column: screen !important;
@container (max-width: 640px) {
display: flex;
flex-flow: column;
gap: var(--row-gap);
}
.split-view__half { .split-view__half {
flex-basis: 50%; flex-basis: 50%;
@ -55,8 +50,6 @@
} }
&.split-view--bleed-left--screen { &.split-view--bleed-left--screen {
grid-column-start: screen-start;
.split-view__half { .split-view__half {
&:nth-child(1) { &:nth-child(1) {
grid-column-start: screen-start; grid-column-start: screen-start;
@ -65,8 +58,6 @@
} }
&.split-view--bleed-right--screen { &.split-view--bleed-right--screen {
grid-column-end: screen-end;
.split-view__half { .split-view__half {
&:nth-child(2) { &:nth-child(2) {
grid-column-end: screen-end; grid-column-end: screen-end;
@ -75,8 +66,6 @@
} }
&.split-view--bleed-left--bleed { &.split-view--bleed-left--bleed {
grid-column-start: bleed-start;
.split-view__half { .split-view__half {
&:nth-child(1) { &:nth-child(1) {
grid-column-start: bleed-start; grid-column-start: bleed-start;
@ -85,8 +74,6 @@
} }
&.split-view--bleed-right--bleed { &.split-view--bleed-right--bleed {
grid-column-end: bleed-end;
.split-view__half { .split-view__half {
&:nth-child(2) { &:nth-child(2) {
grid-column-end: bleed-end; grid-column-end: bleed-end;
@ -94,6 +81,41 @@
} }
} }
@container (max-width: 640px) {
display: grid;
grid-template-columns: subgrid;
row-gap: var(--row-gap);
.split-view__half:nth-child(1),
.split-view__half:nth-child(2) {
grid-column: content !important;
}
&.split-view--bleed-right--bleed {
.split-view__half:nth-child(2) {
grid-column: bleed !important;
}
}
&.split-view--bleed-left--bleed {
.split-view__half:nth-child(1) {
grid-column: bleed !important;
}
}
&.split-view--bleed-right--screen {
.split-view__half:nth-child(2) {
grid-column: screen !important;
}
}
&.split-view--bleed-left--screen {
.split-view__half:nth-child(1) {
grid-column: screen !important;
}
}
}
&.split-view--without-row-gap { &.split-view--without-row-gap {
row-gap: 0; row-gap: 0;
} }

2
src/main.css
View File

@ -73,7 +73,7 @@ body {
} }
@container (max-width: 600px) { @container (max-width: 600px) {
--screen-padding: 0px; --screen-padding: 8px;
} }
@container (max-width: 400px) { @container (max-width: 400px) {