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/templates/post-form.html.twig
+7 -1
View File
@@ -1,12 +1,18 @@
{% extends 'default.html.twig' %}
{% block head_assets %}
{# FilePond's own CSS must load from the <head>. The filepond field registers
it via assets.addCss() during body rendering, which is too late for the
theme's head-only {{ assets.css() }} — so the widget renders unstyled
(giant overlapping tiles) unless we add it here. #}
{% do assets.addCss('plugin://form/assets/filepond/filepond.min.css') %}
{% do assets.addCss('plugin://form/assets/filepond/filepond-plugin-image-preview.min.css') %}
{% do assets.addCss('theme://css-compiled/post-form.css') %}
<script type="module" src="{{ url('theme://js/post/post-form.js') }}"></script>
{% endblock %}
{% block content %}
<div class="post-form-wrap">
<div class="post-form-wrap" data-trip-url="{{ config.site.active_trip }}">
<h1>New Entry</h1>
{% include 'forms/form.html.twig' ignore missing %}