From 2498dfd74d8860b443748eee9d8df080729e8063 Mon Sep 17 00:00:00 2001 From: Daniel Schadt Date: Sun, 20 Apr 2025 23:59:35 +0200 Subject: show track images in browse view --- asset-sources/theme.scss | 28 ++++++++++ fietsboek/static/theme.css | 25 +++++++++ fietsboek/static/theme.css.map | 2 +- fietsboek/templates/browse.jinja2 | 111 ++++++++++++++++++++------------------ 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 %} -
- - - - - - - - - {% if track.show_organic_data() %} - - - - - - - {% endif %} - - - - - - - {% if track.show_organic_data() %} - - - - - - - - - - - - - {% endif %} - - - - - - - -
{{ _("page.details.date") }}{{ track.date | format_datetime }}{{ _("page.details.length") }}{{ (track.length / 1000) | round(2) | format_decimal }} km
{{ _("page.details.start_time") }}{{ track.start_time | format_datetime }}{{ _("page.details.end_time") }}{{ track.end_time | format_datetime }}
{{ _("page.details.uphill") }}{{ track.uphill | round(2) | format_decimal }} m{{ _("page.details.downhill") }}{{ track.downhill | round(2) | format_decimal }} m
{{ _("page.details.moving_time") }}{{ track.moving_time }}{{ _("page.details.stopped_time") }}{{ track.stopped_time }}
{{ _("page.details.max_speed") }}{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h{{ _("page.details.avg_speed") }}{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h
{{ _("page.browse.card.comments") }}{{ track.comments | length }} {{ _("page.browse.card.images") }}{{ track.images | length }}
+
+
+ +
+
+ + + + + + + + + {% if track.show_organic_data() %} + + + + + + + {% endif %} + + + + + + + {% if track.show_organic_data() %} + + + + + + + + + + + + + {% endif %} + + + + + + + +
{{ _("page.details.date") }}{{ track.date | format_datetime }}{{ _("page.details.length") }}{{ (track.length / 1000) | round(2) | format_decimal }} km
{{ _("page.details.start_time") }}{{ track.start_time | format_datetime }}{{ _("page.details.end_time") }}{{ track.end_time | format_datetime }}
{{ _("page.details.uphill") }}{{ track.uphill | round(2) | format_decimal }} m{{ _("page.details.downhill") }}{{ track.downhill | round(2) | format_decimal }} m
{{ _("page.details.moving_time") }}{{ track.moving_time }}{{ _("page.details.stopped_time") }}{{ track.stopped_time }}
{{ _("page.details.max_speed") }}{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h{{ _("page.details.avg_speed") }}{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h
{{ _("page.browse.card.comments") }}{{ track.comments | length }} {{ _("page.browse.card.images") }}{{ track.images | length }}
- {% if track.show_organic_data() %} -
    -
  • {{ track.owner.name }}
    • - {% for user in track.tagged_people %} -
  • {{ user.name }}
    • - {% endfor %} -
- {% endif %} + {% if track.show_organic_data() %} +
    +
  • {{ track.owner.name }}
    • + {% for user in track.tagged_people %} +
  • {{ user.name }}
    • + {% endfor %} +
+ {% endif %} +
{% endfor %} -- cgit v1.2.3