m038andClaude Opus 4.8
c4228e9027
Render on each journal card, gated by owner_can_edit (R1/R3/R5/R6, KTD8): - Draft badge (amber) when the entry is unpublished. - Edit link -> /post?edit=<route>&return=<feed-url> (D5: a save from the home feed returns to home, not always the trip page); feed_return_url threaded from trip.html.twig/home.html.twig (page.url). - Delete control with inline Cancel/Confirm button-swap (no browser dialog), data-entry-route carried for U6's delete JS, plus an aria-live status slot. - 44x44px min tap targets (D8); titlerow wraps on narrow phones. Verified on the container: anon sees no controls/badge; owner sees Edit+Delete on all 13 cards with a Draft badge on the unpublished one; a non-owner authenticated session (testrunner vs owner mischa) sees none and no drafts (V5). Browser screenshot verification unavailable (no local Playwright); did a code-level layout review instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01H1FrCYNq6RXdGYbn5PFrhM
71 lines
4.2 KiB
Twig
71 lines
4.2 KiB
Twig
{% include 'partials/weather-icons.html.twig' %}
|
|
{% set owner_can_edit = owner_can_edit ?? false %}
|
|
{% set feed_return_url = feed_return_url ?? trip_page.url ?? '/' %}
|
|
<article class="journal-post{% if not entry.published %} is-draft{% endif %}" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}"{% if owner_can_edit %} data-entry-route="{{ entry.route }}"{% endif %}>
|
|
<header class="journal-post-header">
|
|
<div class="journal-post-titlerow">
|
|
<h2 class="journal-post-title">{{ entry.title }}{% if not entry.published %} <span class="journal-draft-badge">Draft</span>{% endif %}</h2>
|
|
{% if owner_can_edit %}
|
|
<div class="journal-post-actions" data-entry-route="{{ entry.route }}">
|
|
<a class="entry-action entry-action--edit" href="/post?edit={{ entry.route|url_encode }}&return={{ feed_return_url|url_encode }}">Edit</a>
|
|
<button class="entry-action entry-action--delete" type="button" data-delete-start>Delete</button>
|
|
<span class="entry-delete-confirm" hidden>
|
|
<button class="entry-action entry-action--cancel" type="button" data-delete-cancel>Cancel</button>
|
|
<button class="entry-action entry-action--confirm" type="button" data-delete-confirm>Confirm delete</button>
|
|
</span>
|
|
<span class="entry-delete-msg" role="status" aria-live="polite"></span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<p class="journal-post-meta">
|
|
<a class="journal-post-permalink" href="{{ entry.url }}">
|
|
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
|
</a>
|
|
{% if entry.header.location_city or entry.header.location_country %}
|
|
<span class="journal-post-location">
|
|
· <svg width="11" height="13" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true"><path d="M6 0C3.24 0 1 2.24 1 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 6.75A1.75 1.75 0 1 1 6 3.25a1.75 1.75 0 0 1 0 3.5z"/></svg>
|
|
{%- set _loc = [] -%}
|
|
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
|
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
|
{{ _loc|join(', ') }}
|
|
</span>
|
|
{% endif %}
|
|
{% if entry.header.weather_desc %}
|
|
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc|lower]|default('')|raw }} {{ entry.header.weather_desc }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</header>
|
|
|
|
{% set images = entry.media.images %}
|
|
{% if images|length > 0 %}
|
|
{% set firstImg = images|first %}
|
|
{% set wrapRatio = firstImg.height > firstImg.width ? '4 / 5' : '4 / 3' %}
|
|
<div class="journal-photo-wrap" style="aspect-ratio: {{ wrapRatio }}">
|
|
<div class="journal-photo-strip pswp-gallery" id="gallery-{{ entry.slug }}" data-slides="{{ images|length }}">
|
|
{% for img in images %}
|
|
<a class="journal-photo-slide"
|
|
href="{{ img.url }}"
|
|
data-pswp-width="{{ img.width }}"
|
|
data-pswp-height="{{ img.height }}"
|
|
style="--thumb: url('{{ img.cropResize(900, 675).url }}')"
|
|
target="_blank">
|
|
<img src="{{ img.cropResize(900, 675).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% if images|length > 1 %}
|
|
<div class="journal-photo-dots" aria-hidden="true">
|
|
{% for img in images %}
|
|
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
<button class="journal-photo-expand" aria-label="View full size">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
|
</article>
|