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

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

@@ -8,103 +8,142 @@
{% 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> <div class="level-item">
<div class="card-content"> <p class="title is-2">{{ adoption_notice.name }}</p>
<div class="grid">
<div class="cell">
<!--- General Information --->
<div class="grid">
<div class="cell">
<h2><strong>{% translate "Ort" %}</strong></h2>
<p>{% if adoption_notice.location %}
{{ adoption_notice.location }}
{% else %}
{{ adoption_notice.location_string }}
{% endif %}</p>
</div>
<div class="cell">
{% include "fellchensammlung/partials/bulma-sex-overview.html" %}
</div>
</div>
</div>
</div> </div>
</div>
<div class="columns"> <div class="level-right">
<!--- Images ---> <div class="level-item">
<div class="column block"> <div class="dropdown is-right">
<div class="card"> <div class="dropdown-trigger">
<div class="grid card-content"> <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
<div class="gallery"> <span><i class="fas fa-gear" aria-label="{% trans 'Aktionen' %}"></i></span>
{% with photo=adoption_notice.get_photos.0 %} <span class="icon is-small">
<div class="main-photo"> <i class="fas fa-angle-down" aria-hidden="true"></i>
<a href="{{ MEDIA_URL }}{{ photo.image }}" </span>
data-pswp-width="{{ photo.image.width }}" </button>
data-pswp-height="{{ photo.image.height }}" </div>
target="_blank"> <!--- Action menu (dropdown) --->
<img src="{{ MEDIA_URL }}{{ photo.image }}" <div class="dropdown-menu" role="menu">
alt="{{ photo.alt_text }}"> <div class="dropdown-content">
</a>
</div>
{% endwith %}
<div class="thumbnail-row"> <a class="dropdown-item">
{% for photo in adoption_notice.get_photos|slice:"1:4" %} <i class="fas fa-check"
<div class="thumbnail"> aria-hidden="true"></i> {% trans 'Als aktiv bestätigen' %}
<a href="{{ MEDIA_URL }}{{ photo.image }}" </a>
data-pswp-width="{{ photo.image.width }}" <a class="dropdown-item">
data-pswp-height="{{ photo.image.height }}" Elements
target="_blank"> </a>
<img src="{{ MEDIA_URL }}{{ photo.image }}" <a class="dropdown-item">
alt="{{ photo.alt_text }}"> Components
</a> </a>
</div> <hr class="dropdown-divider">
{% endfor %} <div class="dropdown-item">
</div> Version 1.0.4
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--- Description ---> </div>
<div class="column block"> </div>
<div class="card"> </div>
<div class="card-header"> <!--- General Information --->
<h1 class="card-header-title title is-2">{% translate "Beschreibung" %}</h1> <div class="grid">
</div> <div class="cell">
<div class="card-content"> <div class="grid">
<p class="expandable">{% if adoption_notice.description %}
{{ adoption_notice.description | render_markdown }} <div class="cell">
{% else %} <h2><strong>{% translate "Ort" %}</strong></h2>
{% translate "Keine Beschreibung angegeben" %} <p>{% if adoption_notice.location %}
{% endif %} {{ adoption_notice.location }}
</p> {% else %}
{{ adoption_notice.location_string }}
{% endif %}</p>
</div>
<div class="cell">
{% include "fellchensammlung/partials/bulma-sex-overview.html" %}
</div>
</div>
</div>
</div>
<!--- Images and Description --->
<div class="columns">
<!--- Images --->
<div class="column block">
<div class="card">
<div class="grid card-content">
<div class="gallery">
{% with photo=adoption_notice.get_photos.0 %}
<div class="main-photo">
<a href="{{ MEDIA_URL }}{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img src="{{ MEDIA_URL }}{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
</div>
{% endwith %}
<div class="thumbnail-row">
{% for photo in adoption_notice.get_photos|slice:"1:4" %}
<div class="thumbnail">
<a href="{{ MEDIA_URL }}{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img src="{{ MEDIA_URL }}{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
</div>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer"> <!--- Description --->
{% if has_edit_permission %} <div class="column block">
<div class="card-footer-item"> <div class="card">
<div class="column"> <div class="card-header">
<a class="button is-primary is-light" <h1 class="card-header-title title is-2">{% translate "Beschreibung" %}</h1>
href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">
{% translate 'Foto hinzufügen' %}
</a>
</div>
<div class="card-footer-item">
<a class="button is-primary"
href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
{% translate 'Bearbeiten' %}
</a>
</div>
</div> </div>
{% endif %} <div class="card-content">
<p class="expandable">{% if adoption_notice.description %}
{{ adoption_notice.description | render_markdown }}
{% else %}
{% translate "Keine Beschreibung angegeben" %}
{% endif %}
</p>
</div>
</div>
</div> </div>
</div> </div>
<!--- Edit buttons -->
{% if has_edit_permission %}
<div class="level">
<div class="card-footer-item">
<div class="column">
<a class="button is-primary is-light"
href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">
{% translate 'Foto hinzufügen' %}
</a>
</div>
<div class="card-footer-item">
<a class="button is-primary"
href="{% url 'adoption-notice-edit' adoption_notice_id=adoption_notice.pk %}">
{% translate 'Bearbeiten' %}
</a>
</div>
</div>
</div>
{% endif %}
<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' %}">