feat: Restyle using a proper container to group elements and not just put them in the heading

This commit is contained in:
moanos [he/him] 2025-01-03 19:04:32 +01:00
parent 1f3c3ecaef
commit 28772e1f74
2 changed files with 10 additions and 5 deletions

View File

@ -758,14 +758,19 @@ a.btn, a.btn2, a.nav-link {
.adoption-card-report-link, .notification-card-mark-read { .adoption-card-report-link, .notification-card-mark-read {
margin-left: auto; margin-left: auto;
font-size: 2rem; font-size: 2rem;
padding: 10px;
width: 15%;
} }
.notification-card-mark-read { .notification-card-mark-read {
display: inline; display: inline;
} }
.inline-container {
display: inline-block;
}
.inline-container > *:first-child {
vertical-align:middle;
}
.heading-card-adoption-notice { .heading-card-adoption-notice {
word-wrap: anywhere; word-wrap: anywhere;
width: 80%; width: 80%;
@ -783,7 +788,6 @@ a.btn, a.btn2, a.nav-link {
} }
.detail-adoption-notice-header h1 { .detail-adoption-notice-header h1 {
width: 50%;
display: inline-block; display: inline-block;
} }

View File

@ -6,7 +6,8 @@
{% block content %} {% block content %}
<div class="detail-adoption-notice-header"> <div class="detail-adoption-notice-header">
<h1 class="detail-adoption-notice-header">{{ adoption_notice.name }} <div class="inline-container">
<h1 class="detail-adoption-notice-header">{{ adoption_notice.name }}</h1>
{% if not is_subscribed %} {% if not is_subscribed %}
<div class="tooltip bottom"> <div class="tooltip bottom">
<form class="notification-card-mark-read" method="post"> <form class="notification-card-mark-read" method="post">
@ -27,7 +28,7 @@
<button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell-slash"></i></button> <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell-slash"></i></button>
</form> </form>
{% endif %} {% endif %}
</h1> </div>
{% if has_edit_permission %} {% if has_edit_permission %}
<a class="btn2" <a class="btn2"
href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">{% translate 'Foto hinzufügen' %}</a> href="{% url 'adoption-notice-add-photo' adoption_notice_id=adoption_notice.pk %}">{% translate 'Foto hinzufügen' %}</a>