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

portfolio-edit: fix rogue Edit/Done/Add visibility

Browse source 
Two interlocking bugs surfaced after the design pass:

1. CSS `display: inline-flex` on .pf-edit-btn/.pf-done-btn overrode the
   UA's `[hidden] { display: none }`, so the JS toggling `editBtn.hidden`
   had no visual effect — both buttons rendered side by side.
2. portfolio.js's empty-state path sets `form.hidden = false` but the
   populated-portfolio render path only removed the `pf-empty` class; it
   never reset `form.hidden = true`. So once a user went through the
   empty state, the add form stuck around — leaving the Add button
   visible on a populated dashboard.

Fixes are surgical: add an explicit `[hidden]` rule for the two
header pills, and re-hide the form in `renderPanel` unless edit mode
is currently active (so we don't yank the form out from under an
edit-in-progress).

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

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

@ -2331,6 +2331,9 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
color: var(--accent);
border-color: var(--accent);
}
/* The JS toggles these via the `hidden` attribute. `display: inline-flex`
* above otherwise wins over the UA's `[hidden] { display: none }`. */
.pf-edit-btn[hidden], .pf-done-btn[hidden] { display: none; }
/* × button per row — hidden by default, visible only in edit mode. */
.pf-row-del-cell { width: 20px; text-align: center; }

7
app/static/js/portfolio.js
View file

@ -272,6 +272,13 @@
function renderPanel(mount, pie, enriched, agg) {
var panel = document.getElementById('portfolio-panel');
if (panel) panel.classList.remove('pf-empty');
// The empty-state path forces the add form visible. When we move
// back to a populated view we re-hide it — unless edit mode is on,
// in which case the form stays visible for ongoing edits.
var form = document.getElementById('pf-add-form');
if (form && panel && !panel.classList.contains('pf-editing')) {
form.hidden = true;
}
const ccyPills = Object.keys(agg.by_currency)
.sort((a, b) => agg.by_currency[b] - agg.by_currency[a])