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

fix(post-form): load FilePond CSS in head + real success confirmation

Browse Source 
Three field-reported bugs, all root-caused on the isolated test server:

1+2. FilePond's stylesheet never loaded — the filepond field registers it via
   assets.addCss() during body render, too late for the theme's head-only
   {{ assets.css() }}. Photo tiles rendered as giant unstyled boxes that
   stacked and overlapped the rest of the form (Get Location/Weather, Submit),
   making it unusable and looking like upload errors. Load filepond.min.css +
   image-preview CSS in the head_assets block; hide the PQINA credit.

3. The success notice rendered at the top of a long, reset form (off-screen
   after submitting from the bottom) and .notices was unstyled on the dark
   theme. Style .notices; on load, scroll the confirmation into view and inject
   a 'View your journal' link (to site.active_trip) + 'Post another' CTA.

Verified in a browser: 3 photos render compact without overlap; post-submit
shows the confirmation + working view link.
This commit is contained in:
m038
2026-07-04 19:23:02 +02:00
parent c70e96879b
commit d3a520426a
5 changed files with 110 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/js/src/post-form.css
+56 -13
View File
@@ -132,25 +132,68 @@
.btn-action[disabled] { opacity: 0.5; cursor: not-allowed; }
@keyframes post-spin { to { transform: rotate(360deg); } }
/* Grav form save/validation messages (success + error from the server) */
.post-form-wrap .form-messages { margin-bottom: var(--space-5); }
.post-form-wrap .form-message {
padding: 0.875rem 1rem;
/* Grav renders form status as <div class="notices success|error green|red">.
The theme doesn't style .notices, so on the dark background it was nearly
invisible — style it prominently here. */
.post-form-wrap .notices {
padding: 1rem 1.1rem;
border-radius: var(--radius-md);
font-size: var(--text-sm);
margin-bottom: var(--space-2);
}
.post-form-wrap .form-message.notice,
.post-form-wrap .form-message.error {
background: var(--color-accent-light);
font-size: var(--text-base);
margin: 0 0 var(--space-5);
background: var(--color-canvas);
color: var(--color-ink);
border: 1px solid var(--color-error);
border-left: 4px solid var(--color-accent);
}
.post-form-wrap .form-message.success {
.post-form-wrap .notices p { margin: 0; }
.post-form-wrap .notices.error,
.post-form-wrap .notices.red { border-left-color: var(--color-error); }
.post-form-wrap .notices.success,
.post-form-wrap .notices.green { border-left-color: var(--color-accent); }
/* Post-success confirmation CTA (injected by post-form.js). */
.post-success {
margin: 0 0 var(--space-5);
padding: 1.1rem;
border-radius: var(--radius-md);
background: var(--color-accent-light);
color: var(--color-ink);
border: 1px solid var(--color-accent);
}
.post-success__title {
font-family: var(--font-ui);
font-size: var(--text-md);
font-weight: 600;
color: var(--color-ink);
margin: 0 0 var(--space-3);
}
.post-success__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.post-success__view {
flex: 1;
min-width: 140px;
text-align: center;
padding: 0.8rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
background: var(--color-accent);
color: var(--color-accent-on);
font-weight: 600;
text-decoration: none;
}
.post-success__again {
flex: 1;
min-width: 140px;
text-align: center;
padding: 0.8rem 1rem;
min-height: 44px;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-ink);
border: 1px solid var(--color-border);
font-weight: 600;
text-decoration: none;
}
/* Hide FilePond's "Powered by PQINA" credit. */
.filepond--credits { display: none !important; }
/* ── EasyMDE — Field Notes dark theme (U5) ─────────────────── */
.EasyMDEContainer .CodeMirror {