refactor: Various redesigns

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -314,7 +314,7 @@ h1 {
 .adoption-notices {
     display: flex;
     flex-wrap: wrap;
-    list-style-type:none;
+    list-style-type: none;
 }
 
 .card-adoption-notice {
@@ -344,7 +344,7 @@ h1 {
 .animals {
     display: flex;
     flex-wrap: wrap;
-    list-style-type:none;
+    list-style-type: none;
 }
 
 .card-animal {
@@ -359,12 +359,24 @@ h1 {
     .card-animal {
         flex: 1 100%;
     }
+    .card-adoption-notice {
+        flex: 1 100%;
+    }
 }
 
-.card-animal img {
+.adoption-notice-img img, .card-animal img {
     max-width: 100%;
     border-radius: 10%;
     margin: 5px;
     max-height: 250px;
 }
 
+.adoption-card-report-link {
+    margin-left: auto;
+    font-size: 2rem;
+    padding: 10px;
+}
+
+.heading-card-adoption-notice {
+    word-wrap: anywhere;
+}

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

@@ -3,5 +3,3 @@
         {% include "fellchensammlung/partials/partial-adoption-notice.html" %}
     {% endfor %}
 </div>
-
-

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

@@ -4,8 +4,8 @@
 <div class="card-adoption-notice">
     <div>
         <div class="header-card-adoption-notice">
-            <h1><a href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1>
-            <a href="{{ adoption_notice.get_report_url }}">{% translate "Melden" %}</a>
+            <h1><a class="heading-card-adoption-notice" href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1>
+            <a class="adoption-card-report-link" href="{{ adoption_notice.get_report_url }}"><i class="fa-solid fa-flag"></i></a>
         </div>
         <p><b>{% translate "Notfellchen" %}:</b> {{ adoption_notice.animals.all|join_link:", " | safe }}
         </p>