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

feat(roasters): consolidate table columns and restyle actions

Browse source 
- Combine Country/City into Location column with city as desktop subtext
- Add City as separate mobile-only field for card layout
- Move homepage icon into Actions column alongside delete button
- Remove bordered style from homepage icon to match other action icons
This commit is contained in:
Jon Seager 2026-02-03 12:45:46 +00:00
parent 39598c1709
commit 8213543ed3
No known key found for this signature in database
1 changed files with 52 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
templates/partials/roaster_list.html
View file

@ -18,15 +18,11 @@
<table class="responsive-table min-w-full divide-y divide-amber-200 text-left text-sm text-stone-700">
<thead class="bg-amber-200/60 text-xs font-semibold tracking-wide text-amber-900">
<tr>
{% call table::sortable_header("Added", "created-at", navigator, "#roaster-list") %} {%
call table::sortable_header("Name", "name", navigator, "#roaster-list") %} {% call
table::sortable_header("Country", "country", navigator, "#roaster-list") %} {% call
table::sortable_header("City", "city", navigator, "#roaster-list") %}
<th scope="col" class="px-4 py-3">Homepage</th>
{% call table::sortable_header("Added", "created-at", navigator, "#roaster-list") %}
{% call table::sortable_header("Name", "name", navigator, "#roaster-list") %}
{% call table::sortable_header("Location", "country", navigator, "#roaster-list") %}
<th scope="col" class="px-4 py-3">Notes</th>
{% if is_authenticated %}
<th scope="col" class="px-4 py-3 text-right">Actions</th>
{% endif %}
</tr>
</thead>
<tbody class="divide-y divide-amber-200/70">
@ -49,17 +45,27 @@
>{{ roaster.name }}</a
>
</td>
<td data-label="Country" class="px-4 py-3 whitespace-nowrap">{{ roaster.country }}</td>
<td data-label="City" class="px-4 py-3 whitespace-nowrap">{{ roaster.city }}</td>
<td data-label="Homepage" class="mobile-hidden px-4 py-3">
<td data-label="Location" class="px-4 py-3 whitespace-nowrap">
{{ roaster.country }}
{% if !roaster.city.is_empty() %}
<div class="hidden md:block text-xs text-stone-500">{{ roaster.city }}</div>
{% endif %}
</td>
{% if !roaster.city.is_empty() %}
<td data-label="City" class="px-4 py-3 whitespace-nowrap md:hidden">{{ roaster.city }}</td>
{% endif %}
<td data-label="Notes" class="mobile-hidden px-4 py-3 text-sm text-stone-600">{{ roaster.notes }}</td>
<td data-label="" class="px-4 py-3 text-right">
<div class="inline-flex items-center gap-1">
{% if roaster.has_homepage %}
<a
class="inline-flex items-center justify-center rounded-md border border-amber-400 bg-amber-200/50 p-2 text-amber-800 transition hover:border-amber-500 hover:text-amber-900"
class="hidden md:inline-flex h-8 w-8 items-center justify-center rounded-md text-stone-500 transition hover:text-amber-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
href="{{ roaster.homepage_url }}"
target="_blank"
rel="noreferrer noopener"
aria-label="Visit {{ roaster.name }} homepage"
title="Visit homepage"
>
<span class="sr-only">Visit {{ roaster.name }} homepage</span>
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path
fill-rule="evenodd"
@ -71,13 +77,8 @@
/>
</svg>
</a>
{% else %}
<span class="text-stone-400">&mdash;</span>
{% endif %}
</td>
<td data-label="Notes" class="mobile-hidden px-4 py-3 text-sm text-stone-600">{{ roaster.notes }}</td>
{% if is_authenticated %}
<td data-label="" class="px-4 py-3 text-right">
<button
type="button"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-stone-500 transition hover:text-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
@ -93,8 +94,9 @@
/>
</svg>
</button>
</td>
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>