Skip to content

Commit

Permalink
update admin dashboard table to responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
everywherejacobkim committed Oct 16, 2023
1 parent 36aecfb commit 909d88a
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 13 deletions.
12 changes: 6 additions & 6 deletions src/lib/components/AdminTable.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,20 @@

<div>
<button
class="absolute top-0 right-24 m-7 bg-royalBlue-500/75 hover:bg-royalBlue-500 text-white font-bold py-2 px-4 rounded-lg"
class="hidden md:block absolute top-0 right-24 m-7 bg-royalBlue-500/75 hover:bg-royalBlue-500 text-white font-bold py-2 px-4 rounded-lg"
on:click={printContent}>
Print
</button>
<button
<!-- <button
class="absolute top-0 right-44 m-7 bg-amber-300/75 hover:bg-amber-400 text-white font-bold py-2 px-4 rounded-lg"
on:click={() => exportExcel(null, 'data.csv')}>
on:click={() => exportExcel(table, 'data.csv')}>
CSV
</button>
</button> -->
<DataTable stickyHeader aria-label="Ticket List" class="w-[180%] overflow-auto" id="print-area">
<Head class="w-full">
<Row class="border text-center bg-royalBlue-50 m-4">
<Cell class="w-[2%]">번호</Cell>
<Cell class="w-[5%]">신청일</Cell>
<Cell class="w-[10%] md:w-[2%]">번호</Cell>
<Cell class="w-[28%] md:w-[5%]">신청일</Cell>
<Cell class="w-[8%]">이름</Cell>
<Cell class="w-[20%]">Email</Cell>
<Cell class="">직업</Cell>
Expand Down
15 changes: 8 additions & 7 deletions src/lib/components/Drawer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,20 @@
export let ticketValue: Map<string, DB.Ticket>
</script>

<div class="flex h-full border">
<Drawer class="w-80 max-h-screen">
<Content class="h-full">
<List class="flex-start flex-col gap-2 p-2 border bg-gray-50 h-full overflow-y-auto">
<div class="flex flex-col md:flex-row h-full border">
<Drawer class="md:w-80 max-h-screen">
<Content class="h-full overflow-x-auto">
<List
class="flex-start flex-row md:flex-col gap-2 p-1 md:p-2 border bg-gray-50 h-full overflow-y-auto">
{#each events as event}
<button on:click={() => goto(`/admin/dashboard?eventId=${event.id}`)}>
<Item
id="event-title"
class={twMerge(
'flex p-2 cursor-pointer bg-gray-100 text-gray-500/80 hover:bg-gray-300 ease-in-out duration-200 rounded font-semibold',
'w-60 line-clamp-1 md:w-full flex p-2 cursor-pointer bg-gray-100 text-gray-500/80 hover:bg-gray-300 ease-in-out duration-200 rounded font-semibold',
event.id === $selectedEventId && 'bg-gray-300 text-gray-900 font-semibold'
)}>
<Text class="text-start">{event.title}</Text>
<Text class="text-start text-sm md:text-base">{event.title}</Text>
</Item>
</button>
{/each}
Expand All @@ -31,7 +32,7 @@

<AppContent class="w-full flex-auto overflow-auto">
<main class="h-full">
<List class="flex-start flex-col gap-1 border h-full overflow-auto p-2">
<List class="flex-start flex-col gap-1 border h-full horizontal-overflow-auto p-2">
{#if ticketValue && ticketValue.size > 0}
<AdminTable />
{:else}
Expand Down

0 comments on commit 909d88a

Please sign in to comment.