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

feat: Add tooltip explaining the meaning of the checkmark

Browse Source
This commit is contained in:
moanos [he/him] 2025-01-03 11:18:10 +01:00
parent 9fec95bd2e
commit fe9352e628
2 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -222,7 +222,7 @@ a.btn, a.btn2, a.nav-link {
position: relative;
left: 0.2rem;
bottom: 0.075rem;
background-color: var(--primary-dark-one);
background-color: var(--primary-light-one);
color: var(--secondary-light-one);
border-radius: 0.5rem;
width: 1.5rem;
@ -287,6 +287,45 @@ a.btn, a.btn2, a.nav-link {
top: 2px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: var(--primary-dark-one);
color: var(--secondary-light-one);
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--primary-dark-one) transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
/*********************/
/* UNIQUE COMPONENTS */
/*********************/

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

@ -54,9 +54,14 @@
<div>
<a href="{{ adoption_notice.organization.get_absolute_url }}">{{ adoption_notice.organization }}</a>
{% if adoption_notice.organization.trusted %}
<div class="tooltip">
<div class="checkmark"><i class="fa-solid fa-check"></i></div>
<span class="tooltiptext">
{% translate 'Diese Organisation kennt sich mit Ratten aus und achtet auf gute Abgabebedingungen' %}
</span>
{% endif %}
</div>
</div>
</td>
{% endif %}