Label stock ticker % change with its interval

The change % is since the previous trading day's close (Yahoo's
own definition, same as any standard quote), but nothing on screen
said so. Sidebar widget now shows a "today" label next to the
Stocks header; admin Stocks tab gets an explanatory hint above the
list.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014c1L8ghNBFjfiH64UMViP8
This commit is contained in:
Claude
2026-07-25 00:32:14 +00:00
parent 57c49f6858
commit 0a50ec7b48
2 changed files with 14 additions and 1 deletions
@@ -44,6 +44,7 @@
<span class="count">{tickers.length} tickers</span> <span class="count">{tickers.length} tickers</span>
<button class="add-btn" onclick={() => (showAdd = !showAdd)}>+ New ticker</button> <button class="add-btn" onclick={() => (showAdd = !showAdd)}>+ New ticker</button>
</div> </div>
<p class="hint" style="margin: -6px 0 12px;">Price and % change are today's — since the previous trading day's close.</p>
{#if showAdd} {#if showAdd}
<div class="add-panel"> <div class="add-panel">
@@ -5,7 +5,10 @@
</script> </script>
<div class="widget"> <div class="widget">
<div class="head">
<span class="title">Stocks</span> <span class="title">Stocks</span>
{#if stocks.length > 0}<span class="interval">today</span>{/if}
</div>
{#if stocks.length > 0} {#if stocks.length > 0}
<div class="list"> <div class="list">
{#each stocks as stock (stock.id)} {#each stocks as stock (stock.id)}
@@ -35,11 +38,20 @@
border-radius: 12px; border-radius: 12px;
padding: 14px; padding: 14px;
} }
.head {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.title { .title {
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: var(--text-muted); color: var(--text-muted);
} }
.interval {
font-size: 10px;
color: var(--text-muted);
}
.list { .list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;