99 lines
2.5 KiB
HTML
99 lines
2.5 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") }}">
|
|
|
|
<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: 50vh; /* Adjust as needed */
|
|
}
|
|
.text-content {
|
|
height: auto;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% macro section(heading, item_list) %}
|
|
{% if item_list %}
|
|
{% set items = item_list | list %}
|
|
<div class="heading"><h2>{{ heading }}</h2></div>
|
|
<p><a href="{{ url_for("trip_stats") }}">Trip statistics</a></p>
|
|
<p>{{ items | count }} trips</p>
|
|
|
|
<div>Total distance: {{ format_distance(total_distance) }}</div>
|
|
|
|
{% for transport_type, distance in distances_by_transport_type %}
|
|
<div>
|
|
{{ transport_type | title }}
|
|
distance: {{format_distance(distance) }}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
{% 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="map-container col-12 col-md-6 order-1 order-md-2">
|
|
<div id="map" class="map"></div>
|
|
</div>
|
|
<div class="text-content col-12 col-md-6 order-2 order-md-1 pe-3">
|
|
{{ section(heading, trips) }}
|
|
</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 %}
|