lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Map companion table header and pagination sticky

Browse Source
This commit is contained in:
Lukas
2026-04-05 22:17:24 +02:00
parent c51858ec71
commit f1e3d4c4c9
2 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Docs/Tasks.md
View File

@@ -74,6 +74,7 @@ When a country is selected the companion table **must** return the complete set
### TASK-002 — WorldMap: sticky table header and sticky pagination bar ### TASK-002 — WorldMap: sticky table header and sticky pagination bar
**Status:** Done
**Priority:** Low **Priority:** Low
**Domain:** Frontend only **Domain:** Frontend only
**References:** `Docs/Features.md §4`, `Docs/Web-Design.md`, `Docs/Web-Development.md` **References:** `Docs/Features.md §4`, `Docs/Web-Design.md`, `Docs/Web-Development.md`

22
frontend/src/pages/MapPage.tsx
View File

@@ -64,6 +64,13 @@ const useStyles = makeStyles({
borderRadius: tokens.borderRadiusMedium, borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorNeutralStroke1}`, border: `1px solid ${tokens.colorNeutralStroke1}`,
}, },
stickyHeaderCell: {
position: "sticky",
top: 0,
zIndex: 1,
backgroundColor: tokens.colorNeutralBackground1,
boxShadow: `0 1px 0 ${tokens.colorNeutralStroke2}`,
},
filterBar: { filterBar: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
@@ -81,6 +88,9 @@ const useStyles = makeStyles({
padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`, padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
borderTop: `1px solid ${tokens.colorNeutralStroke2}`, borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
backgroundColor: tokens.colorNeutralBackground2, backgroundColor: tokens.colorNeutralBackground2,
position: "sticky",
bottom: 0,
zIndex: 1,
}, },
}); });
@@ -248,12 +258,12 @@ export function MapPage(): React.JSX.Element {
<Table size="small" aria-label="Bans list"> <Table size="small" aria-label="Bans list">
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHeaderCell>IP Address</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>IP Address</TableHeaderCell>
<TableHeaderCell>Jail</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>Jail</TableHeaderCell>
<TableHeaderCell>Banned At</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>Banned At</TableHeaderCell>
<TableHeaderCell>Country</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>Country</TableHeaderCell>
<TableHeaderCell>Origin</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>Origin</TableHeaderCell>
<TableHeaderCell>Times Banned</TableHeaderCell> <TableHeaderCell className={styles.stickyHeaderCell}>Times Banned</TableHeaderCell>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>