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

6
templates/pages/roaster.html
View file

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

12
templates/partials/detail_cards.html
View file

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

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

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

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

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

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

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