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

refactor(bulma): make thumbnail row use same width images and crop when necessary

Browse Source
This commit is contained in:
moanos [he/him]
2025-05-18 13:16:47 +02:00
parent 2e4f63b250
commit f5b89456ab
2 changed files with 55 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css
View File

@@ -63,6 +63,28 @@
IMAGES IMAGES
*****/ *****/
.crop { #my-gallery .main-photo img {
width: 100%;
height: 300px;
object-fit: cover; object-fit: cover;
border-radius: 6px;
} }
.thumbnail-row {
display: flex;
gap: 10px;
margin-top: 10px;
}
.thumbnail img {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 4px;
}
/* Ensure each thumbnail takes equal width */
.thumbnail {
flex: 1;
}

60
src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-animal-card.html
View File

@@ -13,45 +13,49 @@
</div> </div>
</div> </div>
<div class="card-content"> <div class="card-content">
<div class="content"> {% if animal.description %}
{% if animal.description %} <div class="content">
<p>{{ animal.description | render_markdown }}</p> <p>{{ animal.description | render_markdown }}</p>
{% endif %} </div>
</div> {% endif %}
<div class="cell block" id="my-gallery">
<div class="grid"> <div id="my-gallery">
<div class="cell is-col-span-3"> {% with photo=animal.get_photos.0 %}
{% with photo=animal.get_photos.0 %} <div class="main-photo">
<a href="{{ MEDIA_URL }}/{{ photo.image }}" <a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}" data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}" data-pswp-height="{{ photo.image.height }}"
target="_blank"> target="_blank">
<img class="image is-square" src="{{ MEDIA_URL }}/{{ photo.image }}" <img src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}"> alt="{{ photo.alt_text }}">
</a> </a>
{% endwith %}
</div> </div>
{% for photo in animal.get_photos %} {% endwith %}
<div class="cell">
<div class="thumbnail-row">
{% for photo in animal.get_photos|slice:"1:4" %}
<div class="thumbnail">
<a href="{{ MEDIA_URL }}/{{ photo.image }}" <a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}" data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}" data-pswp-height="{{ photo.image.height }}"
target="_blank"> target="_blank">
<img class="image is-square crop" src="{{ MEDIA_URL }}/{{ photo.image }}" <img src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}"> alt="{{ photo.alt_text }}">
</a> </a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<!--- Assume a user does not have edit permissions on animal if they have no other edit permission --->
{% if has_edit_permission %}
<div class="card-footer">
<a class="card-footer-item button"
href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
<a class="card-footer-item button"
href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
</div>
{% endif %}
</div> </div>
<!--- Assume a user does not have edit permissions on animal if they have no other edit permission --->
{% if has_edit_permission %}
<div class="card-footer">
<a class="card-footer-item button"
href="{% url 'animal-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
<a class="card-footer-item button"
href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
</div>
{% endif %}
</div>
</div> </div>