dcaac1ee9c
- Add used_percent field to BagView computed from amount/remaining - Display accent-colored progress bar on homepage bag cards - Replace Open pill with progress bar in bag data table (desktop and mobile) - Merge Weight column into Status column showing remaining/total - Add full-width progress bar to mobile card view for open bags - Sort Status column by remaining grams (closed bags treated as 10000g) - Hide Finished field on mobile for open bags - Use small-caps typography for remaining text labels
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 bg-surface p-4">
|
|
<div class="min-w-0">
|
|
<span class="block truncate font-semibold text-text">{{ bag.roast_name }}</span>
|
|
<p class="truncate text-sm text-text-muted">{{ bag.roaster_name }}</p>
|
|
</div>
|
|
<div class="mt-2 h-1.5 rounded-full bg-surface-alt overflow-hidden">
|
|
<div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
|
|
</div>
|
|
<p class="mt-1 truncate text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
|
|
{% if is_authenticated %}
|
|
<div class="mt-3 pt-3 border-t flex gap-3">
|
|
<a href="/add?type=brew&bag_id={{ bag.id }}" class="inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover">
|
|
{% 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-text-muted hover:text-text"
|
|
onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
|
|
>
|
|
{% call icons::x_circle("h-4 w-4") %}
|
|
Close
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|