From c4228e902775e900e2ae4d898eb3527c9f299ec9 Mon Sep 17 00:00:00 2001 From: Mischa Date: Sat, 4 Jul 2026 23:48:57 +0200 Subject: [PATCH] =?UTF-8?q?feat(post-form):=20U4=20=E2=80=94=20Draft=20bad?= =?UTF-8?q?ge=20+=20owner=20Edit/Delete=20controls=20on=20cards?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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=&return= (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 Claude-Session: https://claude.ai/code/session_01H1FrCYNq6RXdGYbn5PFrhM --- themes/intotheeast/css/style.css | 81 +++++++++++++++++++ themes/intotheeast/templates/home.html.twig | 3 +- .../partials/entry-journal.html.twig | 19 ++++- themes/intotheeast/templates/trip.html.twig | 3 +- 4 files changed, 102 insertions(+), 4 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 71cbf7a..7174f9b 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -269,6 +269,87 @@ body::after { gap: var(--space-1); } +/* ── Owner card controls (U4): Draft badge + Edit/Delete ─────────────────── */ +.journal-post-titlerow { + display: flex; + align-items: flex-start; + justify-content: space-between; + flex-wrap: wrap; /* phone-first: actions wrap below a long title */ + gap: var(--space-2) var(--space-3); + margin-bottom: var(--space-2); +} +.journal-post-titlerow .journal-post-title { margin-bottom: 0; } + +.journal-draft-badge { + display: inline-block; + vertical-align: middle; + margin-left: var(--space-2); + font-family: var(--font-sans); + font-size: 0.6875rem; + font-weight: 700; + letter-spacing: 0.09em; + text-transform: uppercase; + color: #E0A458; /* warm amber — draft/unpublished */ + border: 1px solid #E0A458; + border-radius: var(--radius-sm); + padding: 0.1em 0.5em; + line-height: 1.5; + white-space: nowrap; +} + +.journal-post-actions { + display: flex; + align-items: center; + gap: var(--space-2); + flex-wrap: wrap; + flex-shrink: 0; +} +.entry-action { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 44px; /* D8 — phone-first tap target */ + min-width: 44px; + padding: 0 var(--space-3); + font-family: var(--font-sans); + font-size: var(--text-xs); + font-weight: 600; + letter-spacing: 0.04em; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + background: transparent; + color: var(--color-ink-2); + text-decoration: none; + cursor: pointer; + transition: background .15s, color .15s, border-color .15s; +} +.entry-action:hover, +.entry-action:focus-visible { + border-color: var(--color-accent); + color: var(--color-accent); + outline: none; +} +.entry-action--confirm { + color: #E5786A; /* soft red — destructive confirm */ + border-color: #E5786A; +} +.entry-action--confirm:hover, +.entry-action--confirm:focus-visible { + background: #E5786A; + color: var(--color-ink-inverse); +} +.entry-delete-confirm { + display: inline-flex; + align-items: center; + gap: var(--space-2); +} +.entry-delete-confirm[hidden] { display: none; } +.entry-delete-msg { + font-size: var(--text-xs); + color: #E5786A; +} +.entry-delete-msg:empty { display: none; } + .journal-photo-wrap { position: relative; margin-bottom: var(--space-5); diff --git a/themes/intotheeast/templates/home.html.twig b/themes/intotheeast/templates/home.html.twig index 1f73e59..5c34b50 100644 --- a/themes/intotheeast/templates/home.html.twig +++ b/themes/intotheeast/templates/home.html.twig @@ -97,7 +97,8 @@ gpx_urls: home_gpx_urls, gps_points: gps_points, show_sort: false, - owner_can_edit: owner_can_edit + owner_can_edit: owner_can_edit, + feed_return_url: page.url } only %} {% endif %} diff --git a/themes/intotheeast/templates/partials/entry-journal.html.twig b/themes/intotheeast/templates/partials/entry-journal.html.twig index 7e9a01a..f72f842 100644 --- a/themes/intotheeast/templates/partials/entry-journal.html.twig +++ b/themes/intotheeast/templates/partials/entry-journal.html.twig @@ -1,7 +1,22 @@ {% include 'partials/weather-icons.html.twig' %} -
+{% set owner_can_edit = owner_can_edit ?? false %} +{% set feed_return_url = feed_return_url ?? trip_page.url ?? '/' %} +
-

{{ entry.title }}

+
+

{{ entry.title }}{% if not entry.published %} Draft{% endif %}

+ {% if owner_can_edit %} +
+ Edit + + + +
+ {% endif %} +

diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index d6e83b3..6e24654 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -93,7 +93,8 @@ gpx_urls: gpx_urls, gps_points: gps_points, show_sort: true, - owner_can_edit: owner_can_edit + owner_can_edit: owner_can_edit, + feed_return_url: page.url } only %}