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

feat(ui): spacious flat desktop tables with accent hover

Browse source 
- Remove bordered card wrapper from table sections on desktop
- Strip thead background, rely on typography for header distinction
- Increase cell vertical padding from 0.75rem to 1rem
- Add white row backgrounds with explicit horizontal borders
- Add accent-tinted hover with left bar indicator
- Float pagination below table as un-bordered footer
- Shrink pagination prev/next to compact card-style buttons
This commit is contained in:
Jon Seager 2026-02-06 13:57:27 +00:00
parent f8ffb37110
commit f31f87d4e1
No known key found for this signature in database
2 changed files with 65 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
static/css/input.css
View file

@ -503,4 +503,67 @@ a {
.timeline-item + .timeline-item {
margin-top: -4rem;
}
/* ── Spacious flat tables ─────────────────────────────────────── */
/* Strip card wrapper */
section:has(.responsive-table) {
border: none;
border-radius: 0;
background-color: transparent;
}
/* Search header: remove border, tighten spacing */
section:has(.responsive-table) > div:first-child:has(input[type="search"]) {
border-bottom: none;
padding-top: 0;
padding-bottom: 0.75rem;
}
/* Flat thead: typography-only distinction */
.responsive-table thead {
background-color: transparent;
}
/* Remove thead/tbody divider from divide-y on <table> */
.responsive-table {
border-color: transparent;
}
/* Spacious cells */
.responsive-table th,
.responsive-table td {
padding-top: 1rem;
padding-bottom: 1rem;
}
/* Row background: lift rows off the page */
.responsive-table tbody > tr {
background-color: var(--surface);
border-color: var(--border);
border-top-width: 1px;
}
.responsive-table tbody > tr:last-child {
border-bottom-width: 1px;
}
/* Hover: accent tint + left bar */
.responsive-table tbody > tr:not(.detail-row):hover {
background-color: var(--accent-subtle);
box-shadow: inset 3px 0 0 var(--accent);
}
/* Detail row: keep compact */
.responsive-table .detail-row td {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Pagination floats below as footer */
section:has(.responsive-table) .pagination-controls {
border-top: none;
padding-top: 0.75rem;
padding-bottom: 0;
}
}

4
templates/partials/lists/table.html
View file

@ -24,7 +24,7 @@
<div class="flex items-center gap-2">
<button
type="button"
class="inline-flex items-center gap-1 rounded-full border px-3 py-1 font-semibold transition hover:text-accent hover:border-accent disabled:cursor-not-allowed disabled:opacity-40"
class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition hover:border-accent hover:text-accent disabled:cursor-not-allowed disabled:opacity-40"
{% if items.has_previous() %}
data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.previous_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.previous_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
{% else %}
@ -43,7 +43,7 @@
{% endif %}
<button
type="button"
class="inline-flex items-center gap-1 rounded-full border px-3 py-1 font-semibold transition hover:text-accent hover:border-accent disabled:cursor-not-allowed disabled:opacity-40"
class="inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-semibold transition hover:border-accent hover:text-accent disabled:cursor-not-allowed disabled:opacity-40"
{% if items.has_next() %}
data-on:click="history.pushState(null, '', '{{ navigator.page_href(items.next_page().unwrap())|safe }}'); @get('{{ navigator.fragment_page_href(items.next_page().unwrap())|safe }}', {responseOverrides: {selector: '{{ target_selector }}', mode: 'replace'}})"
{% else %}