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

portfolio-edit: form is edit-mode only; submit becomes a + glyph

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-27 15:22:13 +02:00
parent 2ffd228976
commit 6377c929b8
4 changed files with 27 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);