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

refactor(bulma): Work on images

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

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

@@ -58,3 +58,11 @@
max-height: 500px; max-height: 500px;
width: 90%; width: 90%;
} }
/*****
IMAGES
*****/
.crop {
object-fit: cover;
}

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

@@ -13,23 +13,42 @@
</div> </div>
</div> </div>
<div class="card-content"> <div class="card-content">
{% if animal.description %} <div class="content">
<p>{{ animal.description | render_markdown }}</p> {% if animal.description %}
{% endif %} <p>{{ animal.description | render_markdown }}</p>
<div class="cell" id="my-gallery"> {% endif %}
{% for photo in animal.get_photos %} </div>
<a href="{{ MEDIA_URL }}/{{ photo.image }}" <div class="cell block" id="my-gallery">
data-pswp-width="{{ photo.image.width }}" <div class="grid">
data-pswp-height="{{ photo.image.height }}" <div class="cell is-col-span-3">
target="_blank"> {% with photo=animal.get_photos.0 %}
<img src="{{ MEDIA_URL }}/{{ photo.image }}" alt="{{ photo.alt_text }}"> <a href="{{ MEDIA_URL }}/{{ photo.image }}"
</a> data-pswp-width="{{ photo.image.width }}"
{% endfor %} data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img class="image is-square" src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
{% endwith %}
</div>
{% for photo in animal.get_photos %}
<div class="cell">
<a href="{{ MEDIA_URL }}/{{ photo.image }}"
data-pswp-width="{{ photo.image.width }}"
data-pswp-height="{{ photo.image.height }}"
target="_blank">
<img class="image is-square crop" src="{{ MEDIA_URL }}/{{ photo.image }}"
alt="{{ photo.alt_text }}">
</a>
</div>
{% endfor %}
</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">
<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-edit' animal_id=animal.pk %}">{% translate 'Bearbeiten' %}</a>
<a class="card-footer-item button" <a class="card-footer-item button"
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>