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

Show a dashed drop-area in empty kanban columns and the inbox

Browse Source 
.kanban__cards:empty (shared by every status column and the sidebar's
inbox list) gets a dashed border, transparent background, and a
'Drop cards here' hint, echoing the dashboard's 'Create a project'
tile. Pure CSS: both draggables are already always-rendered even when
empty, so an empty one is a genuinely childless element and :empty
just tracks that -- it steps aside on its own once Sortable inserts a
drag-over ghost, and needs no JS empty-state flag.

Drops the sidebar's separate 'Nothing in the inbox.' message, now
redundant with the box itself. Verified the container really is
childless when empty via a DOM dump against a running instance (no
screenshot).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-04 20:47:17 +01:00
co-authored by Claude Sonnet 5
parent dd7d217e8e
commit acfc35af4c
3 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+20
View File
@@ -757,6 +757,26 @@ h1 {
min-height: 3rem;
}
/* Empty column/inbox: a subtle drop target, styled like the dashboard's
"Create a project" tile (dashed border, transparent). :empty tracks the
real DOM child count, so this naturally steps aside for Sortable's own
ghost placeholder while something is dragged over it. */
.kanban__cards:empty {
border: 1px dashed var(--border);
border-radius: 8px;
}
.kanban__cards:empty::before {
content: '⬇ Drop cards here';
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--muted);
font-size: 0.8rem;
}
.kanban-card {
background: var(--surface);
border: 1px solid var(--border);