feat: gpx-manager template layout with trip sections

2026-06-19 14:57:59 +02:00
parent feeef865aa
commit e4451857c2
1 changed files with 53 additions and 0 deletions
@@ -0,0 +1,53 @@
+{% extends 'partials/base.html.twig' %}
+
+{% block content %}
+{% set trips_page = grav.pages.find('/trips') %}
+{% set trips = trips_page ? trips_page.children.published() : [] %}
+
+<div class="gpx-manager">
+    <h1 class="gpx-manager__title">GPX Files</h1>
+
+    {% if trips is empty %}
+        <p>No trips found.</p>
+    {% else %}
+        {% for trip in trips %}
+        <section class="gpx-trip" data-route="{{ trip.route }}">
+            <h2 class="gpx-trip__name">{{ trip.title }}</h2>
+            <div class="gpx-file-list" id="files-{{ trip.slug }}">
+                <p class="gpx-loading">Loading…</p>
+            </div>
+            <form class="gpx-upload-form" data-trip-route="{{ trip.route }}">
+                <label class="gpx-upload-label">
+                    <input type="file" accept=".gpx,application/gpx+xml" name="file" class="gpx-file-input">
+                </label>
+                <button type="submit" class="gpx-upload-btn">Upload</button>
+                <span class="gpx-status"></span>
+            </form>
+        </section>
+        {% endfor %}
+    {% endif %}
+</div>
+
+<style>
+.gpx-manager { max-width: 720px; margin: 2rem auto; padding: 0 1rem; font-family: 'DM Sans', sans-serif; }
+.gpx-manager__title { font-family: 'DM Serif Display', serif; font-size: 1.75rem; margin-bottom: 2rem; }
+.gpx-trip { border: 1px solid #e0ddd6; border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; }
+.gpx-trip__name { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem; }
+.gpx-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 1rem; }
+.gpx-table th { text-align: left; color: #666; font-weight: 500; padding: 0.25rem 0.5rem; border-bottom: 1px solid #e0ddd6; }
+.gpx-table td { padding: 0.5rem; border-bottom: 1px solid #f0ede8; }
+.gpx-empty, .gpx-loading { color: #888; font-size: 0.875rem; margin-bottom: 0.75rem; }
+.gpx-upload-form { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
+.gpx-upload-btn { background: #1F6B5A; color: #fff; border: none; border-radius: 5px; padding: 0.4rem 1rem; font-size: 0.875rem; cursor: pointer; }
+.gpx-upload-btn:disabled { opacity: 0.5; cursor: default; }
+.gpx-delete { background: none; border: 1px solid #ccc; border-radius: 4px; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; color: #c0392b; }
+.gpx-delete:disabled { opacity: 0.5; }
+.gpx-status { font-size: 0.8rem; color: #555; }
+.gpx-status.error { color: #c0392b; }
+</style>
+
+<script>
+/* GPX manager JS — added in Task 3 */
+</script>
+
+{% endblock %}