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

Upgrade spacing options in split-view

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 16:05:27 +02:00
parent 7cdbff8112
commit 8935bcd362
5 changed files with 101 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/back/jdd-components/background-wrapper/background-wrapper.css
View File

@ -1,4 +1,5 @@
.background-wrapper {
width: 100%;
grid-column: screen;
display: grid;
grid-template-columns: subgrid;
@ -10,6 +11,10 @@
padding: 0;
}
&.background-wrapper--big-padding-yes {
padding: 64px;
}
& > * {
grid-column: content;
}

4
src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx
View File

@ -12,6 +12,7 @@ const component_arguments = {
variant: new ComponentArguments.Enum(background_variants),
grow_to_screen_height: new ComponentArguments.Boolean(),
padding: new ComponentArguments.Boolean(),
big_padding: new ComponentArguments.Boolean(),
margin: new ComponentArguments.Boolean(),
content: new ComponentArguments.NestedComponent(),
} as const;
@ -30,7 +31,7 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
}
async toHTML({
args: { variant, content, grow_to_screen_height, padding, margin },
args: { variant, content, grow_to_screen_height, padding, margin, big_padding },
classes,
jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
@ -40,6 +41,7 @@ export class BackgroundWrapper extends Component<typeof component_arguments> {
"background-wrapper",
`background-wrapper--${variant}`,
`background-wrapper--padding-${padding ? "yes" : "no"}`,
`background-wrapper--big-padding-${big_padding ? "yes" : "no"}`,
{
"background-wrapper--grow-height": grow_to_screen_height,
"jdd-no-gap": !margin,

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

@ -1,6 +1,5 @@
.split-view {
width: 100%;
border: 1px solid red;
display: grid;
grid-template-columns: subgrid;
@ -20,8 +19,79 @@
align-items: center;
justify-content: center;
&:nth-child(1) {
grid-column-start: left-half-start;
grid-column-end: left-half-end;
}
&:nth-child(2) {
grid-column: right-half;
grid-column-start: right-half-start;
grid-column-end: right-half-end;
}
}
&.split-view--without-column-gap {
.split-view__half {
&:nth-child(1) {
grid-column-end: center;
}
&:nth-child(2) {
grid-column-start: center;
}
}
}
&.split-view--bleed--bleed {
grid-column: bleed;
.split-view__half {
&:nth-child(1) {
grid-column-start: bleed-start;
}
&:nth-child(2) {
grid-column-end: bleed-end;
}
}
}
&.split-view--bleed-left--screen {
grid-column-start: screen-start;
.split-view__half {
&:nth-child(1) {
grid-column-start: screen-start;
}
}
}
&.split-view--bleed-right--screen {
grid-column-end: screen-end;
.split-view__half {
&:nth-child(2) {
grid-column-end: screen-end;
}
}
}
&.split-view--bleed-left--bleed {
grid-column-start: bleed-start;
.split-view__half {
&:nth-child(1) {
grid-column-start: bleed-start;
}
}
}
&.split-view--bleed-right--bleed {
grid-column-end: bleed-end;
.split-view__half {
&:nth-child(2) {
grid-column-end: bleed-end;
}
}
}
&.split-view--without-row-gap {
row-gap: 0;
}
}

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

@ -7,6 +7,10 @@ import type {
import { Component, ComponentArguments } from "@sealcode/jdd";
const component_arguments = {
bleed_left: new ComponentArguments.Enum(["none", "bleed", "screen"]),
bleed_right: new ComponentArguments.Enum(["none", "bleed", "screen"]),
column_gap: new ComponentArguments.Boolean(),
row_gap: new ComponentArguments.Boolean(),
component1: new ComponentArguments.NestedComponent(),
component2: new ComponentArguments.NestedComponent(),
} as const;
@ -28,12 +32,22 @@ export class SplitView extends Component<typeof component_arguments> {
}
async toHTML({
args: { component1, component2 },
args: { component1, component2, bleed_left, bleed_right, column_gap, row_gap },
classes,
jdd_context,
}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
return (
<div class={["split-view", ...classes]}>
<div
class={[
"split-view",
`split-view--bleed-left--${bleed_left}`,
`split-view--bleed-right--${bleed_right}`,
`split-view--with${column_gap ? "" : "out"}-column-gap`,
`split-view--with${row_gap ? "" : "out"}-row-gap`,
...classes,
]}
>
<div class="split-view__half">{component1?.render(jdd_context)}</div>
<div class="split-view__half">{component2?.render(jdd_context)}</div>
</div>

7
src/main.css
View File

@ -23,7 +23,10 @@ body {
[totalbleed-start] 1fr [bleed-start] var(--bleed-outer-width)
[main-column-start] var(--column-padding)
[content-start left-half-start] var(--half-width)
[left-half-end] var(--margin-between-halves) [right-half-start] var(--half-width)
[left-half-end] calc(var(--margin-between-halves) / 2) [center] calc(
var(--margin-between-halves) / 2
)
[right-half-start] var(--half-width)
[content-end right-half-end] var(--column-padding)
[main-column-end] var(--bleed-outer-width)
[bleed-end] 1fr [totalbleed-end] var(--screen-padding)
@ -35,7 +38,7 @@ body {
--column-padding: 16px;
--target-column-width: 800px;
--screen-padding: 16px;
--margin-between-halves: 8px;
--margin-between-halves: 32px;
--total-horizontal-spacing: 2 * var(--screen-padding) - 2 * var(--column-padding) -
var(--margin-between-halves);
--half-width: min(