feat(post-form): photos-first order, auto-collapsing photo summary, success-only view

- Reorder blueprint to Photos → Title → Content; drop title autofocus so the
  picker leads (it anchors what you write).
- After upload the photo section auto-collapses to a live summary bar
  ("✓ N photos ready — tap to review") and re-expands on tap; the field's
  own .form-label is hidden so the <summary> is the sole header. Trailing
  refreshes settle the summary past FilePond's event/DOM timing gap.
- Replace FilePond's murky completed-thumbnail overlay with a clean green ✓
  badge (remove action left intact).
- On a successful post, hide the reset form + location/weather controls so
  only the "✓ Saved" confirmation + View-journal CTA remain.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-04 19:46:49 +02:00
co-authored by Claude Opus 4.8
parent d3a520426a
commit 87da3e4b5b
5 changed files with 205 additions and 56 deletions
+17 -15
View File
@@ -19,11 +19,27 @@ form:
action: /post
enctype: multipart/form-data
fields:
# Photos come first — they anchor what you'll write (Photos → Title →
# Content). After upload post-form.js auto-collapses this into a summary
# bar so the thumbnails don't crowd the writing area.
-
name: photos
label: Photos (max 4)
# Grav-managed filepond field. post-form.js hooks its beforeAddFile
# to convert HEIC->JPEG in the browser, then re-adds the JPEG via the
# public pond.addFile() API — FilePond keeps ownership of the upload
# and page-attach contract (U4).
type: filepond
multiple: true
destination: '@self'
limit: 4
accept:
- 'image/*'
-
name: title
label: Title
type: text
autofocus: true
validate:
required: true
@@ -44,20 +60,6 @@ form:
validate:
required: true
-
name: photos
label: Photos (max 4)
# Grav-managed filepond field. post-form.js hooks its beforeAddFile
# to convert HEIC->JPEG in the browser, then re-adds the JPEG via the
# public pond.addFile() API — FilePond keeps ownership of the upload
# and page-attach contract (U4).
type: filepond
multiple: true
destination: '@self'
limit: 4
accept:
- 'image/*'
-
name: lat
label: Latitude