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

portfolio-edit: rebuild form as compact inline strip

Browse source 
Replace the multi-row wizard-style form (Ticker / Qty on row 1, mode
radios on row 2, Date+Cost on row 3) with a single horizontal strip
that sits unobtrusively above the portfolio table. The radio toggle is
gone; a small calendar icon next to the Cost input pops out a date
picker that auto-fills cost on selection and then hides itself.

Same input IDs, so the existing validate/Add/× handlers work unchanged.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-27 15:02:03 +02:00
parent 70da4cdf84
commit a9b7d4d8bb
3 changed files with 95 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

62
app/templates/dashboard.html
View file

@ -61,42 +61,34 @@
</div>
<div class="panel-body">
<div id="pf-add-form" class="pf-add-form" hidden>
<div class="pf-add-row">
<label class="pf-add-field">
<span class="pf-add-label">Ticker</span>
<input type="text" id="pf-add-ticker" autocomplete="off"
spellcheck="false" maxlength="32" placeholder="AAPL">
<span id="pf-add-ticker-status" class="pf-add-status"></span>
</label>
<label class="pf-add-field">
<span class="pf-add-label">Quantity</span>
<input type="number" id="pf-add-qty" min="0" step="any" placeholder="100">
</label>
</div>
<div class="pf-add-row pf-add-cost-mode">
<label class="pf-add-radio">
<input type="radio" name="pf-cost-mode" value="avg" checked>
Avg cost per share
</label>
<label class="pf-add-radio">
<input type="radio" name="pf-cost-mode" value="date">
Bought on date
</label>
</div>
<div class="pf-add-row">
<label class="pf-add-field" id="pf-add-date-field" hidden>
<span class="pf-add-label">Acquisition date</span>
<input type="date" id="pf-add-date">
<span id="pf-add-date-status" class="pf-add-status"></span>
</label>
<label class="pf-add-field">
<span class="pf-add-label">Cost per share</span>
<input type="number" id="pf-add-cost" min="0" step="any" placeholder="150.25">
<div class="pf-add-strip">
<input type="text" id="pf-add-ticker" class="pf-add-input pf-add-input--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>
</label>
<button type="button" id="pf-add-submit" class="pf-add-submit" disabled>
+ Add
</button>
<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">
<span id="pf-add-ticker-status" class="pf-add-status"></span>
<span id="pf-add-date-status" class="pf-add-status"></span>
</div>
<div id="pf-add-warning" class="pf-add-warning" hidden></div>
</div>