aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--asset-sources/theme.scss28
-rw-r--r--fietsboek/static/theme.css25
-rw-r--r--fietsboek/static/theme.css.map2
-rw-r--r--fietsboek/templates/browse.jinja2111
4 files changed, 112 insertions, 54 deletions
diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 7f89bf6..d11f447 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -280,6 +280,34 @@ strong {
width: 25%;
}
+.browse-track-card {
+ display: grid;
+ grid-template: 'preview data' / 300px auto;
+
+ @media (max-width: 768px) {
+ grid-template:
+ 'preview'
+ 'data';
+ }
+
+ .browse-track-preview {
+ grid-area: preview;
+
+ @media (max-width: 768px) {
+ text-align: center;
+ }
+
+ img {
+ width: 300px;
+ height: 300px;
+ }
+ }
+
+ .browse-track-data {
+ grid-area: data;
+ }
+}
+
.chart-title {
text-align: center;
}
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 2298b49..9fae56d 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -268,6 +268,31 @@ strong {
width: 25%;
}
+.browse-track-card {
+ display: grid;
+ grid-template: "preview data"/300px auto;
+}
+@media (max-width: 768px) {
+ .browse-track-card {
+ grid-template: "preview" "data";
+ }
+}
+.browse-track-card .browse-track-preview {
+ grid-area: preview;
+}
+@media (max-width: 768px) {
+ .browse-track-card .browse-track-preview {
+ text-align: center;
+ }
+}
+.browse-track-card .browse-track-preview img {
+ width: 300px;
+ height: 300px;
+}
+.browse-track-card .browse-track-data {
+ grid-area: data;
+}
+
.chart-title {
text-align: center;
}
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index 08ac64f..063b3fe 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"} \ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI,eACE;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;;AAIJ;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"} \ No newline at end of file
diff --git a/fietsboek/templates/browse.jinja2 b/fietsboek/templates/browse.jinja2
index 8877229..6723d19 100644
--- a/fietsboek/templates/browse.jinja2
+++ b/fietsboek/templates/browse.jinja2
@@ -151,60 +151,65 @@
{% endif %}
</span>
</h5>
- <div class="card-body">
- <table class="table table-hover table-sm browse-summary">
- <tbody>
- <tr>
- <th scope="row">{{ _("page.details.date") }}</th>
- <td>{{ track.date | format_datetime }}</td>
- <th scope="row">{{ _("page.details.length") }}</th>
- <td>{{ (track.length / 1000) | round(2) | format_decimal }} km</td>
- </tr>
- {% if track.show_organic_data() %}
- <tr>
- <th scope="row">{{ _("page.details.start_time") }}</th>
- <td>{{ track.start_time | format_datetime }}</td>
- <th scope="row">{{ _("page.details.end_time") }}</th>
- <td>{{ track.end_time | format_datetime }}</td>
- </tr>
- {% endif %}
- <tr>
- <th scope="row">{{ _("page.details.uphill") }}</th>
- <td>{{ track.uphill | round(2) | format_decimal }} m</td>
- <th scope="row">{{ _("page.details.downhill") }}</th>
- <td>{{ track.downhill | round(2) | format_decimal }} m</td>
- </tr>
- {% if track.show_organic_data() %}
- <tr>
- <th scope="row">{{ _("page.details.moving_time") }}</th>
- <td>{{ track.moving_time }}</td>
- <th scope="row">{{ _("page.details.stopped_time") }}</th>
- <td>{{ track.stopped_time }}</td>
- </tr>
- <tr>
- <th scope="row">{{ _("page.details.max_speed") }}</th>
- <td>{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h</td>
- <th scope="row">{{ _("page.details.avg_speed") }}</th>
- <td>{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h</td>
- </tr>
- {% endif %}
- <tr>
- <th scope="row"><i class="bi bi-chat-left-text-fill"></i> {{ _("page.browse.card.comments") }}</th>
- <td>{{ track.comments | length }}</td>
- <th scope="row"><i class="bi bi-images"></i> {{ _("page.browse.card.images") }}</th>
- <td>{{ track.images | length }}</td>
- </tr>
- </tbody>
- </table>
+ <div class="card-body browse-track-card">
+ <div class="browse-track-preview">
+ <img src="{{ request.route_url('track-map', track_id=track.id) }}">
+ </div>
+ <div class="browse-track-data">
+ <table class="table table-hover table-sm browse-summary">
+ <tbody>
+ <tr>
+ <th scope="row">{{ _("page.details.date") }}</th>
+ <td>{{ track.date | format_datetime }}</td>
+ <th scope="row">{{ _("page.details.length") }}</th>
+ <td>{{ (track.length / 1000) | round(2) | format_decimal }} km</td>
+ </tr>
+ {% if track.show_organic_data() %}
+ <tr>
+ <th scope="row">{{ _("page.details.start_time") }}</th>
+ <td>{{ track.start_time | format_datetime }}</td>
+ <th scope="row">{{ _("page.details.end_time") }}</th>
+ <td>{{ track.end_time | format_datetime }}</td>
+ </tr>
+ {% endif %}
+ <tr>
+ <th scope="row">{{ _("page.details.uphill") }}</th>
+ <td>{{ track.uphill | round(2) | format_decimal }} m</td>
+ <th scope="row">{{ _("page.details.downhill") }}</th>
+ <td>{{ track.downhill | round(2) | format_decimal }} m</td>
+ </tr>
+ {% if track.show_organic_data() %}
+ <tr>
+ <th scope="row">{{ _("page.details.moving_time") }}</th>
+ <td>{{ track.moving_time }}</td>
+ <th scope="row">{{ _("page.details.stopped_time") }}</th>
+ <td>{{ track.stopped_time }}</td>
+ </tr>
+ <tr>
+ <th scope="row">{{ _("page.details.max_speed") }}</th>
+ <td>{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h</td>
+ <th scope="row">{{ _("page.details.avg_speed") }}</th>
+ <td>{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h</td>
+ </tr>
+ {% endif %}
+ <tr>
+ <th scope="row"><i class="bi bi-chat-left-text-fill"></i> {{ _("page.browse.card.comments") }}</th>
+ <td>{{ track.comments | length }}</td>
+ <th scope="row"><i class="bi bi-images"></i> {{ _("page.browse.card.images") }}</th>
+ <td>{{ track.images | length }}</td>
+ </tr>
+ </tbody>
+ </table>
- {% if track.show_organic_data() %}
- <ul>
- <li>{{ track.owner.name }}</li>
- {% for user in track.tagged_people %}
- <li>{{ user.name }}</li>
- {% endfor %}
- </ul>
- {% endif %}
+ {% if track.show_organic_data() %}
+ <ul>
+ <li>{{ track.owner.name }}</li>
+ {% for user in track.tagged_people %}
+ <li>{{ user.name }}</li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </div>
</div>
</div>
{% endfor %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-21 19:43:51 +0000