fix(post-form): load FilePond CSS in head + real success confirmation
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:
@@ -457,11 +457,54 @@ function initDraft() {
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Post-success confirmation (issue: message was off-screen) ─────
|
||||
* After a successful submit the page re-renders with Grav's success notice at
|
||||
* the top of a long, reset form — easy to miss on mobile. Scroll it into view
|
||||
* and add a "View your journal" / "Post another" CTA the owner can act on.
|
||||
*/
|
||||
function initSuccessState() {
|
||||
var wrap = document.querySelector('.post-form-wrap');
|
||||
var notice = document.querySelector('.post-form-wrap .notices.success, .post-form-wrap .notices.green');
|
||||
if (!wrap || !notice) return;
|
||||
|
||||
var panel = document.createElement('div');
|
||||
panel.className = 'post-success';
|
||||
|
||||
var title = document.createElement('p');
|
||||
title.className = 'post-success__title';
|
||||
title.textContent = '✓ Saved to your journal.';
|
||||
panel.appendChild(title);
|
||||
|
||||
var actions = document.createElement('div');
|
||||
actions.className = 'post-success__actions';
|
||||
|
||||
var tripUrl = wrap.getAttribute('data-trip-url');
|
||||
if (tripUrl) {
|
||||
var view = document.createElement('a');
|
||||
view.className = 'post-success__view';
|
||||
view.href = tripUrl;
|
||||
view.textContent = 'View your journal →';
|
||||
actions.appendChild(view);
|
||||
}
|
||||
|
||||
var again = document.createElement('a');
|
||||
again.className = 'post-success__again';
|
||||
again.href = window.location.pathname; // reload /post fresh
|
||||
again.textContent = 'Post another';
|
||||
actions.appendChild(again);
|
||||
|
||||
panel.appendChild(actions);
|
||||
notice.parentNode.insertBefore(panel, notice.nextSibling);
|
||||
|
||||
notice.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
/* ── Boot ────────────────────────────────────────────────── */
|
||||
function boot() {
|
||||
// Exposed for U6 draft restore and the Playwright specs; null when this
|
||||
// bundle loads on a page without the content field.
|
||||
window.postFormEditor = initEditor();
|
||||
initSuccessState();
|
||||
// Restore before disclosure/geo so their on-load checks (auto-open,
|
||||
// weather-button enable) see the restored values.
|
||||
initDraft();
|
||||
|
||||
Reference in New Issue
Block a user