From 08a6a8a15cb52d704fed520c47303b26e4b16c39 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Tue, 28 Jan 2025 17:25:21 -0800
Subject: [PATCH] fix width for online-store

---
 src/pages/online-store.astro | 221 ++++++++++++++++++-----------------
 1 file changed, 113 insertions(+), 108 deletions(-)

diff --git a/src/pages/online-store.astro b/src/pages/online-store.astro
index 42dc43c..626cf5e 100644
--- a/src/pages/online-store.astro
+++ b/src/pages/online-store.astro
@@ -6,119 +6,124 @@ const title = "IEEE Store";
 ---
 
 <Layout {title}>
-  <main class="w-[95%] mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen">
-    <h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1>
-    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-      <!-- Left Column - User Info -->
-      <div class="lg:col-span-2 2xl:col-span-1 h-fit">
-        <UserProfile />
-      </div>
+    <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>
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
+            <!-- Left Column - User Info -->
+            <div class="lg:col-span-2 2xl:col-span-1 h-fit">
+                <UserProfile />
+            </div>
 
-      <!-- Right Column - Store Items -->
-      <div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
-        <div id="storeItemsGrid" class="h-full">
-          <div
-            class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
-          >
-            <div
-              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">
-                <h2 class="card-title text-3xl justify-center mb-6">
-                  Store Coming Soon!
-                </h2>
-                <div class="space-y-4">
-                  <p class="text-base-content/70 text-lg">
-                    Our store is currently under development. Check back later
-                    for IEEE UCSD merchandise! In the meantime, please make sure
-                    your profile is up to date with your IEEE Member ID and
-                    resume.
-                  </p>
+            <!-- Right Column - Store Items -->
+            <div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
+                <div id="storeItemsGrid" class="h-full">
+                    <div
+                        class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
+                    >
+                        <div
+                            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">
+                                <h2
+                                    class="card-title text-3xl justify-center mb-6"
+                                >
+                                    Store Coming Soon!
+                                </h2>
+                                <div class="space-y-4">
+                                    <p class="text-base-content/70 text-lg">
+                                        Our store is currently under
+                                        development. Check back later for IEEE
+                                        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>
-        <!-- 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>
-  </main>
+    </main>
 </Layout>
 
 <script>
-  import { StoreAuth } from "../components/auth/StoreAuth";
-  new StoreAuth();
+    import { StoreAuth } from "../components/auth/StoreAuth";
+    new StoreAuth();
 </script>