trip: redesign itinerary display and add trip list macro
- Add render_trip_element macro to macros.html; use it in trip_item for the trip list page, giving a consistent one-line-per-element format with emoji, route, times, duration, operator, distance, and CO₂ - Redesign trip_page.html itinerary: day headers use date-only (no year), condense check-out to a single accent line, show time-only on transport cards, humanise duration (Xh Ym), km-only distance, add CO₂ for all transport modes, fix seat display for integer seat values - Fix UndefinedError on /trip/past caused by absent 'arrive' key (Jinja2 Undefined is truthy) and date-only depart/arrive fields (no .date()) - Improve mobile map layout: text column before map in HTML order, reduce mobile map heights, hide toggle button on mobile - Add trips.css with design system (Playfair Display / Source Sans 3 / JetBrains Mono, navy/gold/amber palette, card variants by type) - Add tests/test_trip_list_render.py covering the rendering edge cases Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
b3975dad3a
commit
574b4feb1f
5 changed files with 935 additions and 338 deletions
381
static/css/trips.css
Normal file
381
static/css/trips.css
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,300&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--t-navy: #1e2d4a;
|
||||
--t-slate: #374869;
|
||||
--t-gold: #b8860b;
|
||||
--t-amber: #e8a820;
|
||||
--t-cream: #f9f7f3;
|
||||
--t-white: #ffffff;
|
||||
--t-muted: #7a8aa8;
|
||||
--t-border: #dde3ed;
|
||||
--t-text: #1e2533;
|
||||
--t-shadow: rgba(30, 45, 74, 0.08);
|
||||
}
|
||||
|
||||
/* Text pane background on list page */
|
||||
.text-content {
|
||||
background: var(--t-cream) !important;
|
||||
padding-left: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP CARDS (list view)
|
||||
=========================== */
|
||||
|
||||
.trip-card {
|
||||
background: var(--t-white);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--t-border);
|
||||
border-left: 3px solid #8098c0;
|
||||
box-shadow: 0 1px 4px var(--t-shadow);
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 14px;
|
||||
transition: box-shadow 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.trip-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(30, 45, 74, 0.14);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.trip-card.trip-current {
|
||||
border-left-color: var(--t-gold);
|
||||
}
|
||||
|
||||
/* Trip name heading */
|
||||
.trip-name {
|
||||
margin-bottom: 2px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.trip-name a {
|
||||
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
font-weight: 700;
|
||||
color: var(--t-navy);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.trip-name a:hover {
|
||||
color: var(--t-gold);
|
||||
}
|
||||
|
||||
.trip-name small {
|
||||
font-family: 'JetBrains Mono', 'Courier New', monospace;
|
||||
font-size: 0.7rem;
|
||||
color: var(--t-muted);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Countries as inline chips */
|
||||
.trip-countries {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin: 6px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.trip-countries li {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: #eef2f8;
|
||||
border: 1px solid #d5dce8;
|
||||
border-radius: 20px;
|
||||
padding: 1px 10px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--t-text);
|
||||
}
|
||||
|
||||
/* Dates */
|
||||
.trip-dates {
|
||||
font-size: 0.83rem;
|
||||
color: var(--t-muted);
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* Stats row — pill chips */
|
||||
.trip-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.trip-stat {
|
||||
display: inline-block;
|
||||
background: #f3f6fa;
|
||||
border: 1px solid #dde3ed;
|
||||
border-radius: 20px;
|
||||
padding: 2px 10px;
|
||||
font-size: 0.74rem;
|
||||
color: var(--t-slate);
|
||||
white-space: nowrap;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* School holiday info */
|
||||
.school-holiday-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin: 4px 0 8px;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
/* Inline weather chip in day headers */
|
||||
.trip-weather-inline {
|
||||
font-size: 0.78rem;
|
||||
color: var(--t-muted);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Day sub-headers within a trip card */
|
||||
.trip-day-header {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--t-navy);
|
||||
margin: 18px 0 6px;
|
||||
padding: 4px 0 4px 10px;
|
||||
border-left: 3px solid var(--t-amber);
|
||||
background: linear-gradient(to right, rgba(232, 168, 32, 0.07), transparent);
|
||||
}
|
||||
|
||||
/* Condensed check-out line */
|
||||
.trip-checkout {
|
||||
font-size: 0.84rem;
|
||||
padding: 4px 8px;
|
||||
color: var(--t-muted);
|
||||
border-left: 2px solid #aacde8;
|
||||
margin: 3px 0 3px 1px;
|
||||
}
|
||||
|
||||
/* Transport/accommodation element rows */
|
||||
.trip-element {
|
||||
font-size: 0.84rem;
|
||||
padding: 2px 0;
|
||||
color: var(--t-text);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
INLINE CONFERENCE CARDS
|
||||
(within trip_item macro)
|
||||
=========================== */
|
||||
|
||||
.trip-conference-card {
|
||||
background: #fffef4;
|
||||
border: 1px solid #e4d46c;
|
||||
border-radius: 6px;
|
||||
padding: 9px 13px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.trip-conference-card .card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.trip-conference-card .card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
color: var(--t-navy);
|
||||
}
|
||||
|
||||
.trip-conference-card .card-text {
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 0;
|
||||
color: var(--t-text);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP PAGE ACCOMMODATION
|
||||
=========================== */
|
||||
|
||||
.trip-accommodation-card {
|
||||
background: #f3faff;
|
||||
border: 1px solid #aacde8;
|
||||
border-radius: 6px;
|
||||
padding: 9px 13px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.trip-accommodation-card .card-body { padding: 0; }
|
||||
|
||||
.trip-accommodation-card .card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
color: var(--t-navy);
|
||||
}
|
||||
|
||||
.trip-accommodation-card .card-text {
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP PAGE TRANSPORT
|
||||
=========================== */
|
||||
|
||||
.trip-transport-card {
|
||||
background: #f7f9fc;
|
||||
border: 1px solid #d0dbe8;
|
||||
border-radius: 6px;
|
||||
padding: 9px 13px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.trip-transport-card .card-body { padding: 0; }
|
||||
|
||||
.trip-transport-card .card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
color: var(--t-navy);
|
||||
}
|
||||
|
||||
.trip-transport-card .card-text {
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP PAGE EVENTS
|
||||
=========================== */
|
||||
|
||||
.trip-event-card {
|
||||
background: #fdf5ff;
|
||||
border: 1px solid #d4a8e8;
|
||||
border-radius: 6px;
|
||||
padding: 9px 13px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.trip-event-card .card-body { padding: 0; }
|
||||
|
||||
.trip-event-card .card-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3px;
|
||||
color: var(--t-navy);
|
||||
}
|
||||
|
||||
.trip-event-card .card-text {
|
||||
font-size: 0.82rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP PAGE HEADER & TYPOGRAPHY
|
||||
=========================== */
|
||||
|
||||
.trip-page-title {
|
||||
font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.8rem;
|
||||
color: var(--t-navy);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Section divider headings on the trip detail page */
|
||||
h3.trip-section-h,
|
||||
h4.trip-section-h {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--t-muted);
|
||||
margin-top: 22px;
|
||||
margin-bottom: 8px;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--t-border);
|
||||
}
|
||||
|
||||
/* Prev/next nav */
|
||||
.trip-prev-next {
|
||||
font-size: 0.83rem;
|
||||
color: var(--t-muted);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.trip-prev-next a {
|
||||
color: var(--t-slate);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.trip-prev-next a:hover {
|
||||
color: var(--t-gold);
|
||||
}
|
||||
|
||||
/* ===========================
|
||||
TRIP LIST PAGE SUMMARY BOX
|
||||
=========================== */
|
||||
|
||||
.trip-list-summary {
|
||||
background: var(--t-navy);
|
||||
color: #c8d4e8;
|
||||
border-radius: 8px;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 18px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.trip-list-summary h2 {
|
||||
color: #f0f4fa;
|
||||
font-family: 'Playfair Display', Georgia, serif;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.trip-list-summary a {
|
||||
color: var(--t-amber);
|
||||
text-decoration: none;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.trip-list-summary a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.summary-stats-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 18px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.summary-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.summary-stat-label {
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
opacity: 0.55;
|
||||
line-height: 1;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.summary-stat-value {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 0.82rem;
|
||||
color: var(--t-amber);
|
||||
font-weight: 500;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue