drwily/veola
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine item form and preview

Browse Source 
- Item form: subtitle + fields grouped into hairline-separated labeled
  sections (Basics / Alerts / Schedule and marketplaces / Filters /
  Advanced) instead of one flat card; refined Advanced summary.
- Preview: refined headings; best-price hero keeps a 160px product image;
  Other results becomes a thumbnailed feed via the shared components.
- New .v-form-section-title helper.
This commit is contained in:
prosolis
2026-06-20 12:52:25 -07:00
parent 3760571d84
commit 90a74967e0
6 changed files with 209 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
templates/item_preview.templ
View File

@@ -58,7 +58,7 @@ templ ItemPreview(d PreviewData) {
} else {
<div class="v-card p-5">
<div class="flex items-center justify-between mb-4">
<h2 class="font-semibold">
<h2 class="v-section-title">
{ fmt.Sprintf("Found %d results for '%s'", len(d.Results), d.Form.SearchQuery) }
if d.Cached {
<span class="v-pill v-pill-paused ml-2">cached</span>
@@ -67,20 +67,18 @@ templ ItemPreview(d PreviewData) {
</div>
@previewBest(d)
if len(d.Results) > 1 {
<div class="mt-5">
<div class="v-muted text-xs uppercase tracking-wide mb-2">Other results</div>
<ul class="space-y-2">
<div class="mt-6">
<div class="v-form-section-title mb-3">Other results</div>
<ul class="v-feed">
for i, r := range d.Results {
if i != d.BestIndex && i < d.BestIndex+6 {
<li class="flex items-center gap-3">
if r.ImageURL != "" {
<img src={ r.ImageURL } alt="" class="w-10 h-10 object-cover rounded-sm"/>
}
<div class="flex-1 truncate">
<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener" class="text-sm">{ r.Title }</a>
<div class="v-muted text-xs">{ r.Store }</div>
<li class="v-feed-row">
@thumbSm(r.ImageURL)
<div class="min-w-0 flex-1">
<a href={ templ.SafeURL(r.URL) } target="_blank" rel="noopener" class="v-feed-name truncate">{ r.Title }</a>
<div class="v-feed-meta truncate">{ r.Store }</div>
</div>
<div class="font-mono">{ fmtNumber(r.Price, r.Currency) }</div>
<div class="font-mono v-feed-price">{ fmtNumber(r.Price, r.Currency) }</div>
</li>
}
}
@@ -103,12 +101,12 @@ templ previewBest(d PreviewData) {
if d.BestIndex >= 0 && d.BestIndex < len(d.Results) {
<div class="grid md:grid-cols-[160px_1fr] gap-4 items-start">
if d.Results[d.BestIndex].ImageURL != "" {
<img src={ d.Results[d.BestIndex].ImageURL } alt="" class="rounded-sm w-40 h-40 object-cover"/>
<img src={ d.Results[d.BestIndex].ImageURL } alt="" loading="lazy" referrerpolicy="no-referrer" class="w-40 h-40 object-cover rounded-lg border border-white/10"/>
} else {
<div class="rounded-sm w-40 h-40 bg-black/30"></div>
<div class="w-40 h-40 rounded-lg border border-white/10 bg-black/20"></div>
}
<div>
<div class="text-xs v-price-deal uppercase tracking-wide mb-1">Best Price</div>
<div class="v-metric-label v-price-deal mb-1">Best price</div>
<div class="font-mono text-3xl mb-2">{ fmtNumber(d.Results[d.BestIndex].Price, d.Currency) }</div>
<a class="font-semibold" href={ templ.SafeURL(d.Results[d.BestIndex].URL) } target="_blank" rel="noopener">{ d.Results[d.BestIndex].Title }</a>
<div class="v-muted text-sm mt-1">{ d.Results[d.BestIndex].Store }</div>