CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

remove table resizing and fix admin panel user scroll behavior
All checks were successful
delpoy / build-and-deploy (push) Successful in 56s
Details

Browse Source
This commit is contained in:
bytedream
2023-09-30 02:13:09 +02:00
parent b1f546ee94
commit 9ababd4847
4 changed files with 46 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/routes/admin/users/+page.svelte
View File

@ -5,7 +5,7 @@
import Select from '$lib/components/Input/Select.svelte';
import { env } from '$env/dynamic/public';
import type { User } from '$lib/server/database';
import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
import { buttonTriggeredRequest } from '$lib/components/utils';
import { browser } from '$app/environment';
import HeaderBar from './HeaderBar.svelte';
@ -120,16 +120,16 @@
}
</script>
<div>
<div class="h-screen flex flex-col overflow-hidden">
<HeaderBar bind:userFilter />
<hr class="divider my-1 mx-8 border-none" />
<div class="h-[90vh] overflow-scroll" bind:this={userTableContainerElement}>
<table class="table relative">
<div class="h-full overflow-scroll" bind:this={userTableContainerElement}>
<table class="table table-auto">
<thead>
<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
<th />
{#each headers as header}
<th on:mousedown={(e) => resizeTableColumn(e, 5)}>
<th>
<button
class="flex items-center"
on:click={() => {
@ -155,14 +155,14 @@
{#await currentPageUsersRequest then _}
{#each currentPageUsers as user, i}
<tr>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>{i + 1}</td>
<td>
<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input
type="date"
value={new Date(user.birthday).toISOString().split('T')[0]}
@ -171,23 +171,23 @@
size="sm"
/>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm">
<option value="java">Java Edition</option>
<option value="bedrock">Bedrock Edition</option>
<option value="cracked">Java cracked</option>
</Select>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<Input
id="uuid"
type="text"
@ -196,7 +196,7 @@
size="sm"
/>
</td>
<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
<td>
<div class="flex gap-1">
{#if user.edit}
<button
@ -242,43 +242,18 @@
{/key}
</tbody>
</table>
</div>
<div class="flex justify-center w-full mt-4 mb-6">
<div class="join">
{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
<button
class="join-item btn"
class:btn-active={i === userPage}
on:click={() => {
userPage = i;
}}>{i + 1}</button
>
{/each}
<div class="flex justify-center items-center mb-2 mt-4 w-full">
<div class="join">
{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
<button
class="join-item btn"
class:btn-active={i === userPage}
on:click={() => {
userPage = i;
}}>{i + 1}</button
>
{/each}
</div>
</div>
</div>
</div>
<style lang="scss">
thead tr th,
tbody tr td {
@apply relative;
&:not(:first-child) {
@apply border-l-[1px] border-dashed;
&::before {
@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
&:not(:last-child) {
@apply border-r-[1px] border-dashed border-base-300;
&::after {
@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
content: '';
}
}
}
</style>