54 lines
2.5 KiB
Twig
54 lines
2.5 KiB
Twig
{% 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 %}
|