From 5935b0d561c07cf3f25f8bfb04cdc0bb22421fbc Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Sat, 28 Dec 2024 01:28:14 +0100
Subject: [PATCH] stick header and filter bar to top

---
 src/routes/admin/+layout.svelte        |   4 +-
 src/routes/admin/feedback/+page.svelte | 118 +++++++++---------
 src/routes/admin/reports/+page.svelte  | 162 +++++++++++++------------
 src/routes/admin/users/+page.svelte    |   2 +-
 4 files changed, 145 insertions(+), 141 deletions(-)

diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index 4d0bac7..3698d4b 100644
--- a/src/routes/admin/+layout.svelte
+++ b/src/routes/admin/+layout.svelte
@@ -133,7 +133,7 @@
 	<div class="grid">
 		{#key $page.url.pathname}
 			<div
-				class="col-[1] row-[1] h-full w-full overflow-y-scroll overflow-x-hidden"
+				class="col-[1] row-[1] h-[calc(100vh-3rem)] w-full overflow-y-scroll overflow-x-hidden"
 				in:fly={{ x: transitionPrefix * window.innerWidth, duration: !transitionPrefix ? 0 : 100 }}
 				out:fly={{
 					x: transitionPrefix * -window.innerWidth,
@@ -145,7 +145,7 @@
 		{/key}
 	</div>
 {:else}
-	<div class="h-full w-full">
+	<div class="h-[calc(100vh-3rem)] w-full">
 		{@render children()}
 	</div>
 {/if}
diff --git a/src/routes/admin/feedback/+page.svelte b/src/routes/admin/feedback/+page.svelte
index bd733b1..961ebe8 100644
--- a/src/routes/admin/feedback/+page.svelte
+++ b/src/routes/admin/feedback/+page.svelte
@@ -66,65 +66,67 @@
 			onUpdate={() => fetchFeedback({ from: 0 }).then((r) => (feedbacks = r))}
 		/>
 		<hr class="divider my-1 mx-8 border-none" />
-		<table class="table table-fixed h-fit">
-			<thead>
-				<tr>
-					<th>Event</th>
-					<th>Titel</th>
-					<th>Nutzer</th>
-					<th>Datum</th>
-					<th>Inhalt</th>
-				</tr>
-			</thead>
-			<PaginationTableBody
-				onUpdate={async () =>
-					await fetchFeedback().then((feedback) => (feedbacks = [...feedbacks, ...feedback]))}
-			>
-				{#each feedbacks as feedback}
-					<tr
-						class="hover [&>*]:text-sm cursor-pointer"
-						class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
-						onclick={async () => {
-							await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
-								replaceState: true
-							});
-							await openHashReport();
-						}}
-					>
-						<td title={feedback.event}>{feedback.event}</td>
-						<td class="overflow-hidden overflow-ellipsis">{feedback.title}</td>
-						<td class="flex">
-							{feedback.user?.username || ''}
-							{#if feedback.user}
-								<button
-									class="pl-1"
-									title="Nach Ersteller filtern"
-									onclick={(e) => {
-										e.stopPropagation();
-										feedbackFilter.username = feedback.user.username;
-										fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
-									}}
-								>
-									<MagnifyingGlass size="14" />
-								</button>
-							{/if}
-						</td>
-						<td
-							>{new Intl.DateTimeFormat('de-DE', {
-								year: 'numeric',
-								month: '2-digit',
-								day: '2-digit',
-								hour: '2-digit',
-								minute: '2-digit'
-							}).format(new Date(feedback.updatedAt))} Uhr</td
-						>
-						<td class="overflow-hidden overflow-ellipsis"
-							>{feedback.content}{feedback.content_stripped ? '...' : ''}</td
-						>
+		<div class="h-full overflow-scroll">
+			<table class="table table-fixed h-fit">
+				<thead>
+					<tr>
+						<th>Event</th>
+						<th>Titel</th>
+						<th>Nutzer</th>
+						<th>Datum</th>
+						<th>Inhalt</th>
 					</tr>
-				{/each}
-			</PaginationTableBody>
-		</table>
+				</thead>
+				<PaginationTableBody
+					onUpdate={async () =>
+						await fetchFeedback().then((feedback) => (feedbacks = [...feedbacks, ...feedback]))}
+				>
+					{#each feedbacks as feedback}
+						<tr
+							class="hover [&>*]:text-sm cursor-pointer"
+							class:bg-base-200={activeFeedback?.url_hash === feedback.url_hash}
+							onclick={async () => {
+								await goto(`${window.location.href.split('#')[0]}#${feedback.url_hash}`, {
+									replaceState: true
+								});
+								await openHashReport();
+							}}
+						>
+							<td title={feedback.event}>{feedback.event}</td>
+							<td class="overflow-hidden overflow-ellipsis">{feedback.title}</td>
+							<td class="flex">
+								{feedback.user?.username || ''}
+								{#if feedback.user}
+									<button
+										class="pl-1"
+										title="Nach Ersteller filtern"
+										onclick={(e) => {
+											e.stopPropagation();
+											feedbackFilter.username = feedback.user.username;
+											fetchFeedback({ from: 0 }).then((r) => (feedbacks = r));
+										}}
+									>
+										<MagnifyingGlass size="14" />
+									</button>
+								{/if}
+							</td>
+							<td
+								>{new Intl.DateTimeFormat('de-DE', {
+									year: 'numeric',
+									month: '2-digit',
+									day: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								}).format(new Date(feedback.updatedAt))} Uhr</td
+							>
+							<td class="overflow-hidden overflow-ellipsis"
+								>{feedback.content}{feedback.content_stripped ? '...' : ''}</td
+							>
+						</tr>
+					{/each}
+				</PaginationTableBody>
+			</table>
+		</div>
 	</div>
 	{#if activeFeedback}
 		<div
diff --git a/src/routes/admin/reports/+page.svelte b/src/routes/admin/reports/+page.svelte
index e04e953..e6bbcf2 100644
--- a/src/routes/admin/reports/+page.svelte
+++ b/src/routes/admin/reports/+page.svelte
@@ -115,95 +115,97 @@
 			</div>
 		</div>
 		<hr class="divider my-1 mx-8 border-none" />
-		<table class="table table-fixed h-fit">
-			<colgroup>
-				<col style="width: 20%" />
-				<col style="width: 15%" />
-				<col style="width: 15%" />
-				<col style="width: 20%" />
-				<col style="width: 15%" />
-				<col style="width: 15%" />
-			</colgroup>
-			<thead>
-				<tr>
-					<th>Grund</th>
-					<th>Ersteller</th>
-					<th>Reporteter User</th>
-					<th>Datum</th>
-					<th>Bearbeitungsstatus</th>
-					<th>Reportstatus</th>
-				</tr>
-			</thead>
-			<PaginationTableBody
-				onUpdate={async () =>
-					await fetchReports().then((res) => (reports = [...reports, ...res.reports]))}
-			>
-				{#each reports as report}
-					<tr
-						class="hover [&>*]:text-sm cursor-pointer"
-						class:bg-base-200={activeReport?.url_hash === report.url_hash}
-						onclick={() => {
-							goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
-								replaceState: true
-							});
-							activeReport = $state.snapshot(report);
-							activeReport.originalStatus = report.status;
-						}}
-					>
-						<td title={report.subject}><div class="overflow-scroll">{report.subject}</div></td>
-						<td class="flex">
-							{report.reporter.username}
-							<button
-								class="pl-1"
-								title="Nach Ersteller filtern"
-								onclick={(e) => {
-									e.stopPropagation();
-									reportFilter.reporter = report.reporter.username;
-									fetchReports({ from: 0 }).then((r) => (reports = r.reports));
-								}}
-							>
-								<MagnifyingGlass size="14" />
-							</button>
-						</td>
-						<td>
-							{report.reported?.username || ''}
-							{#if report.reported?.id}
+		<div class="h-full overflow-scroll">
+			<table class="table table-fixed h-fit">
+				<colgroup>
+					<col style="width: 20%" />
+					<col style="width: 15%" />
+					<col style="width: 15%" />
+					<col style="width: 20%" />
+					<col style="width: 15%" />
+					<col style="width: 15%" />
+				</colgroup>
+				<thead>
+					<tr>
+						<th>Grund</th>
+						<th>Ersteller</th>
+						<th>Reporteter User</th>
+						<th>Datum</th>
+						<th>Bearbeitungsstatus</th>
+						<th>Reportstatus</th>
+					</tr>
+				</thead>
+				<PaginationTableBody
+					onUpdate={async () =>
+						await fetchReports().then((res) => (reports = [...reports, ...res.reports]))}
+				>
+					{#each reports as report}
+						<tr
+							class="hover [&>*]:text-sm cursor-pointer"
+							class:bg-base-200={activeReport?.url_hash === report.url_hash}
+							onclick={() => {
+								goto(`${window.location.href.split('#')[0]}#${report.url_hash}`, {
+									replaceState: true
+								});
+								activeReport = $state.snapshot(report);
+								activeReport.originalStatus = report.status;
+							}}
+						>
+							<td title={report.subject}><div class="overflow-scroll">{report.subject}</div></td>
+							<td class="flex">
+								{report.reporter.username}
 								<button
 									class="pl-1"
-									title="Nach Reportetem Spieler filtern"
+									title="Nach Ersteller filtern"
 									onclick={(e) => {
 										e.stopPropagation();
-										reportFilter.reported = report.reported.username;
+										reportFilter.reporter = report.reporter.username;
 										fetchReports({ from: 0 }).then((r) => (reports = r.reports));
 									}}
 								>
 									<MagnifyingGlass size="14" />
 								</button>
-							{/if}
-						</td>
-						<td
-							>{new Intl.DateTimeFormat('de-DE', {
-								year: 'numeric',
-								month: '2-digit',
-								day: '2-digit',
-								hour: '2-digit',
-								minute: '2-digit'
-							}).format(new Date(report.createdAt))} Uhr</td
-						>
-						<td>
-							{report.status === 'none'
-								? 'Unbearbeitet'
-								: report.status === 'review'
-									? 'In Bearbeitung'
-									: report.status === 'reviewed'
-										? 'Bearbeitet'
-										: ''}
-						</td>
-						<td>{report.draft ? 'Entwurf' : 'Erstellt'}</td>
-					</tr>
-				{/each}
-			</PaginationTableBody>
-		</table>
+							</td>
+							<td>
+								{report.reported?.username || ''}
+								{#if report.reported?.id}
+									<button
+										class="pl-1"
+										title="Nach Reportetem Spieler filtern"
+										onclick={(e) => {
+											e.stopPropagation();
+											reportFilter.reported = report.reported.username;
+											fetchReports({ from: 0 }).then((r) => (reports = r.reports));
+										}}
+									>
+										<MagnifyingGlass size="14" />
+									</button>
+								{/if}
+							</td>
+							<td
+								>{new Intl.DateTimeFormat('de-DE', {
+									year: 'numeric',
+									month: '2-digit',
+									day: '2-digit',
+									hour: '2-digit',
+									minute: '2-digit'
+								}).format(new Date(report.createdAt))} Uhr</td
+							>
+							<td>
+								{report.status === 'none'
+									? 'Unbearbeitet'
+									: report.status === 'review'
+										? 'In Bearbeitung'
+										: report.status === 'reviewed'
+											? 'Bearbeitet'
+											: ''}
+							</td>
+							<td>{report.draft ? 'Entwurf' : 'Erstellt'}</td>
+						</tr>
+					{/each}
+				</PaginationTableBody>
+			</table>
+		</div>
 	</div>
 	{#if activeReport}
 		<div
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
index f9ca1d5..67169a7 100644
--- a/src/routes/admin/users/+page.svelte
+++ b/src/routes/admin/users/+page.svelte
@@ -96,7 +96,7 @@
 		<table class="table table-auto">
 			<thead>
 				<!-- prettier-ignore -->
-				<SortableTr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
+				<SortableTr>
 					<th></th>
 					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'firstname', asc: e.asc}}}>Vorname</SortableTh>
 					<SortableTh onSort={(e) => userFilter = {...userFilter, sort: {key: 'lastname', asc: e.asc}}}>Nachname</SortableTh>