granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve roster UI with sticky names and better spacing

Browse source
This commit is contained in:
Justin Edmund 2025-12-20 20:16:21 -08:00
parent f5eaa5bb75
commit 3f6ad5510a
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/routes/(app)/crew/roster/+page.svelte
View file

@ -356,11 +356,13 @@
.roster-content { .roster-content {
padding: spacing.$unit-2x; padding: spacing.$unit-2x;
display: flex;
flex-direction: column;
gap: spacing.$unit-2x;
} }
.search-section { .search-section {
position: relative; position: relative;
margin-bottom: spacing.$unit-2x;
// Svelecte CSS variable overrides // Svelecte CSS variable overrides
--sv-bg: var(--select-contained-bg); --sv-bg: var(--select-contained-bg);
@ -462,11 +464,11 @@
} }
.roster-header { .roster-header {
padding: spacing.$unit spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x spacing.$unit 0;
} }
.roster-row { .roster-row {
padding: spacing.$unit spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x spacing.$unit 0;
border-radius: layout.$card-corner; border-radius: layout.$card-corner;
transition: background-color 0.1s; transition: background-color 0.1s;
@ -481,6 +483,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
position: sticky;
left: 0;
padding-left: spacing.$unit-2x;
background: var(--card-bg);
z-index: 1;
.member-name { .member-name {
font-weight: typography.$medium; font-weight: typography.$medium;
@ -492,6 +499,10 @@
} }
} }
.roster-row:hover .member-col {
background: var(--list-cell-bg-hover);
}
.item-col { .item-col {
width: 70px; width: 70px;
display: flex; display: flex;