fix width for online-store

This commit is contained in:
chark1es 2025-01-28 17:25:21 -08:00
parent 06c0155c82
commit 08a6a8a15c

View file

@ -6,119 +6,124 @@ const title = "IEEE Store";
--- ---
<Layout {title}> <Layout {title}>
<main class="w-[95%] mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen"> <main class="mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen">
<h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1> <h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- Left Column - User Info --> <!-- Left Column - User Info -->
<div class="lg:col-span-2 2xl:col-span-1 h-fit"> <div class="lg:col-span-2 2xl:col-span-1 h-fit">
<UserProfile /> <UserProfile />
</div> </div>
<!-- Right Column - Store Items --> <!-- Right Column - Store Items -->
<div id="storeContent" class="lg:col-span-2 2xl:col-span-3"> <div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
<div id="storeItemsGrid" class="h-full"> <div id="storeItemsGrid" class="h-full">
<div <div
class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]" class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
> >
<div <div
class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto" class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto"
> >
<div class="text-center w-full"> <div class="text-center w-full">
<h2 class="card-title text-3xl justify-center mb-6"> <h2
Store Coming Soon! class="card-title text-3xl justify-center mb-6"
</h2> >
<div class="space-y-4"> Store Coming Soon!
<p class="text-base-content/70 text-lg"> </h2>
Our store is currently under development. Check back later <div class="space-y-4">
for IEEE UCSD merchandise! In the meantime, please make sure <p class="text-base-content/70 text-lg">
your profile is up to date with your IEEE Member ID and Our store is currently under
resume. development. Check back later for IEEE
</p> UCSD merchandise! In the meantime,
please make sure your profile is up to
date with your IEEE Member ID and
resume.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Officer View Content -->
<div id="officerContent" class="hidden">
<div
class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 lg:gap-0 mb-4"
>
<h2 class="text-2xl font-bold">Member Management</h2>
<div class="flex flex-col lg:flex-row gap-2">
<div class="form-control w-full">
<input
type="text"
id="resumeSearch"
placeholder="Search users..."
class="input input-bordered input-sm w-full"
/>
</div>
<div class="flex gap-2 w-full lg:w-auto">
<button
id="searchResumes"
class="btn btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
<span class="lg:hidden ml-2">Search</span>
</button>
<button
id="refreshResumes"
class="btn btn-ghost btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clip-rule="evenodd"></path>
</svg>
<span class="lg:hidden ml-2">Refresh</span>
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<!-- Use responsive classes -->
<thead class="hidden lg:table-header-group">
<tr>
<th>Name</th>
<th>Email</th>
<th>Member ID</th>
<th>Points</th>
<th>Resume</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="resumeList" class="divide-y">
<!-- Resume entries will be populated here -->
</tbody>
</table>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<!-- Officer View Content --> </main>
<div id="officerContent" class="hidden">
<div
class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 lg:gap-0 mb-4"
>
<h2 class="text-2xl font-bold">Member Management</h2>
<div class="flex flex-col lg:flex-row gap-2">
<div class="form-control w-full">
<input
type="text"
id="resumeSearch"
placeholder="Search users..."
class="input input-bordered input-sm w-full"
/>
</div>
<div class="flex gap-2 w-full lg:w-auto">
<button
id="searchResumes"
class="btn btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<span class="lg:hidden ml-2">Search</span>
</button>
<button
id="refreshResumes"
class="btn btn-ghost btn-sm flex-1 lg:flex-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
clip-rule="evenodd"></path>
</svg>
<span class="lg:hidden ml-2">Refresh</span>
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-zebra w-full">
<!-- Use responsive classes -->
<thead class="hidden lg:table-header-group">
<tr>
<th>Name</th>
<th>Email</th>
<th>Member ID</th>
<th>Points</th>
<th>Resume</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="resumeList" class="divide-y">
<!-- Resume entries will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
</Layout> </Layout>
<script> <script>
import { StoreAuth } from "../components/auth/StoreAuth"; import { StoreAuth } from "../components/auth/StoreAuth";
new StoreAuth(); new StoreAuth();
</script> </script>