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

More layout options for split-view

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-15 19:49:28 +02:00
parent bd2ab54b0f
commit f58aeee7cd
2 changed files with 47 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -86,32 +86,37 @@
grid-template-columns: subgrid; grid-template-columns: subgrid;
row-gap: var(--row-gap); row-gap: var(--row-gap);
.split-view__half:nth-child(1), &.split-view--bleed-top-mobile--none .split-view__half:nth-child(1) {
.split-view__half:nth-child(2) {
grid-column: content !important; grid-column: content !important;
} }
&.split-view--bleed-right--bleed { &.split-view--bleed-top-mobile--bleed .split-view__half:nth-child(1) {
.split-view__half:nth-child(2) {
grid-column: bleed !important; grid-column: bleed !important;
} }
&.split-view--bleed-top-mobile--screen .split-view__half:nth-child(1) {
grid-column: screen !important;
} }
&.split-view--bleed-left--bleed { &.split-view--bleed-bottom-mobile--none .split-view__half:nth-child(2) {
.split-view__half:nth-child(1) { grid-column: content !important;
}
&.split-view--bleed-bottom-mobile--bleed .split-view__half:nth-child(2) {
grid-column: bleed !important; grid-column: bleed !important;
} }
}
&.split-view--bleed-right--screen { &.split-view--bleed-bottom-mobile--screen .split-view__half:nth-child(2) {
.split-view__half:nth-child(2) {
grid-column: screen !important; grid-column: screen !important;
} }
}
&.split-view--bleed-left--screen { &.split-view--swap-on-mobile {
.split-view__half:nth-child(1) { .split-view__half:nth-child(1) {
grid-column: screen !important; grid-row: 2/3;
}
.split-view__half:nth-child(2) {
grid-row: 1/2;
} }
} }
} }

27
src/back/jdd-components/split-view/split-view.jdd.tsx
View File

@ -13,8 +13,19 @@ const component_arguments = {
bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue( bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]).setDefaultValue(
"none" "none"
), ),
bleed_top_mobile: new ComponentArguments.Enum([
"none",
"bleed",
"screen",
]).setDefaultValue("none"),
bleed_bottom_mobile: new ComponentArguments.Enum([
"none",
"bleed",
"screen",
]).setDefaultValue("none"),
column_gap: new ComponentArguments.Boolean(), column_gap: new ComponentArguments.Boolean(),
row_gap: new ComponentArguments.Boolean(), row_gap: new ComponentArguments.Boolean(),
swap_on_mobile: new ComponentArguments.Boolean(),
component1: new ComponentArguments.NestedComponent(), component1: new ComponentArguments.NestedComponent(),
component2: new ComponentArguments.NestedComponent(), component2: new ComponentArguments.NestedComponent(),
} as const; } as const;
@ -36,7 +47,17 @@ export class SplitView extends Component<typeof component_arguments> {
} }
async toHTML({ async toHTML({
args: { component1, component2, bleed_left, bleed_right, column_gap, row_gap }, args: {
component1,
component2,
bleed_left,
bleed_right,
bleed_top_mobile,
bleed_bottom_mobile,
column_gap,
row_gap,
swap_on_mobile,
},
classes, classes,
jdd_context, jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> { }: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@ -46,9 +67,11 @@ export class SplitView extends Component<typeof component_arguments> {
"split-view", "split-view",
`split-view--bleed-left--${bleed_left}`, `split-view--bleed-left--${bleed_left}`,
`split-view--bleed-right--${bleed_right}`, `split-view--bleed-right--${bleed_right}`,
`split-view--bleed-top-mobile--${bleed_top_mobile}`,
`split-view--bleed-bottom-mobile--${bleed_bottom_mobile}`,
`split-view--with${column_gap ? "" : "out"}-column-gap`, `split-view--with${column_gap ? "" : "out"}-column-gap`,
`split-view--with${row_gap ? "" : "out"}-row-gap`, `split-view--with${row_gap ? "" : "out"}-row-gap`,
{ "split-view--swap-on-mobile": swap_on_mobile },
...classes, ...classes,
]} ]}
> >