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

portfolio-edit: add a quiet how-to hint inside the composer

Browse source 
A small italic muted line beneath the form explaining the controls:
"Type a symbol, then quantity and cost — or use the calendar to fill
cost from a buy date — then [+] to add. [×] next to an existing row
removes it."

Only renders while the composer itself is visible (i.e. in edit mode),
so it doesn't clutter the dashboard at rest.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-27 15:27:44 +02:00
parent 6377c929b8
commit 11662c0ea8
2 changed files with 25 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/static/css/cassandra.css
View file

@ -2524,3 +2524,23 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
color: var(--warning); color: var(--warning);
} }
.pf-add-warning:empty { display: none; } .pf-add-warning:empty { display: none; }
/* Quietly explains the controls. Shown only when the form is visible,
* which is to say only in edit mode. */
.pf-add__hint {
margin: 6px 0 0;
font-size: 11px;
color: var(--dim);
line-height: 1.5;
font-style: italic;
}
.pf-add__hint kbd {
font-family: inherit;
font-style: normal;
font-size: 11px;
padding: 0 4px;
border: 1px solid var(--border);
border-radius: 2px;
color: var(--muted);
background: color-mix(in srgb, var(--accent) 4%, transparent);
}

5
app/templates/dashboard.html
View file

@ -91,6 +91,11 @@
<span id="pf-add-date-status" class="pf-add-status"></span> <span id="pf-add-date-status" class="pf-add-status"></span>
<span id="pf-add-warning" class="pf-add-warning" hidden></span> <span id="pf-add-warning" class="pf-add-warning" hidden></span>
</div> </div>
<p class="pf-add__hint">
Type a symbol, then quantity and cost &mdash; or use the calendar
to fill cost from a buy date &mdash; then <kbd>+</kbd> to add.
<kbd>&times;</kbd> next to an existing row removes it.
</p>
</div> </div>
<div id="pf-mount"> <div id="pf-mount">
<div class="empty">loading…</div> <div class="empty">loading…</div>