Edward Betts
574b4feb1f
- 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>
113 lines
3.3 KiB
HTML
113 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% from "macros.html" import trip_link, display_date_no_year, display_date, display_datetime, display_time, format_distance, trip_item with context %}
|
|
|
|
{% block title %}{{ heading }} - Edward Betts{% endblock %}
|
|
|
|
{% block style %}
|
|
|
|
<link rel="stylesheet" href="{{ url_for("static", filename="leaflet/leaflet.css") }}">
|
|
<link rel="stylesheet" href="{{ url_for("static", filename="css/trips.css") }}">
|
|
|
|
<style>
|
|
body, html {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
.container-fluid {
|
|
height: calc(100% - 56px); /* Subtracting the height of the navbar */
|
|
}
|
|
.text-content {
|
|
overflow-y: scroll;
|
|
height: 100%;
|
|
}
|
|
.map-container {
|
|
position: sticky;
|
|
top: 56px; /* Adjust to be below the navbar */
|
|
height: calc(100vh - 56px); /* Subtracting the height of the navbar */
|
|
}
|
|
#map {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.container-fluid {
|
|
display: block;
|
|
height: auto;
|
|
}
|
|
.map-container {
|
|
position: relative;
|
|
top: 0;
|
|
height: 40vh;
|
|
}
|
|
.text-content {
|
|
height: auto;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% macro section(heading, item_list) %}
|
|
{% if item_list %}
|
|
{% set items = item_list | list %}
|
|
<div class="trip-list-summary">
|
|
<h2>{{ heading }}</h2>
|
|
<p class="mb-2"><a href="{{ url_for("trip_stats") }}">Trip statistics</a> · {{ items | count }} trips</p>
|
|
<div class="summary-stats-row">
|
|
<div class="summary-stat">
|
|
<span class="summary-stat-label">Total distance</span>
|
|
<span class="summary-stat-value">{{ format_distance(total_distance) }}</span>
|
|
</div>
|
|
{% for transport_type, distance in distances_by_transport_type %}
|
|
<div class="summary-stat">
|
|
<span class="summary-stat-label">{{ transport_type | title }}</span>
|
|
<span class="summary-stat-value">{{ format_distance(distance) }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
<div class="summary-stat">
|
|
<span class="summary-stat-label">Total CO₂</span>
|
|
<span class="summary-stat-value">{{ "{:,.1f}".format(total_co2_kg / 1000.0) }} t</span>
|
|
</div>
|
|
{% for transport_type, co2_kg in co2_by_transport_type %}
|
|
<div class="summary-stat">
|
|
<span class="summary-stat-label">{{ transport_type | title }} CO₂</span>
|
|
<span class="summary-stat-value">{{ "{:,.1f}".format(co2_kg) }} kg</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% for trip in items %}
|
|
{{ trip_item(trip) }}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="container-fluid d-flex flex-column flex-md-row">
|
|
<div class="text-content col-12 col-md-6 pe-3">
|
|
{{ section(heading, trips) }}
|
|
</div>
|
|
<div class="map-container col-12 col-md-6">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
|
|
<script src="{{ url_for("static", filename="leaflet/leaflet.js") }}"></script>
|
|
|
|
<script src="{{ url_for("static", filename="leaflet-geodesic/leaflet.geodesic.umd.min.js") }}"></script>
|
|
<script src="{{ url_for("static", filename="js/map.js") }}"></script>
|
|
|
|
<script>
|
|
var coordinates = {{ coordinates | tojson }};
|
|
var routes = {{ routes | tojson }};
|
|
|
|
build_map("map", coordinates, routes);
|
|
|
|
</script>
|
|
{% endblock %}
|