fofos/fofos-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sections and Footer get a Gap, three fields across

Browse Source 
The room between a band's columns: gap-8 in a two-column section, gap-x-24
gap-y-10 in the footer. Both were written into the template that drew them.

The canvas now SKIPS a utility nothing has chosen instead of stripping it. The
old rule lied twice — a section's own padding vanished while the panel was open,
and a band with no chosen gap lost the site's default.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-09-01 08:15:01 +01:00
co-authored by Claude Opus 5
parent 33f2ea4663
commit fc3b9cca4a
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/canvas.ts
+16 -5
View File
@@ -599,14 +599,13 @@ export function paintMeasure(document: Document): () => void {
* header, `py-*` from a band. Everything else on the element survives, which is what makes it safe to
* do this to a `<header>` carrying a border and a background as well.
*
* The one exception is a SECTION, whose own padding is also a `px-*` on the marked element — so while
* the panel is open its padding reads as the site gutter. Harmless on the layout page, whose bands have
* none, and that page is the only one this runs against.
* A target with nothing chosen is skipped entirely — see the note in the loop. That is what keeps a
* section's own padding, and the site's default gap, from disappearing while the panel is open.
*/
export type SpacingDraft = {
header?: { paddingX?: Steps; marginBottom?: Steps };
sections?: { paddingX?: Steps; paddingY?: Steps };
footer?: { paddingX?: Steps; marginTop?: Steps };
sections?: { paddingX?: Steps; paddingY?: Steps; gap?: Steps };
footer?: { paddingX?: Steps; marginTop?: Steps; gap?: Steps };
};
export type Steps = Partial<Record<'base' | 'md' | 'lg', number>>;
@@ -630,6 +629,8 @@ const TARGETS = [
{ selector: '[data-gutter="footer"]', utility: 'px', read: (s: SpacingDraft) => s.footer?.paddingX },
{ selector: '[data-space="header"]', utility: 'mb', read: (s: SpacingDraft) => s.header?.marginBottom },
{ selector: '[data-space="footer"]', utility: 'mt', read: (s: SpacingDraft) => s.footer?.marginTop },
{ selector: '[data-gap="sections"]', utility: 'gap', read: (s: SpacingDraft) => s.sections?.gap },
{ selector: '[data-gap="footer"]', utility: 'gap', read: (s: SpacingDraft) => s.footer?.gap },
] as const;
export function applySpacing(document: Document, spacing: SpacingDraft): () => void {
@@ -639,6 +640,16 @@ export function applySpacing(document: Document, spacing: SpacingDraft): () => v
const pattern = new RegExp(`^(?:md:|lg:)?${target.utility}-\\d+$`);
const classes = scaleClasses(target.utility, target.read(spacing)).split(/\s+/).filter(Boolean);
/*
Nothing chosen means DON'T TOUCH IT, rather than strip it.
Stripping was the old rule and it lied twice: a section's own `px-*` vanished while the panel was
open, and a band with no chosen gap lost the site's default `gap-8` — so the preview showed a
layout the page would never render. What the panel is drafting is an override, and an override
that has not been set is not an instruction to remove anything.
*/
if (!classes.length) continue;
for (const element of document.querySelectorAll<HTMLElement>(target.selector)) {
touched.push([element, element.className]);
const kept = element.className.split(/\s+/).filter((name) => name && !pattern.test(name));