design: market status matches rates styling, shows a loading pulse

#market-info had no CSS at all — different font size and color from
#rates-info right next to it, and its own hardcoded English "Market"
text ignored the language setting. Merged its styling into the same
rule as #rates-info and gave it the same .spin pulse while a fetch
is in flight, so a market refresh is as visible as a rates refresh.
This commit is contained in:
Horizontal42 2026-07-03 12:55:32 +03:00
parent 88a60c4e73
commit 5205c9fb63
3 changed files with 9 additions and 5 deletions

View file

@ -27,6 +27,7 @@ const dict: Record<string, Record<string, string>> = {
resultswidth: "Results column",
selection: "Selection",
rates: "Rates",
market: "Market",
justNow: "just now",
minAgo: "{}m ago",
hourAgo: "{}h ago",
@ -104,6 +105,7 @@ const dict: Record<string, Record<string, string>> = {
resultswidth: "Колонка результатов",
selection: "Выделение",
rates: "Курсы",
market: "Рынок",
justNow: "только что",
minAgo: "{} мин назад",
hourAgo: "{} ч назад",

View file

@ -495,8 +495,10 @@ async function refreshMarket(force = false): Promise<void> {
if (!isTauri()) return;
const info = $("#market-info") as HTMLElement;
info.style.display = "";
info.textContent = "Market…";
info.classList.add("spin");
info.textContent = t("market");
const prices = await fetchMarketData(MARKET_SYMBOLS);
info.classList.remove("spin");
if (Object.keys(prices).length > 0) {
marketPrices = prices;
marketFetchedAt = Math.floor(Date.now() / 1000);
@ -529,7 +531,7 @@ function renderMarketInfo(): void {
const el = $("#market-info") as HTMLElement;
if (marketFetchedAt === 0) { el.style.display = "none"; return; }
el.style.display = "";
el.textContent = `Market: ${agoText(marketFetchedAt)} ↺`;
el.textContent = `${t("market")}: ${agoText(marketFetchedAt)} ↺`;
el.title = t("refreshRates");
}

View file

@ -213,14 +213,14 @@ body {
flex-shrink: 0;
gap: 8px;
}
#rates-info {
#rates-info, #market-info {
font-size: 11.5px;
color: var(--fg-muted);
cursor: pointer;
white-space: nowrap;
}
#rates-info:hover { color: var(--fg); }
#rates-info.spin { pointer-events: none; animation: rates-pulse 1s ease-in-out infinite; }
#rates-info:hover, #market-info:hover { color: var(--fg); }
#rates-info.spin, #market-info.spin { pointer-events: none; animation: rates-pulse 1s ease-in-out infinite; }
@keyframes rates-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.95; }