feat(trip): one-liner, description & retina cover on trip list + page
Give trips an optional one-liner (header.tagline) and description (markdown content), surface them where they help, and fix the soft cover image — all editable from admin. - U1: header.cover_image blueprint field → pagemediaselect media picker. - U2: new macros/cover.html.twig — single source for cover resolution (author-selected → first journal image → none; missing file falls back) and retina rendering (1x/2x cropResize + srcset). Merged resolve+render into one macro since Twig macros can't return a Medium object. - U3: trip-list card renders the one-liner (when set) and the retina cover. - U4: trip-page in-column header gains the one-liner, an expandable description, and a thin banner strip — gated behind a trip_header_extras partial flag (default off) so the shared home active-trip view is unchanged (R12/KTD4). - U5: styles for the card/header one-liner, collapsible description (max-height preview, not line-clamp, so it holds across paragraphs) and the banner, with a mobile banner-height reduction. Covers R1–R15. Verified with new Playwright specs + full trip/home/maps regression against an isolated worktree dev server. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RDS6t8wcpbwKvvrxykVQ5K
This commit is contained in:
@@ -950,6 +950,66 @@ body::after {
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
/* ── Trip page header extras: one-liner, description, banner ──────────────────── */
|
||||
|
||||
.home-trip-tagline {
|
||||
font-size: var(--text-md);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-ink-2);
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
|
||||
.trip-header-desc {
|
||||
margin: var(--space-3) 0 var(--space-4);
|
||||
}
|
||||
|
||||
.trip-header-desc-body {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-normal);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
.trip-header-desc-body > :first-child { margin-top: 0; }
|
||||
.trip-header-desc-body > :last-child { margin-bottom: 0; }
|
||||
.trip-header-desc-body p { margin: 0 0 var(--space-2); }
|
||||
|
||||
/* Collapsed preview ≈3 lines. Uses max-height (not -webkit-line-clamp) so it
|
||||
holds across the multiple <p> that markdown content renders. */
|
||||
.trip-header-desc[data-collapsed="true"] .trip-header-desc-body {
|
||||
max-height: 4.8em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trip-header-desc-toggle {
|
||||
display: inline-block;
|
||||
margin-top: var(--space-1);
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--color-accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.trip-header-desc-toggle:hover { color: var(--color-accent-hover); }
|
||||
|
||||
.trip-header-banner {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin: var(--space-4) 0 0;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--color-border);
|
||||
}
|
||||
|
||||
.trip-header-banner img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Trip page filter bar ────────────────────────────────────────────────────── */
|
||||
|
||||
.feed-sort-bar {
|
||||
@@ -1045,6 +1105,7 @@ body::after {
|
||||
.home-map-col { position: static; height: 40vh; align-self: stretch; }
|
||||
.home-map { height: 40vh; }
|
||||
.home-feed-col { padding: var(--space-6) var(--space-5); }
|
||||
.trip-header-banner { height: 130px; }
|
||||
}
|
||||
|
||||
/* ── Past trips archive ──────────────────────────────────────────────────────── */
|
||||
@@ -1114,6 +1175,13 @@ body::after {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.trip-card-tagline {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-ink-muted);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
.trip-card-meta {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
|
||||
Reference in New Issue
Block a user