refactor(bulma): various improvements on AN display in list

src/fellchensammlung/static/fellchensammlung/css/bulma-styles.css

@@ -65,8 +65,8 @@ IMAGES
 
 .gallery .main-photo img {
     width: 100%;
-    height: 300px;
+    height: 150px;
-    object-fit: cover;
+    object-fit: cover; /* Crops the images */
     border-radius: 6px;
 }
 
@@ -78,8 +78,8 @@ IMAGES
 
 .thumbnail img {
     width: 100%;
-    height: 80px;
+    height: 50px;
-    object-fit: cover;
+    object-fit: cover; /* Crops the images */
     border-radius: 4px;
 }
 
@@ -88,3 +88,12 @@ IMAGES
     flex: 1;
 }
 
+
+/**
+AN Cards
+ */
+
+.an-card {
+    width: 100%;
+    height: 100%;
+}

src/fellchensammlung/templates/fellchensammlung/lists/bulma-list-adoption-notices.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 {% if adoption_notices %}
-    <div class="grid">
+    <div class="grid is-col-min-10">
         {% for adoption_notice in adoption_notices %}
             <div class="cell">
                 {% include "fellchensammlung/partials/bulma-partial-adoption-notice-minimal.html" %}

src/fellchensammlung/templates/fellchensammlung/partials/bulma-partial-adoption-notice-minimal.html

@@ -1,13 +1,13 @@
 {% load custom_tags %}
 {% load i18n %}
 
-<div class="card">
+<div class="card an-card">
-    <div class="header-card-adoption-notice">
+    <div class="card-header">
-        <h2 class="heading-card-adoption-notice title is-4">
+        <h2 class="card-header-title">
             <a href="{{ adoption_notice.get_absolute_url_bulma }}"> {{ adoption_notice.name }}</a>
         </h2>
     </div>
-
+    <div class="card-content">
         <div class="grid">
             <div class="cell">
                 <!--- General Information --->
@@ -30,12 +30,40 @@
             </div>
         </div>
 
-    {% if adoption_notice.get_photo %}
+        {% if adoption_notice.get_photos %}
-        <div class="adoption-notice-img img-small">
+            <div class="gallery">
-            <img src="{{ MEDIA_URL }}/{{ adoption_notice.get_photo.image }}"
+                {% with photo=adoption_notice.get_photos.0 %}
-                 alt="{{ adoption_notice.get_photo.alt_text }}">
+                    <div class="main-photo minimal">
+                        <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 minimal">
+                    {% 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>
+        {% else %}
+            {% if adoption_notice.description_short %}
+                {{ adoption_notice.description_short | render_markdown }}
             {% endif %}
+        {% endif %}
+    </div>
 </div>