feat: Make table in adoption notice responsive

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

@@ -37,12 +37,44 @@ body {
 }
 
 
+a {
+    color: inherit;
+}
+
 table {
     width: 100%;
 }
 
-a {
-    color: inherit;
+@media screen and (max-width: 600px) {
+    .responsive thead {
+        visibility: hidden;
+        height: 0;
+        position: absolute;
+    }
+
+    .responsive tr {
+        display: block;
+    }
+
+    .responsive td {
+        border: 1px solid;
+        border-bottom: none;
+        display: block;
+        font-size: .8em;
+        text-align: right;
+        width: 100%;
+    }
+
+    .responsive td::before {
+        content: attr(data-label);
+        float: left;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .responsive td:last-child {
+        border-bottom: 1px solid;
+    }
 }
 
 table {
@@ -64,7 +96,7 @@ td {
     padding: 5px;
 }
 
-th {
+thead td {
     border: 3px solid black;
     border-collapse: collapse;
     padding: 8px;
@@ -767,8 +799,9 @@ a.btn, a.btn2, a.nav-link {
 .inline-container {
     display: inline-block;
 }
+
 .inline-container > * {
-    vertical-align:middle;
+    vertical-align: middle;
 }
 
 .heading-card-adoption-notice {
@@ -796,7 +829,7 @@ a.btn, a.btn2, a.nav-link {
 }
 
 @media (max-width: 920px) {
-    .detail-adoption-notice-header h1 {
+    .detail-adoption-notice-header .inline-container {
         width: 100%;
     }
 

src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html

@@ -37,18 +37,20 @@
         {% endif %}
     </div>
     <div class="table-adoption-notice-info">
-        <table>
+        <table class="responsive">
+            <thead>
             <tr>
-                <th>{% translate "Ort" %}</th>
+                <td>{% translate "Ort" %}</td>
                 {% if adoption_notice.organization %}
-                    <th>{% translate "Organisation" %}</th>
+                    <td>{% translate "Organisation" %}</td>
                 {% endif %}
-                <th>{% translate "Suchen seit" %}</th>
-                <th>{% translate "Zuletzt aktualisiert" %}</th>
-                <th>{% translate "Weitere Informationen" %}</th>
+                <td>{% translate "Suchen seit" %}</td>
+                <td>{% translate "Zuletzt aktualisiert" %}</td>
+                <td>{% translate "Weitere Informationen" %}</td>
             </tr>
+            </thead>
             <tr>
-                <td>
+                <td data-label="{% trans 'Ort' %} ">
                     {% if adoption_notice.location %}
                         {{ adoption_notice.location }}
                     {% else %}
@@ -56,7 +58,7 @@
                     {% endif %}
                 </td>
                 {% if adoption_notice.organization %}
-                    <td>
+                    <td data-label="{% trans 'Organisation' %}">
                         <div>
                             <a href="{{ adoption_notice.organization.get_absolute_url }}">{{ adoption_notice.organization }}</a>
                             {% if adoption_notice.organization.trusted %}
@@ -73,10 +75,11 @@
 
                 {% endif %}
 
-                <td>{{ adoption_notice.searching_since }}</td>
-                <td>{{ adoption_notice.last_checked | date:'d. F Y' }}</td>
+                <td data-label="{% trans 'Suchen seit' %}">{{ adoption_notice.searching_since }}</td>
+                <td data-label="{% trans 'Zuletzt aktualisiert' %}">
+                    {{ adoption_notice.last_checked | date:'d. F Y' }}</td>
+                <td data-label="{% trans 'Weitere Informationen' %}">
                     {% if adoption_notice.further_information %}
-                    <td>
                         <form method="get" action="{% url 'external-site' %}">
                             <input type="hidden" name="url" value="{{ adoption_notice.further_information }}">
                             <button class="btn" type="submit" id="submit">
@@ -84,10 +87,10 @@
                                     class="fa-solid fa-arrow-up-right-from-square"></i>
                             </button>
                         </form>
-                    </td>
                     {% else %}
-                    <td>-</td>
+                        -
                     {% endif %}
+                </td>
             </tr>
         </table>
     </div>