From 6377c929b8a686c712c3d43fd89c12ce21b2e1e9 Mon Sep 17 00:00:00 2001 From: Giorgio Gilestro Date: Wed, 27 May 2026 15:22:13 +0200 Subject: [PATCH] portfolio-edit: form is edit-mode only; submit becomes a + glyph MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two related polishes: - The add form was auto-shown by the empty-state path so brand-new users would see something to act on. That conflicts with the user's preference for "Edit always toggles the form, no other path." The empty state now shows guidance copy ("click edit to add one") instead. exitEditMode always hides the form too. - The submit "add" word-button is replaced by a square accent-bordered + glyph (26×26). Matches the visual weight of the calendar ghost next to it but stays in the accent colour so it reads as primary. Adds a tiny active-state scale tick for tactile feedback. Co-Authored-By: Claude Opus 4.7 --- app/static/css/cassandra.css | 24 +++++++++++++++++------- app/static/js/portfolio.js | 8 ++++---- app/static/js/portfolio_edit.js | 9 ++++----- app/templates/dashboard.html | 3 ++- 4 files changed, 27 insertions(+), 17 deletions(-) diff --git a/app/static/css/cassandra.css b/app/static/css/cassandra.css index 55096c3..8f3c3c8 100644 --- a/app/static/css/cassandra.css +++ b/app/static/css/cassandra.css @@ -2461,22 +2461,29 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } border-color: var(--accent); } -/* Submit button — ghost styled to match the EDIT pill. Lights up to - * solid accent only when an add is actually possible. */ +/* Submit button — a square accent-bordered plus glyph. Visually + * heavier than the ghost calendar icon (larger size, accent border) + * so the primary action reads as primary. Lights up to solid accent + * on hover/focus when enabled. */ .pf-add__submit { margin-left: auto; background: transparent; border: 1px solid var(--accent); color: var(--accent); - padding: 3px 14px; + width: 26px; + height: 26px; + padding: 0; border-radius: 2px; cursor: pointer; font-family: inherit; - font-size: 12px; - letter-spacing: 0.06em; - text-transform: lowercase; + font-size: 18px; + font-weight: 600; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; transition: background 120ms ease-out, color 120ms ease-out, - border-color 120ms ease-out; + border-color 120ms ease-out, transform 120ms ease-out; } .pf-add__submit:hover:not(:disabled), .pf-add__submit:focus-visible:not(:disabled) { @@ -2484,6 +2491,9 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); } color: var(--bg); outline: none; } +.pf-add__submit:active:not(:disabled) { + transform: scale(0.94); +} .pf-add__submit:disabled { border-color: var(--border); color: var(--dim); diff --git a/app/static/js/portfolio.js b/app/static/js/portfolio.js index 21e4358..bae774d 100644 --- a/app/static/js/portfolio.js +++ b/app/static/js/portfolio.js @@ -189,13 +189,13 @@ mount.innerHTML = '
' + notice + - 'Welcome — start by adding a position above, or ' + + 'No positions yet — click edit to add one, or ' + 'import a CSV from your broker →' + '
'; - // When empty, the add form should be visible by default — the - // edit module toggles it via the pf-empty class. + // The form is only ever visible in edit mode — never auto-shown by + // the empty state. Defensive: ensure it stays hidden here. var form = document.getElementById('pf-add-form'); - if (form) form.hidden = false; + if (form) form.hidden = true; } // Silently remove an unrecoverable cloud blob and re-render. The user diff --git a/app/static/js/portfolio_edit.js b/app/static/js/portfolio_edit.js index 52cbffb..1354fe2 100644 --- a/app/static/js/portfolio_edit.js +++ b/app/static/js/portfolio_edit.js @@ -28,11 +28,10 @@ function exitEditMode() { panel.classList.remove('pf-editing'); - // Form stays visible when the pie is empty (empty-state UX handled - // by portfolio.js setting the pf-empty class on the panel). - if (!panel.classList.contains('pf-empty')) { - form.hidden = true; - } + // The form is edit-mode-only — always hide it on exit, including + // when the portfolio is empty. The empty state shows guidance text + // that nudges the user back to the Edit button. + form.hidden = true; editBtn.hidden = false; doneBtn.hidden = true; editBtn.setAttribute('aria-pressed', 'false'); diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index dec1355..cb31752 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -84,7 +84,8 @@ - +