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

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

@@ -13,37 +13,41 @@
</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>
<div class="cell block" id="my-gallery"> {% endif %}
<div class="grid">
<div class="cell is-col-span-3"> <div id="my-gallery">
{% 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>
</div>
<!--- Assume a user does not have edit permissions on animal if they have no other edit permission ---> <!--- Assume a user does not have edit permissions on animal if they have no other edit permission --->
{% if has_edit_permission %} {% if has_edit_permission %}
<div class="card-footer"> <div class="card-footer">
@@ -53,5 +57,5 @@
href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a> href="{% url 'animal-add-photo-bulma' animal_id=animal.pk %}">{% translate 'Foto hinzufügen' %}</a>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>