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

feat: Make table in adoption notice responsive

Browse Source
This commit is contained in:
moanos [he/him] 2025-01-03 22:04:19 +01:00
parent b1e092769f
commit a75cacea66
2 changed files with 59 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -37,12 +37,44 @@ body {
} }
a {
color: inherit;
}
table { table {
width: 100%; width: 100%;
} }
a { @media screen and (max-width: 600px) {
color: inherit; .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 { table {
@ -64,7 +96,7 @@ td {
padding: 5px; padding: 5px;
} }
th { thead td {
border: 3px solid black; border: 3px solid black;
border-collapse: collapse; border-collapse: collapse;
padding: 8px; padding: 8px;
@ -357,12 +389,12 @@ a.btn, a.btn2, a.nav-link {
} }
.tooltip:not(.top) .tooltiptext { .tooltip:not(.top) .tooltiptext {
bottom: auto; bottom: auto;
} }
.tooltip:not(.top) .tooltiptext::before { .tooltip:not(.top) .tooltiptext::before {
top: auto; top: auto;
} }
@ -767,8 +799,9 @@ a.btn, a.btn2, a.nav-link {
.inline-container { .inline-container {
display: inline-block; display: inline-block;
} }
.inline-container > * { .inline-container > * {
vertical-align:middle; vertical-align: middle;
} }
.heading-card-adoption-notice { .heading-card-adoption-notice {
@ -796,7 +829,7 @@ a.btn, a.btn2, a.nav-link {
} }
@media (max-width: 920px) { @media (max-width: 920px) {
.detail-adoption-notice-header h1 { .detail-adoption-notice-header .inline-container {
width: 100%; width: 100%;
} }

35
src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html
View File

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