Auction end times, visual flair, and pre-launch cleanup
Auction handling: - Capture itemEndDate from eBay Browse API and ending_date from ZenMarket (Yahoo JP); plumb through results.ends_at column. Permissive ZenMarket parser (multiple layouts, JST when offset missing). - Per-row "Ends" countdown column + "Ending soon" banner on results pages, live-ticked by flair.js with urgent/critical tinting under 1h/5m. - Backfill ends_at for known auctions when their URL reappears in a poll (dedup hit no longer drops the new end time). - Hide ended auctions from result listings by default via ResultsQuery.ExcludeEnded; rows stay in the DB. Visual flair: - Glassy backdrop-blur v-cards with gradient-mask borders and hover-lift. - htmx swap fade-in via transient .v-just-swapped class. - Count-up animation on dashboard stats. All animations gated behind prefers-reduced-motion. eBay condition + region filters (auctions-style scoping): - items.condition and items.region columns; threaded through item form, CreateItem/UpdateItem, scheduler eBay plan input, and previewKey so cache invalidates when these change. - ebay.SearchParams gains conditionIds and itemLocationCountry filters. Run Now reload + countdown engine: - Run Now now sets HX-Refresh: true (non-htmx fallback: 303 redirect) so the entire results view — best price, chart, badge, last polled — reflects the new poll, instead of swapping just one partial. Pre-launch hardening (P1 set): - auth.EqualizeLoginTiming on no-such-user branch. - (*App).serverError centralizes 500s; replaces err.Error() leaks across results/settings/items/users/dashboard handlers. - main.go server: ReadTimeout 30s / WriteTimeout 60s / IdleTimeout 120s alongside the existing ReadHeaderTimeout. - noListFS wrapper blocks static directory listings. - Credential fields in settings no longer render value=; blank submission preserves the saved value, with per-field "Saved in settings / Set in config.toml / Not set" status indicator. Misc: - -debug flag wires slog to LevelDebug; raw ZenMarket items logged for format diagnosis. - /healthz public endpoint for reverse-proxy probes. - deploy/veola.service systemd unit template (hardening flags, single ReadWritePaths=/var/lib/veola). - handlers_test.go covers /healthz, setup-gate redirect, auth gate, and /login render with httptest + in-memory sqlite. - best_price_currency on items; templates pick the right symbol per row. - .gitignore now excludes *.log / veola-debug.log. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
prosolis
@@ -26,16 +26,54 @@ a { color: var(--accent); }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.v-card {
|
||||
background: var(--surface);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(36, 58, 147, 0.82), rgba(31, 51, 128, 0.82));
|
||||
backdrop-filter: blur(10px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(10px) saturate(140%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
transition:
|
||||
transform 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
border-color 180ms ease;
|
||||
}
|
||||
.v-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(0, 164, 228, 0.65) 0%,
|
||||
rgba(245, 196, 0, 0.30) 45%,
|
||||
rgba(255, 255, 255, 0.04) 100%);
|
||||
-webkit-mask:
|
||||
linear-gradient(#000 0 0) content-box,
|
||||
linear-gradient(#000 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
.v-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 10px 28px rgba(0, 0, 80, 0.55),
|
||||
0 0 0 1px rgba(0, 164, 228, 0.30);
|
||||
}
|
||||
|
||||
.v-card-flat {
|
||||
background: var(--surface);
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(36, 58, 147, 0.70), rgba(31, 51, 128, 0.70));
|
||||
backdrop-filter: blur(8px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(8px) saturate(130%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.v-divider { border-top: 1px solid var(--border); }
|
||||
@@ -173,7 +211,9 @@ table.v-table td {
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
table.v-table tr:hover td { background: rgba(255,255,255,0.03); }
|
||||
table.v-table td { transition: background 140ms ease; }
|
||||
table.v-table tr { transition: transform 140ms ease; }
|
||||
table.v-table tbody tr:hover td { background: rgba(0, 164, 228, 0.08); }
|
||||
|
||||
.v-error-text { color: var(--danger); font-size: 0.85rem; }
|
||||
.v-muted { color: var(--text-2); }
|
||||
@@ -210,3 +250,64 @@ table.v-table tr:hover td { background: rgba(255,255,255,0.03); }
|
||||
.htmx-indicator { display: none; }
|
||||
.htmx-request .htmx-indicator,
|
||||
.htmx-request.htmx-indicator { display: inline-flex; }
|
||||
|
||||
/* flair.js adds .v-just-swapped to any htmx swap target for ~400ms, giving
|
||||
refreshed regions a soft fade-in instead of an abrupt content jump. */
|
||||
@keyframes v-fade-in-up {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.v-just-swapped { animation: v-fade-in-up 240ms ease-out; }
|
||||
|
||||
/* Ending-soon strip: one global "next auction to close" banner. flair.js
|
||||
keeps the countdown live. Subtle by default; pulses red when inside the
|
||||
last 5 minutes via .v-countdown-critical on the inner counter. */
|
||||
.v-ending-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 8px;
|
||||
background:
|
||||
linear-gradient(90deg, rgba(245, 196, 0, 0.12), rgba(0, 164, 228, 0.08));
|
||||
border: 1px solid rgba(245, 196, 0, 0.35);
|
||||
}
|
||||
.v-ending-label {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--yellow);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.v-ending-title { flex: 1; min-width: 0; }
|
||||
.v-ending-countdown {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
/* Per-row + strip countdown urgency states. Default reads as neutral muted
|
||||
text so 6-day countdowns don't shout; urgency tints kick in only when
|
||||
flair.js flips the class. */
|
||||
.v-countdown { color: var(--text-2); }
|
||||
.v-countdown-urgent { color: var(--yellow); font-weight: 600; }
|
||||
.v-countdown-critical {
|
||||
color: var(--danger);
|
||||
font-weight: 700;
|
||||
animation: v-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
.v-countdown-ended { color: var(--text-2); font-style: italic; }
|
||||
|
||||
@keyframes v-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.55; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.v-card { transition: none; }
|
||||
.v-card:hover { transform: none; }
|
||||
table.v-table td, table.v-table tr { transition: none; }
|
||||
.v-just-swapped { animation: none; }
|
||||
.v-countdown-critical { animation: none; }
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
130
static/js/flair.js
Normal file
130
static/js/flair.js
Normal file
@@ -0,0 +1,130 @@
|
||||
// Lightweight visual flourishes:
|
||||
// - count-up animation on [data-countup] elements at page load
|
||||
// - fade-in on htmx swap targets via a transient .v-just-swapped class
|
||||
// Respects prefers-reduced-motion by no-oping both effects.
|
||||
|
||||
(function () {
|
||||
const prefersReduced =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
function easeOutCubic(t) {
|
||||
return 1 - Math.pow(1 - t, 3);
|
||||
}
|
||||
|
||||
function animateCount(el) {
|
||||
if (prefersReduced) return;
|
||||
const raw = el.textContent.trim();
|
||||
const m = raw.match(/^(\$|£|€|¥)?(-?[\d,]+(?:\.\d+)?)$/);
|
||||
if (!m) return;
|
||||
const prefix = m[1] || "";
|
||||
const numeric = m[2].replace(/,/g, "");
|
||||
const target = parseFloat(numeric);
|
||||
if (!isFinite(target)) return;
|
||||
const decimals = numeric.includes(".") ? numeric.split(".")[1].length : 0;
|
||||
const format = (v) =>
|
||||
prefix + (decimals > 0 ? v.toFixed(decimals) : Math.floor(v).toString());
|
||||
const duration = 650;
|
||||
const start = performance.now();
|
||||
el.textContent = format(0);
|
||||
function tick(now) {
|
||||
const t = Math.min(1, (now - start) / duration);
|
||||
const v = target * easeOutCubic(t);
|
||||
el.textContent = format(v);
|
||||
if (t < 1) {
|
||||
requestAnimationFrame(tick);
|
||||
} else {
|
||||
el.textContent = format(target);
|
||||
}
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
function runCountUps() {
|
||||
document.querySelectorAll("[data-countup]").forEach(animateCount);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", runCountUps);
|
||||
} else {
|
||||
runCountUps();
|
||||
}
|
||||
|
||||
document.addEventListener("htmx:afterSwap", function (evt) {
|
||||
if (prefersReduced) return;
|
||||
const target = evt.detail && evt.detail.target;
|
||||
if (!target || !target.classList) return;
|
||||
target.classList.add("v-just-swapped");
|
||||
setTimeout(() => target.classList.remove("v-just-swapped"), 400);
|
||||
});
|
||||
|
||||
// Auction countdowns. Each [data-countdown] reads its sibling/ancestor's
|
||||
// data-ends-at ISO timestamp. Above 1h remaining we update once a minute
|
||||
// (text barely changes); inside the last hour we tick every second and tint
|
||||
// urgent / critical so the eye lands on it. Past the end we render "ended"
|
||||
// and stop ticking that node.
|
||||
function formatRemaining(ms) {
|
||||
if (ms <= 0) return { text: "ended", urgent: false, critical: false };
|
||||
const s = Math.floor(ms / 1000);
|
||||
const days = Math.floor(s / 86400);
|
||||
const hours = Math.floor((s % 86400) / 3600);
|
||||
const minutes = Math.floor((s % 3600) / 60);
|
||||
const seconds = s % 60;
|
||||
const urgent = ms < 60 * 60 * 1000;
|
||||
const critical = ms < 5 * 60 * 1000;
|
||||
let text;
|
||||
if (days > 0) text = days + "d " + hours + "h";
|
||||
else if (hours > 0) text = hours + "h " + minutes + "m";
|
||||
else if (minutes > 0) text = minutes + "m " + String(seconds).padStart(2, "0") + "s";
|
||||
else text = seconds + "s";
|
||||
return { text, urgent, critical };
|
||||
}
|
||||
|
||||
function resolveEndsAt(el) {
|
||||
let cur = el;
|
||||
while (cur && cur.dataset && !cur.dataset.endsAt) cur = cur.parentElement;
|
||||
return cur && cur.dataset ? cur.dataset.endsAt : null;
|
||||
}
|
||||
|
||||
function tickCountdown(el, endsAtMs) {
|
||||
const remaining = endsAtMs - Date.now();
|
||||
const f = formatRemaining(remaining);
|
||||
el.textContent = f.text;
|
||||
el.classList.toggle("v-countdown-urgent", f.urgent && !f.critical);
|
||||
el.classList.toggle("v-countdown-critical", f.critical && remaining > 0);
|
||||
el.classList.toggle("v-countdown-ended", remaining <= 0);
|
||||
return remaining;
|
||||
}
|
||||
|
||||
function startCountdowns() {
|
||||
document.querySelectorAll("[data-countdown]").forEach(function (el) {
|
||||
const iso = resolveEndsAt(el);
|
||||
if (!iso) return;
|
||||
const endsAtMs = Date.parse(iso);
|
||||
if (!isFinite(endsAtMs)) return;
|
||||
|
||||
let timer = null;
|
||||
function loop() {
|
||||
const remaining = tickCountdown(el, endsAtMs);
|
||||
if (remaining <= 0) {
|
||||
if (timer) clearTimeout(timer);
|
||||
return;
|
||||
}
|
||||
// Tick every second below an hour, every 30 seconds otherwise. The
|
||||
// long-interval path keeps "3d 4h" from causing constant repaints.
|
||||
const interval = remaining < 60 * 60 * 1000 ? 1000 : 30000;
|
||||
timer = setTimeout(loop, interval);
|
||||
}
|
||||
loop();
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", startCountdowns);
|
||||
} else {
|
||||
startCountdowns();
|
||||
}
|
||||
|
||||
// After an htmx swap, freshly-inserted countdowns need to be started too.
|
||||
document.addEventListener("htmx:afterSwap", startCountdowns);
|
||||
})();
|
||||
Reference in New Issue
Block a user