moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(templates): wrap flag and country in span for correct mobile flex layout

Browse source 
The flag emoji and country name were separate flex items inside mobile
card td cells, causing the flag to float away from the country text.
Wrapping them in a single span keeps them together as one flex item.
This commit is contained in:
Jon Seager 2026-02-09 20:20:12 +00:00
parent b00d235eee
commit 2473e1f377
No known key found for this signature in database
5 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/pages/roaster.html
View file

@ -33,9 +33,11 @@
<div> <div>
<dt class="text-text-muted">Country</dt> <dt class="text-text-muted">Country</dt>
<dd class="font-medium text-text"> <dd class="font-medium text-text">
{% if !roaster.country_flag.is_empty() %} <span
<span class="mr-1">{{ roaster.country_flag }}</span> >{% if !roaster.country_flag.is_empty() %}
{% endif %}{{ roaster.country }} <span class="mr-1">{{ roaster.country_flag }}</span>
{% endif %}{{ roaster.country }}</span
>
</dd> </dd>
</div> </div>
{% if let Some(c) = roaster.city %} {% if let Some(c) = roaster.city %}

16
templates/partials/detail_cards.html
View file

@ -62,9 +62,11 @@
<div> <div>
<dt class="text-text-muted">Origin</dt> <dt class="text-text-muted">Origin</dt>
<dd class="font-medium text-text"> <dd class="font-medium text-text">
{% if !origin_flag.is_empty() %} <span
<span class="mr-1">{{ origin_flag }}</span> >{% if !origin_flag.is_empty() %}
{% endif %}{{ origin }} <span class="mr-1">{{ origin_flag }}</span>
{% endif %}{{ origin }}</span
>
</dd> </dd>
</div> </div>
{% endif %} {% endif %}
@ -204,9 +206,11 @@
<div> <div>
<dt class="text-text-muted">Country</dt> <dt class="text-text-muted">Country</dt>
<dd class="font-medium text-text"> <dd class="font-medium text-text">
{% if !country_flag.is_empty() %} <span
<span class="mr-1">{{ country_flag }}</span> >{% if !country_flag.is_empty() %}
{% endif %}{{ country }} <span class="mr-1">{{ country_flag }}</span>
{% endif %}{{ country }}</span
>
</dd> </dd>
</div> </div>
{% if let Some(c) = city %} {% if let Some(c) = city %}

16
templates/partials/lists/cafe_list.html
View file

@ -71,9 +71,11 @@
data-label="Location" data-label="Location"
class="px-4 py-3 whitespace-nowrap md:hidden" class="px-4 py-3 whitespace-nowrap md:hidden"
> >
{% if !cafe.country_flag.is_empty() %} <span
<span class="mr-1">{{ cafe.country_flag }}</span> >{% if !cafe.country_flag.is_empty() %}
{% endif %}{{ cafe.country }} <span class="mr-1">{{ cafe.country_flag }}</span>
{% endif %}{{ cafe.country }}</span
>
</td> </td>
<td <td
data-label="City" data-label="City"
@ -85,9 +87,11 @@
data-label="Country" data-label="Country"
class="mobile-hidden px-4 py-3 whitespace-nowrap" class="mobile-hidden px-4 py-3 whitespace-nowrap"
> >
{% if !cafe.country_flag.is_empty() %} <span
<span class="mr-1">{{ cafe.country_flag }}</span> >{% if !cafe.country_flag.is_empty() %}
{% endif %}{{ cafe.country }} <span class="mr-1">{{ cafe.country_flag }}</span>
{% endif %}{{ cafe.country }}</span
>
</td> </td>
<td <td
data-label="City" data-label="City"

8
templates/partials/lists/roast_list.html
View file

@ -75,9 +75,11 @@
{{ roast.roaster_label }} {{ roast.roaster_label }}
</td> </td>
<td data-label="Origin" class="px-4 py-3 whitespace-nowrap"> <td data-label="Origin" class="px-4 py-3 whitespace-nowrap">
{% if !roast.origin_flag.is_empty() %} <span
<span class="mr-1">{{ roast.origin_flag }}</span> >{% if !roast.origin_flag.is_empty() %}
{% endif %}{{ roast.origin }} <span class="mr-1">{{ roast.origin_flag }}</span>
{% endif %}{{ roast.origin }}</span
>
{% if !roast.producer.is_empty() %} {% if !roast.producer.is_empty() %}
<div class="hidden md:block text-xs text-text-muted"> <div class="hidden md:block text-xs text-text-muted">
{{ roast.producer }} {{ roast.producer }}

16
templates/partials/lists/roaster_list.html
View file

@ -71,9 +71,11 @@
data-label="Location" data-label="Location"
class="px-4 py-3 whitespace-nowrap md:hidden" class="px-4 py-3 whitespace-nowrap md:hidden"
> >
{% if !roaster.country_flag.is_empty() %} <span
<span class="mr-1">{{ roaster.country_flag }}</span> >{% if !roaster.country_flag.is_empty() %}
{% endif %}{{ roaster.country }} <span class="mr-1">{{ roaster.country_flag }}</span>
{% endif %}{{ roaster.country }}</span
>
</td> </td>
{% if !roaster.city.is_empty() %} {% if !roaster.city.is_empty() %}
<td <td
@ -87,9 +89,11 @@
data-label="Country" data-label="Country"
class="mobile-hidden px-4 py-3 whitespace-nowrap" class="mobile-hidden px-4 py-3 whitespace-nowrap"
> >
{% if !roaster.country_flag.is_empty() %} <span
<span class="mr-1">{{ roaster.country_flag }}</span> >{% if !roaster.country_flag.is_empty() %}
{% endif %}{{ roaster.country }} <span class="mr-1">{{ roaster.country_flag }}</span>
{% endif %}{{ roaster.country }}</span
>
</td> </td>
<td <td
data-label="City" data-label="City"