37cd595c93
Add text truncation with ellipsis to roast and roaster names in the recent brews and open bags cards to prevent layout inconsistency when titles wrap.
29 lines
1.3 KiB
HTML
29 lines
1.3 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
{% macro card(bag, is_authenticated) %}
|
|
<div id="bag-card-{{ bag.id }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 shadow-sm">
|
|
<div class="min-w-0">
|
|
<a href="/roasters/{{ bag.roaster_slug }}/roasts/{{ bag.roast_slug }}" class="block truncate font-semibold text-amber-800 hover:text-amber-600">{{ bag.roast_name }}</a>
|
|
<p class="truncate text-sm text-stone-500">{{ bag.roaster_name }}</p>
|
|
</div>
|
|
<p class="mt-2 text-sm text-stone-600">
|
|
<span class="font-medium">{{ bag.remaining }}g</span>
|
|
<span class="text-stone-400">of {{ bag.amount }}g remaining</span>
|
|
</p>
|
|
{% if is_authenticated %}
|
|
<div class="mt-3 pt-3 border-t border-amber-100 flex gap-3">
|
|
<a href="/brews?bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-amber-700 hover:text-amber-500">
|
|
{% call icons::plus_circle("h-4 w-4") %}
|
|
Brew
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-1 text-sm font-medium text-stone-500 hover:text-stone-700"
|
|
onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
|
|
>
|
|
{% call icons::x_circle("h-4 w-4") %}
|
|
Close
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|