add chevron buttons to collapse year/month summary

3 files changed, 29 insertions, 4 deletions

diff --git a/fietsboek/static/fietsboek.js b/fietsboek/static/fietsboek.js
index 265032e..f99a531 100644
--- a/fietsboek/static/fietsboek.js
+++ b/fietsboek/static/fietsboek.js
@@ -271,6 +271,27 @@ function saveImageDescriptionClicked(event) {
 
 addHandler("#imageDescriptionModal button.btn-success", "click", saveImageDescriptionClicked);
 
+/**
+ * Handler to toggle (collapse/expand) the yearly/monthly summary.
+ *
+ * @param event - The triggering event.
+ */
+function toggleSummary(event) {
+  const chevron = event.target;
+  const containing = chevron.closest("a");
+  const summary = containing.nextElementSibling;
+  bootstrap.Collapse.getOrCreateInstance(summary).toggle();
+  if (chevron.classList.contains("bi-chevron-down")) {
+    chevron.classList.remove("bi-chevron-down");
+    chevron.classList.add("bi-chevron-right");
+  } else {
+    chevron.classList.remove("bi-chevron-right");
+    chevron.classList.add("bi-chevron-down");
+  }
+}
+
+addHandler(".summary-toggler", "click", toggleSummary);
+
 /*
  * Handler to enable the "Download archive button" ...
  */
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index 01ee06e..3f7f74d 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -81,6 +81,10 @@ strong {
     max-width: 100%;
 }
 
+.summary-toggler {
+  cursor: pointer;
+}
+
 .admin-badge-list * {
   margin-left: 5px;
   margin-right: 5px;
diff --git a/fietsboek/templates/home.jinja2 b/fietsboek/templates/home.jinja2
index 6825c62..4a9c3ad 100644
--- a/fietsboek/templates/home.jinja2
+++ b/fietsboek/templates/home.jinja2
@@ -6,11 +6,11 @@
   {% if summary %}
   <div class="list-group list-group-root">
     {% for year in summary %}
-    <a class="list-group-item list-group-item-primary">{{ year.year }} &mdash; {{ (year.total_length / 1000) | round(2) | format_decimal }} km</a>
-    <div class="list-group">
+    <a class="list-group-item list-group-item-primary"><i class="bi bi-chevron-down summary-toggler"></i> {{ year.year }} &mdash; {{ (year.total_length / 1000) | round(2) | format_decimal }} km</a>
+    <div class="list-group collapse show">
       {% for month in year %}
-      <a class="list-group-item list-group-item-secondary">{{ month_name(request, month.month) }} &mdash; {{ (month.total_length / 1000) | round(2) | format_decimal }} km</a>
-      <div class="list-group">
+      <a class="list-group-item list-group-item-secondary"><i class="bi bi-chevron-down summary-toggler"></i> {{ month_name(request, month.month) }} &mdash; {{ (month.total_length / 1000) | round(2) | format_decimal }} km</a>
+      <div class="list-group collapse show">
         {% for track in month %}
         <span class="list-group-item">{{ track.date.day }}: <a href="{{ request.route_url('details', track_id=track.id) }}" data-bs-toggle="tooltip" data-bs-container="body" data-bs-html="true" title="{{ track.html_tooltip(request.localizer) }}">{{ track.title | default(track.date, true) }}</a></span>
         {% endfor %}