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:
@@ -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 != "" {
|
||||
|
||||
Reference in New Issue
Block a user