fix mobile view

This commit is contained in:
chark1es 2025-01-27 17:00:22 -08:00
parent 3684071673
commit dee0a65dbe
2 changed files with 25 additions and 26 deletions

View file

@ -857,9 +857,7 @@ export class StoreAuth {
// Officer view toggle event listener - now just toggles visibility // Officer view toggle event listener - now just toggles visibility
this.elements.officerViewCheckbox.addEventListener("change", (e) => { this.elements.officerViewCheckbox.addEventListener("change", (e) => {
const isChecked = (e.target as HTMLInputElement).checked; const isChecked = (e.target as HTMLInputElement).checked;
const storeItemsContainer = document.querySelector( const storeItemsContainer = document.getElementById("storeItemsGrid");
".grid.grid-cols-1.lg\\:grid-cols-2.xl\\:grid-cols-3",
) as HTMLElement;
const { officerContent } = this.elements; const { officerContent } = this.elements;
if (storeItemsContainer) { if (storeItemsContainer) {

View file

@ -10,33 +10,34 @@ const title = "IEEE Store";
<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 xl: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 xl:col-span-3"> <div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6"> <div id="storeItemsGrid" class="h-full">
<StoreItem <div
name="Item Name" class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
description="Description of the item goes here. This is a placeholder." >
price={20.0} <div
/> class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto"
<StoreItem >
name="Item Name" <div class="text-center w-full">
description="Description of the item goes here. This is a placeholder." <h2 class="card-title text-3xl justify-center mb-6">
price={25.0} Store Coming Soon!
/> </h2>
<StoreItem <div class="space-y-4">
name="Item Name" <p class="text-base-content/70 text-lg">
description="Description of the item goes here. This is a placeholder." Our store is currently under development. Check back later
price={15.0} for IEEE UCSD merchandise! In the meantime, please make sure
/> your profile is up to date with your IEEE Member ID and
<StoreItem resume.
name="Item Name" </p>
description="Description of the item goes here. This is a placeholder." </div>
price={15.0} </div>
/> </div>
</div>
</div> </div>
<!-- Officer View Content --> <!-- Officer View Content -->
<div id="officerContent" class="hidden"> <div id="officerContent" class="hidden">