cloud/project-manager
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Releases Activity

Replace the compact "Add" buttons with a plus icon

Browse Source 
The kanban column, sidebar inbox, and add-status forms all had their
own "Add" submit button; with a column-per-status now, that's a lot of
identical labels on screen at once. Replaced with a small square "+"
icon button (.btn-icon), each keeping a descriptive title + aria-label
(dynamic, so it reads "Adding…" while the request is in flight) since
the visible glyph alone isn't an accessible name.

.btn-icon is excluded (":not(.btn-icon)") from the generic submit
button rule and the .field-row/.kanban__new compact-button overrides,
rather than out-specificity'd -- same reasoning as .field's low
specificity against input:focus: it shouldn't depend on source order
which one wins. .kanban__new's own override is now dead (both of its
two buttons are icons) and removed outright.

Left the "Add card" button on the "All tasks" tab as text -- it's a
lone, full-width primary action in a larger form, not one of several
compact icon-sized ones crowded together.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-05 00:16:38 +01:00
co-authored by Claude Sonnet 5
parent 19ccb8f881
commit 7ce0f156f0
4 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+34 -10
View File
@@ -824,7 +824,10 @@ h1 {
margin-top: 0.75rem;
}
.field-row button[type='submit'] {
/* :not(.btn-icon) -- an icon button (see below) sets its own compact size;
without the exclusion this would win the tie against it (same specificity,
later in the file) the same way ".form input" once beat "input:focus". */
.field-row button[type='submit']:not(.btn-icon) {
flex: none;
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
@@ -927,13 +930,6 @@ h1 {
margin-top: 0.6rem;
}
.kanban__new button[type="submit"] {
flex: none;
padding: 0.4rem 0.7rem;
font-size: 0.9rem;
border-radius: var(--radius-sm);
}
/* --- confirmation modal --------------------------------------------------- */
.modal {
@@ -1020,7 +1016,7 @@ h1 {
font-size: 0.9rem;
}
button[type="submit"],
button[type="submit"]:not(.btn-icon),
.btn-primary {
padding: 0.6rem 1rem;
border: none;
@@ -1037,12 +1033,40 @@ button[type="submit"],
text-align: center;
}
button[type="submit"]:disabled,
button[type="submit"]:disabled:not(.btn-icon),
.btn-primary:disabled {
opacity: var(--opacity-disabled);
cursor: progress;
}
/* A small square icon button -- the compact "add to X" forms (a kanban
column, the inbox, the status list) all used a full "Add" label until
there were enough of them on screen at once to feel cluttered. Excluded
(":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
rather than out-specificity'd, so it isn't at the mercy of source order --
the same reasoning as .field's low specificity against input:focus. */
.btn-icon {
flex: none;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
color: var(--accent-text);
font-size: 1.1rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.btn-icon:disabled {
opacity: var(--opacity-disabled);
cursor: progress;
}
.link {
border: none;
background: none;