local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 53 Pull requests 1 Projects 2 Releases 3 Packages 1 Activity Actions

feat: add accessible drag&drop table component
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Simon 2026-03-10 15:40:28 +01:00
parent fa738aae88
commit 05e2a298fe
Signed by: simon
GPG key ID: 40E7A58C4AA1EDB2
9 changed files with 386 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/css/app.css
View file

@ -656,3 +656,34 @@
}
/* This file is for your main application CSS */
/* ============================================
SortableList: drag-and-drop table rows
============================================ */
/* Ghost row: placeholder showing where the dragged item will be dropped.
Background fills the gap; text invisible so layout matches original row. */
.sortable-ghost {
background-color: var(--color-base-300) !important;
opacity: 0.5;
}
.sortable-ghost td {
border-color: transparent !important;
}
/* Chosen row: the row being actively dragged (follows the cursor). */
.sortable-chosen {
background-color: var(--color-base-200);
box-shadow: 0 4px 16px -2px oklch(0 0 0 / 0.18);
cursor: grabbing !important;
}
/* Drag handle button: only grab cursor, no hover effect for mouse users.
Keyboard outline is handled via JS outline style. */
[data-sortable-handle] button {
cursor: grab;
}
[data-sortable-handle] button:hover {
background-color: transparent !important;
color: inherit;
}