From 8935bcd3621abccfb0d3f6d55e7c2c4c52776ae3 Mon Sep 17 00:00:00 2001 From: Kuba Orlik Date: Mon, 10 Aug 2026 16:05:27 +0200 Subject: [PATCH] Upgrade spacing options in split-view --- .../background-wrapper/background-wrapper.css | 5 ++ .../background-wrapper.jdd.tsx | 4 +- .../jdd-components/split-view/split-view.css | 74 ++++++++++++++++++- .../split-view/split-view.jdd.tsx | 18 ++++- src/main.css | 7 +- 5 files changed, 101 insertions(+), 7 deletions(-) diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.css b/src/back/jdd-components/background-wrapper/background-wrapper.css index 4f48432..accd43a 100644 --- a/src/back/jdd-components/background-wrapper/background-wrapper.css +++ b/src/back/jdd-components/background-wrapper/background-wrapper.css @@ -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; } diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx index bbca721..2e68af2 100644 --- a/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx +++ b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx @@ -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 { } 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): Promise { @@ -40,6 +41,7 @@ export class BackgroundWrapper extends Component { "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, diff --git a/src/back/jdd-components/split-view/split-view.css b/src/back/jdd-components/split-view/split-view.css index 59cf8cc..f5c2a18 100644 --- a/src/back/jdd-components/split-view/split-view.css +++ b/src/back/jdd-components/split-view/split-view.css @@ -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; + } } diff --git a/src/back/jdd-components/split-view/split-view.jdd.tsx b/src/back/jdd-components/split-view/split-view.jdd.tsx index 1358554..bd36f62 100644 --- a/src/back/jdd-components/split-view/split-view.jdd.tsx +++ b/src/back/jdd-components/split-view/split-view.jdd.tsx @@ -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 { } async toHTML({ - args: { component1, component2 }, + args: { component1, component2, bleed_left, bleed_right, column_gap, row_gap }, classes, jdd_context, }: ComponentToHTMLArgs): Promise { return ( -
+
{component1?.render(jdd_context)}
{component2?.render(jdd_context)}
diff --git a/src/main.css b/src/main.css index d5f85bc..4303d19 100644 --- a/src/main.css +++ b/src/main.css @@ -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(