moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(bulma): Add action dropdown, remove card layout

Browse Source
This commit is contained in:
moanos [he/him]
2025-06-10 20:35:24 +02:00
parent 9265cdaea9
commit 18a2d16bf6
2 changed files with 150 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/fellchensammlung/static/fellchensammlung/js/toggles.js
View File

@@ -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");
});
}
});

57
src/fellchensammlung/templates/fellchensammlung/details/bulma-detail-adoption-notice.html
View File

@@ -8,14 +8,52 @@
{% block content %} {% block content %}
<div class="columns"> <div class="columns">
<div class="column is-two-thirds"> <div class="column is-two-thirds">
<div class="card"> <!--- Title level (including action dropdown) -->
<div class="card-header"> <div class="level is-mobile">
<h1 class="card-header-title title is-2">{{ adoption_notice.name }}</h1> <div class="level-left">
<div class="level-item">
<p class="title is-2">{{ adoption_notice.name }}</p>
</div> </div>
<div class="card-content"> </div>
<div class="level-right">
<div class="level-item">
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<span><i class="fas fa-gear" aria-label="{% trans 'Aktionen' %}"></i></span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<!--- Action menu (dropdown) --->
<div class="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item">
<i class="fas fa-check"
aria-hidden="true"></i> {% trans 'Als aktiv bestätigen' %}
</a>
<a class="dropdown-item">
Elements
</a>
<a class="dropdown-item">
Components
</a>
<hr class="dropdown-divider">
<div class="dropdown-item">
Version 1.0.4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- General Information --->
<div class="grid"> <div class="grid">
<div class="cell"> <div class="cell">
<!--- General Information --->
<div class="grid"> <div class="grid">
<div class="cell"> <div class="cell">
@@ -33,6 +71,7 @@
</div> </div>
</div> </div>
<!--- Images and Description --->
<div class="columns"> <div class="columns">
<!--- Images ---> <!--- Images --->
<div class="column block"> <div class="column block">
@@ -85,9 +124,10 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="card-footer"> <!--- Edit buttons -->
{% if has_edit_permission %} {% if has_edit_permission %}
<div class="level">
<div class="card-footer-item"> <div class="card-footer-item">
<div class="column"> <div class="column">
<a class="button is-primary is-light" <a class="button is-primary is-light"
@@ -102,9 +142,8 @@
</a> </a>
</div> </div>
</div> </div>
</div>
{% endif %} {% endif %}
</div>
</div>
<div class="block"> <div class="block">
{% if adoption_notice.further_information %} {% if adoption_notice.further_information %}
<form method="get" action="{% url 'bulma-external-site' %}"> <form method="get" action="{% url 'bulma-external-site' %}">