From 18a2d16bf6f7a4fa9cc17f1522b5ff1f4baf4214 Mon Sep 17 00:00:00 2001 From: moanos Date: Tue, 10 Jun 2025 20:35:24 +0200 Subject: [PATCH] refactor(bulma): Add action dropdown, remove card layout --- .../static/fellchensammlung/js/toggles.js | 29 +++ .../details/bulma-detail-adoption-notice.html | 203 +++++++++++------- 2 files changed, 150 insertions(+), 82 deletions(-) diff --git a/src/fellchensammlung/static/fellchensammlung/js/toggles.js b/src/fellchensammlung/static/fellchensammlung/js/toggles.js index a7d2733..9710081 100644 --- a/src/fellchensammlung/static/fellchensammlung/js/toggles.js +++ b/src/fellchensammlung/static/fellchensammlung/js/toggles.js @@ -40,4 +40,33 @@ document.addEventListener('DOMContentLoaded', () => { } }); }); + // DROPDOWNS + const $clickableDropdowns = document.querySelectorAll( + ".dropdown:not(.is-hoverable)", + ); + + if ($clickableDropdowns.length > 0) { + $clickableDropdowns.forEach(($dropdown) => { + if (!$dropdown.querySelector("button")) { + return; + } + + $dropdown.querySelector("button").addEventListener("click", (event) => { + event.stopPropagation(); + $dropdown.classList.toggle("is-active"); + }); + }); + + document.addEventListener("click", () => { + closeDropdowns(); + }); + } + + function closeDropdowns() { + $clickableDropdowns.forEach(($el) => { + $el.classList.remove("is-active"); + }); + } }); + + diff --git a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html index 42d1540..263bdc6 100644 --- a/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html +++ b/src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html @@ -8,103 +8,142 @@ {% block content %}
-
-
-

{{ adoption_notice.name }}

-
-
-
-
- -
- -
-

{% translate "Ort" %}

-

{% if adoption_notice.location %} - {{ adoption_notice.location }} - {% else %} - {{ adoption_notice.location_string }} - {% endif %}

-
-
- {% include "fellchensammlung/partials/bulma-sex-overview.html" %} -
-
-
+ +
+
+
+

{{ adoption_notice.name }}

+
-
- -
-
-
-
- {% with photo=adoption_notice.get_photos.0 %} -
- - {{ photo.alt_text }} - -
- {% endwith %} +
+
+
+
+ +
+ +
- -
-
-
-

{% translate "Beschreibung" %}

-
-
- +
+
+
+ +
+
+
+ +
+

{% translate "Ort" %}

+

{% if adoption_notice.location %} + {{ adoption_notice.location }} + {% else %} + {{ adoption_notice.location_string }} + {% endif %}

+
+
+ {% include "fellchensammlung/partials/bulma-sex-overview.html" %} +
+
+
+
+ + +
+ +
+
+
+
+ {% with photo=adoption_notice.get_photos.0 %} +
+ + {{ photo.alt_text }} + +
+ {% endwith %} + +
+ {% for photo in adoption_notice.get_photos|slice:"1:4" %} +
+ + {{ photo.alt_text }} + +
+ {% endfor %}
-
- {% if has_edit_permission %} -
-
- - {% translate 'Foto hinzufügen' %} - -
-
- - {% translate 'Bearbeiten' %} - -
+ +
+
+
+

{% translate "Beschreibung" %}

- {% endif %} +
+ +
+
+ + + {% if has_edit_permission %} +
+
+
+ + {% translate 'Foto hinzufügen' %} + +
+
+ + {% translate 'Bearbeiten' %} + +
+
+
+ {% endif %}
{% if adoption_notice.further_information %}