From 31c43254797eea1b87ddac6dd26253a6238c3074 Mon Sep 17 00:00:00 2001
From: chipShot-exe <200449938+chipShot-exe@users.noreply.github.com>
Date: Fri, 6 Nov 2026 22:37:03 -0800
Subject: [PATCH] apply patch to reimplement changes

---
 src/lib/components/ExternalLink.svelte        |  5 ++-
 src/routes/(public)/clubs/ClubList.svelte     | 43 ++++++++++++++++++-
 src/routes/(public)/discord/+page.svelte      |  2 +-
 .../panel/clubs/AutoImportClubsButton.svelte  | 12 ++++--
 4 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/ExternalLink.svelte b/src/lib/components/ExternalLink.svelte
index 065c1541..e920b6a0 100644
--- a/src/lib/components/ExternalLink.svelte
+++ b/src/lib/components/ExternalLink.svelte
@@ -2,16 +2,17 @@
 	interface Props {
 		href: string;
 		text: string;
+		AdditionalClasses?: string;
 	}
 
-	let { href, text }: Props = $props();
+	let { href, text, AdditionalClasses = '' }: Props = $props();
 </script>
 
 <a
 	{href}
 	target="_blank"
 	rel="noopener noreferrer"
-	class="font-medium text-blue-600 underline dark:text-blue-400"
+	class={`font-medium text-blue-600 underline dark:text-blue-400 ${AdditionalClasses}`}
 >
 	{text}
 </a>
diff --git a/src/routes/(public)/clubs/ClubList.svelte b/src/routes/(public)/clubs/ClubList.svelte
index 2eab9b21..e960266c 100644
--- a/src/routes/(public)/clubs/ClubList.svelte
+++ b/src/routes/(public)/clubs/ClubList.svelte
@@ -48,7 +48,7 @@
 		<Search size="md" placeholder="Search" bind:value={search} />
 	</div>
 </div>
-<Table striped shadow class="table-fixed">
+<Table striped shadow class="hidden table-fixed sm:table">
 	<TableHead>
 		<TableHeadCell>Name</TableHeadCell>
 		<TableHeadCell>Day & Time</TableHeadCell>
@@ -82,3 +82,44 @@
 		{/each}
 	</TableBody>
 </Table>
+<!-- TODO: figure out if it is possible to integrate this with a table, when it was initially written the table was removing the styling-->
+<div class="mx-auto flex flex-col font-sans sm:hidden">
+	<main class="flex-1 divide-y divide-gray-200 overflow-y-auto dark:divide-gray-700">
+		{#each searchedClubs as club}
+			<div
+				class="flex flex-col bg-white p-4 transition-colors even:bg-gray-50 dark:bg-gray-800 dark:even:bg-gray-700"
+			>
+				<div class="flex w-full items-start justify-between">
+					{#if club.desc}
+						<InfoCircleOutline class="mr-2 inline h-8 w-8 text-gray-500 dark:text-gray-400" />
+						<Popover title={club.name} placement="top-start" class="max-w-lg">
+							{club.desc}
+						</Popover>
+					{/if}
+					<div class="-mx-0.5 flex flex-1 flex-col pr-4">
+						<h2 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
+							{club.name}
+						</h2>
+						<span class="mt-0.5 text-[0.8125rem] font-semibold text-gray-600 dark:text-gray-300">
+							{club.advisor} | {club.location}
+						</span>
+					</div>
+
+					<div class="flex-shrink-0 -translate-y-2 pl-2 text-right">
+						{#if club.instagram && club.instagram !== 'N/A'}
+							<ExternalLink
+								href="https://instagram.com/{club.instagram}"
+								text="@{club.instagram}"
+								AdditionalClasses="!font-bold text-md"
+							/>
+						{/if}
+					</div>
+				</div>
+
+				<div class="mt-2 w-full">
+					<p class="text-sm font-bold text-gray-500 dark:text-gray-400">{club.dayAndTime}</p>
+				</div>
+			</div>
+		{/each}
+	</main>
+</div>
diff --git a/src/routes/(public)/discord/+page.svelte b/src/routes/(public)/discord/+page.svelte
index 69b3b614..0991315a 100644
--- a/src/routes/(public)/discord/+page.svelte
+++ b/src/routes/(public)/discord/+page.svelte
@@ -11,7 +11,7 @@
 		<div class="mb-4 mt-4 grid place-items-center text-xl">
 			<ExternalLink
 				href="https://seattleschools-my.sharepoint.com/:w:/g/personal/1rcmclain_seattleschools_org/IQDdTy6CDx8_TatHAPkj-TrbARQ2VadEAwxXiliuI6vu_CI?e=nOO3vJ"
-				text="discord link (access restricted)"
+				text="Discord link (Access Restricted)"
 			/>
 		</div>
 		<p class="mb-4 text-center">
diff --git a/src/routes/admin/panel/clubs/AutoImportClubsButton.svelte b/src/routes/admin/panel/clubs/AutoImportClubsButton.svelte
index 2a6058f3..710788d9 100644
--- a/src/routes/admin/panel/clubs/AutoImportClubsButton.svelte
+++ b/src/routes/admin/panel/clubs/AutoImportClubsButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ValidatedInput from '$components/form/ValidatedInput.svelte';
 	import ValidatedTextarea from '$components/form/ValidatedTextarea.svelte';
+	import ExternalLink from '$components/ExternalLink.svelte';
 	import { GradientButton, Helper, Modal, Tooltip } from 'flowbite-svelte';
 	import { InfoCircleOutline } from 'flowbite-svelte-icons';
 	import { string } from 'yup';
@@ -105,10 +106,13 @@ https://lhs.cx/old-clubs
 
 <Modal bind:open={modalOpen} size="lg" autoclose={false} title="Auto Import From CSV">
 	<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-		Instructions: Visit the ASB club excel sheet, click on file, export as CSV (without formatting,
-		utf8 format), then open the CSV in a program such as notepad and copy+paste the content here.
-		Usually you don't need to input the start and end row, but if you are having issues, you can
-		specify the start and end row of the data you want to import.
+		Instructions: <ExternalLink
+			href="https://seattleschools-my.sharepoint.com/:x:/g/personal/1sanishio_seattleschools_org/IQAZqlZ6RBFwTbXkYlOC-Mf0ARDHNBxXC9gCzo9RWRfOrBY?e=LOT1KU"
+			text="Visit the ASB club excel sheet"
+		/>, click on file, export as CSV (without formatting, utf8 format), then open the CSV in a
+		program such as notepad and copy+paste the content here. Usually you don't need to input the
+		start and end row, but if you are having issues, you can specify the start and end row of the
+		data you want to import.
 	</p>
 	<form {onsubmit} class="flex flex-col items-center gap-4">
 		<div class="flex flex-col gap-4 sm:flex-row">