edward/agenda
1
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity
agenda/static/css/trips.css
Edward Betts 574b4feb1f 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>
2026-03-03 09:15:51 +00:00

381 lines
7.2 KiB
CSS
Raw Blame History

@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;
}
Reference in a new issue View git blame Copy permalink