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

style(tables): remove small-caps from headers and simplify bag status

Browse source 
- Replace small-caps + tracking-wide thead with plain text-text-secondary
  across all 7 list tables
- Bag status: widen progress bar to fill cell, use thicker bar on desktop
- Bag status: replace pill with plain text for "Closed"
- Bag status: use text-xs instead of small-caps for amount labels
This commit is contained in:
Jon Seager 2026-02-08 09:56:59 +00:00
parent 6321fcc3e5
commit 6245a2a42d
No known key found for this signature in database
7 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
templates/partials/lists/bag_list.html
View file

@ -21,7 +21,7 @@
{{ table::search_header(navigator, "#bag-list") }}
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#bag-list") }}
{{ table::sortable_header("Roaster", "roaster", navigator, "#bag-list") }}
@ -50,13 +50,13 @@
</td>
<td data-label="Status" class="mobile-hidden px-4 py-3 whitespace-nowrap">
{% if bag.closed %}
<span class="pill pill-warning">Closed</span>
<span class="text-text-muted">Closed</span>
{% else %}
<div class="w-14">
<div class="h-1.5 rounded-full bg-surface-alt overflow-hidden">
<div>
<div class="h-2.5 rounded-full bg-surface-alt overflow-hidden">
<div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
</div>
<div class="mt-0.5 text-text-muted small-caps" style="font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</div>
<div class="mt-0.5 text-xs text-text-muted">{{ bag.remaining }} / {{ bag.amount }}g</div>
</div>
{% endif %}
</td>
@ -65,7 +65,7 @@
<div class="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>
<div class="mt-0.5 text-right text-text-muted small-caps" style="font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</div>
<div class="mt-0.5 text-right text-xs text-text-muted">{{ bag.remaining }} / {{ bag.amount }}g</div>
</td>
{% endif %}
<td data-label="Finished" class="mobile-hidden whitespace-nowrap px-4 py-3 font-medium text-text-secondary">
@ -97,7 +97,7 @@
<div class="inline-flex items-center gap-2">
<span class="md:hidden">
{% if bag.closed %}
<span class="pill pill-warning text-[0.625rem] py-0 px-1.5">Closed</span>
<span class="text-text-muted">Closed</span>
{% endif %}
</span>
<button type="button"

2
templates/partials/lists/brew_list.html
View file

@ -36,7 +36,7 @@
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#brew-list") }}
<th scope="col" class="px-4 py-3">Coffee</th>

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

@ -21,7 +21,7 @@
{{ table::search_header(navigator, "#cafe-list") }}
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#cafe-list") }}
{{ table::sortable_header("Name", "name", navigator, "#cafe-list") }}

2
templates/partials/lists/cup_list.html
View file

@ -21,7 +21,7 @@
{{ table::search_header(navigator, "#cup-list") }}
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#cup-list") }}
{{ table::sortable_header("Roast", "roast", navigator, "#cup-list") }}

2
templates/partials/lists/gear_list.html
View file

@ -22,7 +22,7 @@
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#gear-list") }}
{{ table::sortable_header("Category", "category", navigator, "#gear-list") }}

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

@ -21,7 +21,7 @@
{{ table::search_header(navigator, "#roast-list") }}
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#roast-list") }}
{{ table::sortable_header("Roast", "name", navigator, "#roast-list") }}

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

@ -21,7 +21,7 @@
{{ table::search_header(navigator, "#roaster-list") }}
<div class="overflow-x-auto">
<table class="responsive-table min-w-full divide-y text-left text-sm text-text">
<thead class="bg-surface-alt text-xs font-semibold tracking-wide text-text small-caps">
<thead class="bg-surface-alt text-xs font-semibold text-text-secondary">
<tr>
{{ table::sortable_header("Added", "created-at", navigator, "#roaster-list") }}
{{ table::sortable_header("Name", "name", navigator, "#roaster-list") }}