feat: Add tooltip to report link

This commit is contained in:
moanos [he/him] 2025-01-09 06:30:22 +01:00
parent da51007b77
commit 907ed583cd
2 changed files with 33 additions and 25 deletions

View File

@ -740,7 +740,7 @@ a.btn, a.btn2, a.nav-link {
.header-card-adoption-notice { .header-card-adoption-notice {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -802,6 +802,11 @@ a.btn, a.btn2, a.nav-link {
font-size: 2rem; font-size: 2rem;
} }
.adoption-card-report-link {
margin-right: 12px;
}
.notification-card-mark-read { .notification-card-mark-read {
display: inline; display: inline;
} }

View File

@ -2,31 +2,34 @@
{% load i18n %} {% load i18n %}
<div class="card"> <div class="card">
<div> <div class="header-card-adoption-notice">
<div class="header-card-adoption-notice"> <h2 class="heading-card-adoption-notice"><a
<h2 class="heading-card-adoption-notice"><a href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h2>
href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h2> <div class="tooltip bottom">
<a class="adoption-card-report-link" href="{{ adoption_notice.get_report_url }}"><i <a class="adoption-card-report-link" href="{{ adoption_notice.get_report_url }}"><i
class="fa-solid fa-flag"></i></a> class="fa-solid fa-flag"></i></a>
<span class="tooltiptext">
{% translate 'Melde diese Vermittlung an Moderator*innen' %}
</span>
</div> </div>
<p>
<b><i class="fa-solid fa-location-dot"></i></b>
{% if adoption_notice.location %}
{{ adoption_notice.location.str_hr }}
{% else %}
{{ adoption_notice.location_string }}
{% endif %}
</p>
<p>
{% if adoption_notice.description_short %}
{{ adoption_notice.description_short | render_markdown }}
{% endif %}
</p>
{% if adoption_notice.get_photo %}
<div class="adoption-notice-img img-small">
<img src="{{ MEDIA_URL }}/{{ adoption_notice.get_photo.image }}"
alt="{{ adoption_notice.get_photo.alt_text }}">
</div>
{% endif %}
</div> </div>
<p>
<b><i class="fa-solid fa-location-dot"></i></b>
{% if adoption_notice.location %}
{{ adoption_notice.location.str_hr }}
{% else %}
{{ adoption_notice.location_string }}
{% endif %}
</p>
<p>
{% if adoption_notice.description_short %}
{{ adoption_notice.description_short | render_markdown }}
{% endif %}
</p>
{% if adoption_notice.get_photo %}
<div class="adoption-notice-img img-small">
<img src="{{ MEDIA_URL }}/{{ adoption_notice.get_photo.image }}"
alt="{{ adoption_notice.get_photo.alt_text }}">
</div>
{% endif %}
</div> </div>