Stephen10121 · Stephen10121 · May 17, 2026 · May 12, 2026 · May 17, 2026 · May 17, 2026
diff --git a/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte b/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+    import * as Tabs from "$lib/components/ui/tabs/index.js";
     import type { ImageListCustomizations } from "@/utils";
     import * as Card from "@/components/ui/card/index";
     import { Switch } from "@/components/ui/switch";
@@ -36,6 +37,19 @@
     <Card.Content>
         <div class="grid grid-cols-1 gap-6">
             {#if updateEventListForm.fields["displaySettings"]}
+                <div class="flex justify-between flex-col space-y-2">
+                    <Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
+                        <span class="font-medium">Display Style</span>
+                        <span class="text-sm text-muted-foreground">You can choose a minimal or expanded option.</span>
+                    </Label>
+                    <input {...updateEventListForm.fields["displaySettings"]["displayStyle"].as("hidden", displaySettingsBindable.displayStyle)} />
+                    <Tabs.Root bind:value={displaySettingsBindable.displayStyle} class="w-full">
+                        <Tabs.List class="w-full">
+                            <Tabs.Trigger value="minimal">Minimal</Tabs.Trigger>
+                            <Tabs.Trigger value="expanded">Expanded</Tabs.Trigger>
+                        </Tabs.List>
+                    </Tabs.Root>
+                </div>
                 <div class="flex items-center justify-between space-x-2">
                     <Label for="showUpcomingEventsTextAndDesc" class="flex flex-col items-start space-y-1 cursor-pointer">
                         <span class="font-medium">Display List Header</span>

diff --git a/frontend/src/lib/eventList/EventCard.svelte b/frontend/src/lib/eventList/EventCard.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
     import type { ImageListCustomizations } from "@/utils";
+	import Badge from "@/components/ui/badge/badge.svelte";
     import type { EventDBModel } from "@/event.utils";
     import { Button } from "@/components/ui/button";
     import PrettyDate from "@/PrettyDate.svelte";
     import { Temporal } from "temporal-polyfill";
+	import { Calendar } from "@lucide/svelte";
 
     let {
         event,
@@ -17,34 +19,55 @@
         reverse?: boolean
     } = $props();
 
+    // svelte-ignore state_referenced_locally
     console.log(event);
     $inspect(event);
 </script>
 
-<div class="card {reverse ? "reverse" : ""}">
+<div class="card {displaySettings.displayStyle} {reverse ? "reverse" : ""}">
         <div class="img-parent">
             <img src={event.imageURL} alt={event.name}>
         </div>
 
         <div class="content-parent">
+            {#if displaySettings.displayStyle === "expanded" && event.featured}
+                <Badge class="mb-4">FEATURED EVENT</Badge>
+            {/if}
+
             {#if displaySettings.showEventName}
                 <h2 class="text-balance text-2xl text-center font-light tracking-tight text-card-foreground">{event.name}</h2>
             {/if}
 
             <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                <p class="mt-0.5"><PrettyDate date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} /></p>
+                <p class="mt-3 flex gap-3 items-center">
+                    {#if displaySettings.displayStyle === "expanded"}
+                        <Calendar class="w-5 h-5" />
+                    {/if}
+                    <PrettyDate date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} />
+                </p>
             </div>
 
             {#if event.description && displaySettings.showEventDescription}
-                <p class="event-description text-pretty leading-relaxed text-muted-foreground px-1">{event.description}</p>
+                <p class="event-description text-pretty leading-relaxed text-muted-foreground mt-3">{event.description}</p>
             {/if}
 
             {#if event.registrationURL && displaySettings.showEventRegistration}
-                <div class="mt-2">
-                    <Button class="w-full md:w-auto rounded-none font-light" variant="default">
-                        <a href={event.registrationURL} target="_blank" rel="noopener noreferrer">Register Now</a>
+                <div class="buttonparent{displaySettings.displayStyle} mt-2">
+                    <Button class="button{displaySettings.displayStyle} w-full md:w-auto rounded-none font-light" variant="default" href={event.registrationURL} target="_blank" rel="noopener noreferrer">
+                        More Info
                     </Button>
+                    <!-- {#if displaySettings.displayStyle === "expanded"}
+                        <Button class="sharebutton{displaySettings.displayStyle}" variant="outline">
+                            <Share2 />
+                        </Button>
+                    {/if} -->
                 </div>
+            <!-- {:else if displaySettings.displayStyle === "expanded"}
+                <div class="buttonparent{displaySettings.displayStyle}">
+                    <Button class="sharebutton{displaySettings.displayStyle}" variant="outline">
+                        <Share2 />
+                    </Button>
+                </div> -->
             {/if}
         </div>
 </div>
@@ -59,9 +82,16 @@
         grid-template-areas: 
         "image"
         "content";
+        background-color: #ffffff;
+    }
+
+    .card.expanded {
+        background-color: #f3f3f4;
+        border: none;
+        border-radius: 20px;
     }
 
-    @media screen and (min-width: 600px) {
+    @media screen and (min-width: 850px) {
         .card {
             grid-template-columns: 61fr 39fr;
             grid-template-rows: 1fr;
@@ -107,13 +137,46 @@
         row-gap: 3px;
         min-width: 0;
         min-height: 0;
-        background-color: #ffffff;
     }
 
-    .event-description {
+    .card.expanded .content-parent {
+        padding: 30px;
+        align-items: flex-start;
+    }
+
+    .card.expanded h2 {
+        font-weight: bold;
+    }
+
+    .card:not(.expanded) .event-description {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        text-align: center;
+    }
+
+    .event-description {
         width: 100%;
     }
+
+    .buttonparentexpanded {
+        margin-top: 20px;
+        display: flex;
+        gap: 10px;
+    }
+
+    :global(.buttonexpanded) {
+        background-color: #000000;
+        border-radius: 10px;
+        font-weight: bold;
+        width: 150px;
+        height: 40px;
+        letter-spacing: 0.15ch;
+    }
+
+    :global(.sharebuttonexpanded) {
+        border-radius: 100%;
+        height: 40px;
+        width: 40px;
+    }
 </style>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
@@ -138,6 +138,7 @@ export type ImageFeedCustomizations = {
 }
 
 export type ImageListCustomizations = {
+	displayStyle: "minimal" | "expanded",
 	showEventName: boolean,
 	showEventDescription: boolean,
 	showEventRegistration: boolean,
@@ -146,6 +147,7 @@ export type ImageListCustomizations = {
 }
 
 export const defaultImageListCustomizations: ImageListCustomizations = {
+	displayStyle: "minimal",
 	showEventName: true,
 	showEventDescription: true,
 	showEventRegistration: true,

diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts
@@ -67,13 +67,14 @@ const UpdateEventListSchema = v.object({
     description: v.string(),
     avatarLink: v.optional(v.string()),
     newAvatar: v.optional(v.any()),
-    displaySettings: v.optional(v.object({
+    displaySettings: v.object({
+        displayStyle: v.picklist(["minimal", "expanded"]),
         showEventName: v.optional(v.boolean(), false),
         showEventDescription: v.optional(v.boolean(), false),
         showEventRegistration: v.optional(v.boolean(), false),
         showUpcomingEventsTextAndDesc: v.optional(v.boolean(), false),
 	    setTransparentBackground: v.optional(v.boolean(), false)
-    }), undefined),
+    }),
     filters: v.optional(v.object({
         onlyShowFeatured: v.optional(v.boolean(), false),
         hideUnpublished: v.optional(v.boolean(), false),
@@ -94,13 +95,7 @@ export const updateEventListForm = form(UpdateEventListSchema, async (updatedELi
         let data: Partial<EventListDBModel> = {
             "name": updatedEList.name,
             "description": updatedEList.description,
-            "displaySettings": updatedEList.displaySettings ? updatedEList.displaySettings : {
-                "showEventName": false,
-                "showEventDescription": false,
-                "showEventRegistration": false,
-                "showUpcomingEventsTextAndDesc": false,
-                "setTransparentBackground": false
-            },
+            "displaySettings": updatedEList.displaySettings,
             "filters": updatedEList.filters ? updatedEList.filters : {
                 "hideUnpublished": false,
                 "onlyShowFeatured": false,

diff --git a/frontend/src/routes/elist/[slug]/+page.svelte b/frontend/src/routes/elist/[slug]/+page.svelte
@@ -54,7 +54,7 @@
 </svelte:head>
 
 <main style="{displaySettings.setTransparentBackground ? "" : "background: #fff;"}">
-    <div class="mx-auto max-w-4xl">
+    <div class="mx-auto">
         {#if displaySettings.showUpcomingEventsTextAndDesc}
             <div class="mb-3">
                 <h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">Upcoming Events</h1>

diff --git a/frontend/src/routes/elistPreview/[slug]/+page.svelte b/frontend/src/routes/elistPreview/[slug]/+page.svelte
@@ -67,7 +67,7 @@
 <svelte:window onmessage={parentSentMessage} />
 
 <main style="{displaySettings.setTransparentBackground ? "" : "background: #fff;"}">
-    <div class="mx-auto max-w-4xl">
+    <div class="mx-auto">
         {#if displaySettings.showUpcomingEventsTextAndDesc}
             <div class="mb-3">
                 <h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">Upcoming Events</h1>