diff options
| -rw-r--r-- | fietsboek/static/fietsboek.js | 21 | ||||
| -rw-r--r-- | fietsboek/static/theme.css | 4 | ||||
| -rw-r--r-- | fietsboek/templates/home.jinja2 | 8 |
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 }} — {{ (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 }} — {{ (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) }} — {{ (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) }} — {{ (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 %} |