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

fix(post-form): commit photo thumbnail grid + overlay styling

Browse Source 
Renders FilePond items as a 3-up square-thumbnail grid on create+edit,
disables native image-drag so FilePond owns reorder, and hides the
file-info overlay on already-uploaded (idle) items. This is the styling
QA'd and approved on the worktree dev server; it was previously left
uncommitted (mis-tagged as unrelated WIP in earlier handovers).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Mpdu3Dt1iVoozHwAMyjrbn
This commit is contained in:
m038
2026-07-07 23:44:20 +02:00
co-authored by Claude Opus 4.8
parent 7f6bf9e3f3
commit 034db29e66
2 changed files with 41 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css-compiled/post-form.css
+1 -1
View File
File diff suppressed because one or more lines are too long
themes/intotheeast/js/src/post-form.css
+40
View File
@@ -263,6 +263,46 @@
pointer-events: none;
}
/* ── Photo thumbnail grid (edit + create) ─────────────────────────────────
Render FilePond items as a compact square-thumbnail grid so existing photos
(loaded on edit) and new uploads are visible and reorderable without the
full-width, overflowing vertical list the default produced. Setting a fixed
item width is FilePond's supported way to switch its layout engine to a grid. */
.filepond--list.filepond--list {
/* FilePond positions items absolutely; the wrapper needs a little inset so
the 3-up grid doesn't butt against the drop-zone edge. */
margin: 0.25rem;
}
.filepond--item {
width: calc(33.333% - 0.5rem);
}
/* Square thumbnails regardless of source aspect ratio. */
.filepond--item .filepond--panel-root,
.filepond--item .filepond--image-preview-wrapper { border-radius: var(--radius-sm); }
/* Native image dragging hijacked FilePond's reorder: dragging a thumbnail
started a browser ghost-image / page scroll instead of moving the item.
Disable user-drag on the preview so FilePond owns the gesture. */
.filepond--image-preview,
.filepond--image-preview-wrapper,
.filepond--image-clip,
.filepond--image-preview canvas,
.filepond--image-bitmap,
.filepond--file img {
-webkit-user-drag: none;
-khtml-user-drag: none;
user-drag: none;
}
/* Existing photos loaded for editing sit in FilePond's 'idle' state (they are
already on the server, never uploaded). Give them the same clean look as a
completed upload — hide the filename/size overlay so the grid reads as photos,
not a list of filenames. */
.filepond--item[data-filepond-item-state="idle"] .filepond--file-info,
.filepond--item[data-filepond-item-state="idle"] .filepond--file-status {
opacity: 0;
}
/* Issue #3: photo section auto-collapses to a summary bar after upload — same
<details> affordance as "More options" above. */
.photos-collapse {