Roll out refined-minimal styling and product thumbnails across pages

Apply the dashboard's refined direction to the rest of the app:
- Items: page-title header, product thumbnail (best-price image) beside
  each item name via the shared thumbSm component.
- Results: refined headers; per-item and global tables get standardized
  thumbnails (global table gains a thumbnail column).
- Settings: page-title + subtitle, section headings restyled.
- Item form: page-title header.
- Shared: thumbSm component + compact thumbnail CSS variant.
This commit is contained in:
prosolis
2026-06-20 12:47:13 -07:00
parent 9a7f8b47a3
commit 3760571d84
12 changed files with 686 additions and 599 deletions

View File

@@ -85,9 +85,9 @@ templ itemResultsBody(d ItemResultsData) {
@endingSoonStrip(d.EndingSoon)
<div class="flex items-start justify-between mb-4">
<div>
<h1 class="text-3xl font-semibold">{ d.Item.Name }</h1>
<h1 class="v-page-title">{ d.Item.Name }</h1>
if d.Item.Category != "" {
<div class="v-muted">{ d.Item.Category }</div>
<div class="v-page-sub">{ d.Item.Category }</div>
}
</div>
<div class="text-right">
@@ -121,7 +121,7 @@ templ itemResultsBody(d ItemResultsData) {
</div>
<div class="v-card p-5 mb-6">
<h2 class="font-semibold mb-3">Price History</h2>
<h2 class="v-section-title mb-3">Price History</h2>
if len(d.History) < 2 {
<div class="v-muted">Not enough history yet.</div>
} else {
@@ -171,11 +171,7 @@ templ ItemResultsTable(d ItemResultsData) {
<tbody>
for _, r := range d.Results {
<tr>
<td>
if r.ImageURL != "" {
<img src={ r.ImageURL } alt="" class="w-10 h-10 object-cover rounded-sm"/>
}
</td>
<td>@thumbSm(r.ImageURL)</td>
<td>
if r.URL != "" {
<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener">{ r.Title }</a>
@@ -239,7 +235,8 @@ templ ItemResults(d ItemResultsData) {
templ globalResultsBody(d GlobalResultsData) {
<div>
<h1 class="text-3xl font-semibold mb-6">All Results</h1>
<h1 class="v-page-title mb-1">All results</h1>
<p class="v-page-sub mb-6">Every listing Veola has found</p>
@endingSoonStrip(d.EndingSoon)
<form method="get" action="/results" class="flex items-end gap-3 mb-4">
<div>
@@ -264,11 +261,12 @@ templ globalResultsBody(d GlobalResultsData) {
<div class="v-card p-0 overflow-hidden">
<table class="v-table">
<thead>
<tr><th>Item</th><th>Title</th><th>Price</th><th>Store</th><th>Ends</th><th>Found</th><th>Alert</th></tr>
<tr><th></th><th>Item</th><th>Title</th><th>Price</th><th>Store</th><th>Ends</th><th>Found</th><th>Alert</th></tr>
</thead>
<tbody>
for _, r := range d.Results {
<tr>
<td>@thumbSm(r.ImageURL)</td>
<td><a href={ templ.SafeURL(fmt.Sprintf("/items/%d/results", r.ItemID)) }>{ r.ItemName }</a></td>
<td>
if r.URL != "" {