m038
d3a520426a
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.
29 lines
1.4 KiB
Twig
29 lines
1.4 KiB
Twig
{% 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" data-trip-url="{{ config.site.active_trip }}">
|
|
<h1>New Entry</h1>
|
|
{% include 'forms/form.html.twig' ignore missing %}
|
|
|
|
<div class="form-action-row">
|
|
<button type="button" id="get-location" class="btn-action">📍 Get Location</button>
|
|
<button type="button" id="get-weather" class="btn-action" disabled>🌤 Get Weather</button>
|
|
</div>
|
|
<p id="location-status" class="form-status" role="status"></p>
|
|
<p id="weather-status" class="form-status" role="status"></p>
|
|
</div>
|
|
{# Get Location / Get Weather, disclosure, and validation all live in the
|
|
page-scoped bundle (js/src/post-form.js), loaded via head_assets above. #}
|
|
{% endblock %}
|