m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(post-form): dark-theme the photo widget + drag-to-reorder that sticks

Browse Source 
Styling: repaint FilePond's default light drop zone/thumbnails/actions with
the Field Notes dark tokens so the picker matches the site palette.

Reordering: enable FilePond drag-reorder (allowReorder, itemInsertLocation
'after'). FilePond does NOT re-sequence its submitted data[photos][] inputs on
reorder, so post-form.js sends the visual order as a top-level `photo_order`
POST key on submit. cache-on-save reads it from $_POST (after add-page-by-form
copies the files, priority -100) and renames them photo-1..N in that order —
which the entry honours since it lists media by filename and treats the first
as hero. The order key is top-level (not data[...]), so it never lands in the
entry frontmatter. Best-effort + self-idempotent: locates the new entry folder
by the uploaded filenames and no-ops if they're already renamed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
m038
2026-07-04 20:25:56 +02:00
co-authored by Claude Opus 4.8
parent 87da3e4b5b
commit d17d1256ba
5 changed files with 237 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/js/src/post-form.css
+27
View File
@@ -195,6 +195,33 @@
/* Hide FilePond's "Powered by PQINA" credit. */
.filepond--credits { display: none !important; }
/* Field Notes dark theme for the FilePond widget — the default is a light/cream
panel that clashes with the site's warm near-black palette. Repaint the drop
zone, thumbnails and actions with the design tokens. */
.filepond--root { font-family: var(--font-ui); font-size: var(--text-base); }
.filepond--panel-root {
background-color: var(--color-canvas);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.filepond--drop-label,
.filepond--drop-label label { color: var(--color-ink-muted); }
.filepond--label-action {
color: var(--color-accent);
text-decoration-color: var(--color-accent);
}
.filepond--item-panel {
background-color: var(--color-surface-raised);
border-radius: var(--radius-md);
}
.filepond--drip-blob { background-color: var(--color-accent); }
.filepond--file { color: var(--color-ink); }
.filepond--file-action-button {
color: var(--color-ink);
background-color: rgba(0, 0, 0, 0.45);
}
.filepond--file-action-button:hover { background-color: rgba(0, 0, 0, 0.65); }
/* Issue #2: FilePond's completed thumbnail carries a murky gradient tint + the
filename overlay, which reads as "something's wrong". Strip those overlays
and show a single clean green ✓ badge so a finished upload is unambiguous.