Fix info-row img not being scaled correctly (#5173)

* Fix info-row img not being scaled correctly

* improve centering when fully colored img-icon is used
This commit is contained in:
Richard Schreiber
2025-05-28 11:44:58 +02:00
committed by GitHub
parent 5fb1fc23ce
commit 72b39932b7
2 changed files with 11 additions and 8 deletions

View File

@@ -4,7 +4,7 @@
{% if ev.location and show_location %} {% if ev.location and show_location %}
<div class="info-row"> <div class="info-row">
<div class="info-row-icon" role="img" aria-label="{% trans "Where does the event happen?" %}"> <div class="info-row-icon" role="img" aria-label="{% trans "Where does the event happen?" %}">
{% icon "map-marker fa-fw" %} {% icon "map-marker" %}
</div> </div>
<p> <p>
{{ ev.location|linebreaksbr }} {{ ev.location|linebreaksbr }}
@@ -14,7 +14,7 @@
{% if ev.settings.show_dates_on_frontpage %} {% if ev.settings.show_dates_on_frontpage %}
<div class="info-row"> <div class="info-row">
<div class="info-row-icon" role="img" aria-label="{% trans "When does the event happen?" %}"> <div class="info-row-icon" role="img" aria-label="{% trans "When does the event happen?" %}">
{% icon "clock-o fa-fw" %} {% icon "clock-o" %}
</div> </div>
<p> <p>
{{ ev.get_date_range_display_as_html }} {{ ev.get_date_range_display_as_html }}

View File

@@ -295,18 +295,21 @@ a:hover .panel-primary > .panel-heading {
min-height: 30px; min-height: 30px;
margin-bottom: 10px; margin-bottom: 10px;
.info-row-icon { .info-row-icon,
& > img {
position: absolute; position: absolute;
top: -5px; top: -6px;
left: 0; left: 3px;
font-size: 26px; font-size: 26px;
text-align: center;
color: $brand-primary; color: $brand-primary;
margin-top: 3px; margin-top: 3px;
width: 26px; width: 26px;
height: auto; height: auto;
.fa { }
vertical-align: top; .info-row-icon .fa {
} vertical-align: top;
width: auto;
} }
p { p {
margin-left: 40px; margin-left: 40px;