giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

portfolio-edit: design pass — terminal-aesthetic inline composer

Browse source 
The previous CSS used invented variable names (--neu-dim, --err, --ok)
that don't exist in the project's design system; the form fell back to
hardcoded hex values and looked disconnected from the rest of the site.

Rebuilt against the real tokens (--border, --dim, --muted, --positive,
--negative, --warning, --accent) and the mono-first 'geopolitical-
terminal aesthetic' the rest of the dashboard uses:

  $ ticker  ✓ 172.40 USD  │  qty  @  cost  USD  📅              add
                                                              ────

- No boxed-form chrome. A dashed bottom rule separates the composer
  from the table below.
- Inputs lose their card-style boxes; they're underline-only with a
  faint accent wash on focus — feels like editing a command line.
- '$' prompt marker, '│' divider, '@' between qty and cost give the
  row a terminal grammar without being twee.
- Submit is a ghost pill in the accent colour; lights to solid only
  when enabled.
- All controls now respond correctly to the light/dark theme toggle.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-27 15:06:32 +02:00
parent a9b7d4d8bb
commit bb41ee38f7
2 changed files with 183 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/templates/dashboard.html
View file

@ -60,37 +60,37 @@
<button type="button" id="pf-done-btn" class="pf-done-btn" hidden>Done</button>
</div>
<div class="panel-body">
<div id="pf-add-form" class="pf-add-form" hidden>
<div class="pf-add-strip">
<input type="text" id="pf-add-ticker" class="pf-add-input pf-add-input--ticker"
<div id="pf-add-form" class="pf-add" hidden>
<div class="pf-add__line">
<span class="pf-add__prompt" aria-hidden="true">$</span>
<input type="text" id="pf-add-ticker" class="pf-add__ticker"
autocomplete="off" spellcheck="false" maxlength="32"
placeholder="Ticker">
<input type="number" id="pf-add-qty" class="pf-add-input pf-add-input--qty"
min="0" step="any" placeholder="Qty">
<span class="pf-add-cost-wrap">
<input type="number" id="pf-add-cost" class="pf-add-input pf-add-input--cost"
min="0" step="any" placeholder="Cost / share">
<span id="pf-add-cost-currency" class="pf-add-currency"></span>
<button type="button" id="pf-add-date-btn" class="pf-add-icon-btn"
title="Auto-fill from historical date" aria-label="Pick date">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
</button>
<input type="date" id="pf-add-date" class="pf-add-input pf-add-input--date" hidden>
</span>
<button type="button" id="pf-add-submit" class="pf-add-submit"
disabled title="Add position">+</button>
</div>
<div class="pf-add-meta">
placeholder="ticker">
<span id="pf-add-ticker-status" class="pf-add-status"></span>
<span id="pf-add-date-status" class="pf-add-status"></span>
<span class="pf-add__div" aria-hidden="true"></span>
<input type="number" id="pf-add-qty" class="pf-add__num pf-add__num--qty"
min="0" step="any" placeholder="qty">
<span class="pf-add__at" aria-hidden="true">@</span>
<input type="number" id="pf-add-cost" class="pf-add__num pf-add__num--cost"
min="0" step="any" placeholder="cost">
<span id="pf-add-cost-currency" class="pf-add-currency"></span>
<button type="button" id="pf-add-date-btn" class="pf-add__icon"
title="Use a buy date to auto-fill cost" aria-label="Pick buy date">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" aria-hidden="true">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
<line x1="16" y1="2" x2="16" y2="6"/>
<line x1="8" y1="2" x2="8" y2="6"/>
<line x1="3" y1="10" x2="21" y2="10"/>
</svg>
</button>
<input type="date" id="pf-add-date" class="pf-add__date" hidden>
<button type="button" id="pf-add-submit" class="pf-add__submit" disabled>add</button>
</div>
<div class="pf-add__notes">
<span id="pf-add-date-status" class="pf-add-status"></span>
<span id="pf-add-warning" class="pf-add-warning" hidden></span>
</div>
<div id="pf-add-warning" class="pf-add-warning" hidden></div>
</div>
<div id="pf-mount">
<div class="empty">loading…</div>