Sortable team list CSS adjustments

This commit is contained in:
Kalle (Sendou)
2021-12-10 23:10:55 +02:00
parent c6f4d9b016
commit 73171d0d9a
2 changed files with 11 additions and 3 deletions

View File

@@ -27,8 +27,6 @@ import type { Unpacked } from "~/utils";
import { useTimeoutState } from "~/utils/hooks";
// TODO: https://docs.dndkit.com/presets/sortable#drag-overlay
// TODO: cursor flickers when going down the list
// TODO: grabbing cursor
// TODO: user can change seed order while submitting which breaks the UI
export function AdminTeamControls() {
const [, parentRoute] = useMatches();

View File

@@ -26,11 +26,13 @@
.tournament__admin__teams-list-row {
display: grid;
width: 100%;
align-items: center;
padding: var(--s-3);
border-radius: var(--rounded);
column-gap: var(--s-1);
font-size: var(--fonts-sm);
grid-template-columns: 1fr 3fr 3fr 1fr;
list-style: none;
margin-block-start: var(--s-4);
row-gap: var(--s-1-5);
}
@@ -38,6 +40,14 @@
cursor: grab;
}
.tournament__admin__teams-list-row.sortable:hover {
background-color: var(--bg-lighter);
}
.tournament__admin__teams-list-row.sortable:active {
cursor: grabbing !important;
}
.tournament__admin__teams-container__header {
font-weight: var(--bold);
}