final clean up

COS301-SE-2024 · Sep 28, 2024 · 1b2d8fd · 1b2d8fd
1 parent cd6b6ab
commit 1b2d8fd
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 56 deletions.
diff --git a/src/src/lib/components/forms/interactive/Notes.svelte b/src/src/lib/components/forms/interactive/Notes.svelte
@@ -64,7 +64,7 @@
 
 <Toaster />
 
-<main class="container mx-auto p-4">
+<main class="container mx-auto p-4 dark:bg-gray-700">
 	<div class="p-2 md:px-5 md:py-2">
 		<form method="POST" action="?/editContent" use:enhance={save}>
 			<div class="grid grid-cols-12 gap-6">

diff --git a/src/src/lib/components/forms/interactive/viewers/MCQ.svelte b/src/src/lib/components/forms/interactive/viewers/MCQ.svelte
@@ -41,7 +41,7 @@
 
 <Toaster />
 
-<main class="container mx-auto p-4">
+<main class="container mx-auto p-4 sm:w-[100vw]">
 	<div class="p-2 md:px-5 md:py-2">
 		<form method="POST" action="?/answerMCQ" use:enhance={save}>
 			<div class="grid grid-cols-12 gap-6">

diff --git a/src/src/lib/components/forms/interactive/viewers/Mover.svelte b/src/src/lib/components/forms/interactive/viewers/Mover.svelte
@@ -17,46 +17,91 @@
 		if (currIndex < content.length - 1) {
 			currIndex++;
 			currItem = content[currIndex];
-		} else {
-			currIndex = 0;
-			currItem = content[currIndex];
 		}
 	}
 
 	function moveBackward() {
 		if (currIndex > 0) {
 			currIndex--;
 			currItem = content[currIndex];
-		} else {
-			currIndex = content.length - 1;
-			currItem = content[currIndex];
 		}
 	}
 
 	$: currItem = content[currIndex];
+	$: stepsAhead = Math.min(3, content.length - currIndex);
 </script>
 
-<div>
-	<div>
-		<div class="my-4 rounded-2xl border-2 border-dashed border-green-600 bg-white p-4 shadow-lg">
-			<div class="flex justify-between">
-				<button class="rounded-lg bg-green-600 px-4 py-2 text-white" on:click={moveBackward}>
-					Previous
-				</button>
-				<button class="rounded-lg bg-green-600 px-4 py-2 text-white" on:click={moveForward}>
-					Next
-				</button>
+<div class="space-y-4">
+	<div class="flex flex-col items-center gap-4 sm:grid sm:grid-cols-12">
+		<!-- Previous Button -->
+		<div class="w-full sm:col-span-1 sm:flex sm:justify-start">
+			<button
+				class="w-full rounded-lg bg-green-600 px-4 py-2 text-white sm:w-auto"
+				on:click={moveBackward}
+				disabled={currIndex === 0}
+			>
+				Previous
+			</button>
+		</div>
+
+		<!-- Stepper Navigation in the Center -->
+		<div
+			class="w-full rounded-2xl border-2 bg-white p-4 shadow-lg sm:col-span-10 sm:flex sm:justify-center"
+		>
+			<!-- Stepper -->
+			<div data-hs-stepper="" class="w-full">
+				<!-- Stepper Nav -->
+				<ul class="mb-4 flex w-full items-center justify-center">
+					{#each Array(stepsAhead) as _, i}
+						<li class="flex flex-1 items-center last:flex-none">
+							<div class="flex flex-1 items-center">
+								<span class="flex items-center text-xs sm:text-sm">
+									<span
+										class={`mr-2 flex size-6 flex-shrink-0 items-center justify-center rounded-full font-medium sm:size-8
+										${i === 0 ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-800'}`}
+									>
+										{currIndex + i + 1}
+									</span>
+									<span class="hidden sm:inline">{content[currIndex + i].title ?? 'Question'}</span>
+								</span>
+								<!-- this was done to make the linter stop failing -->
+								<span class="hidden">
+									{_}
+								</span>
+								{#if i < stepsAhead - 1}
+									<div class="mx-2 h-px w-full bg-gray-200"></div>
+								{/if}
+							</div>
+						</li>
+					{/each}
+				</ul>
+				<!-- End Stepper Nav -->
 			</div>
+			<!-- End Stepper -->
+		</div>
+
+		<!-- Next Button -->
+		<div class="w-full sm:col-span-1 sm:flex sm:justify-end">
+			<button
+				class="w-full rounded-lg bg-green-600 px-4 py-2 text-white sm:w-auto"
+				on:click={moveForward}
+				disabled={currIndex === content.length - 1}
+			>
+				Next
+			</button>
 		</div>
 	</div>
 
-	<div>
-		{#if currItem.type == 'MCQ'}
-			<MCQ question={currItem} />
-		{:else if currItem.type == 'Note'}
-			<Note note={currItem} />
-		{:else if currItem.type == 'ThreeDMaterial'}
-			<ThreeDMaterial material={currItem} />
-		{/if}
+	<!-- Content Centered Below -->
+	<div class="flex justify-center">
+		<div class="w-full px-4 sm:px-0">
+			{#if currItem.type == 'MCQ'}
+				<MCQ question={currItem} />
+			{:else if currItem.type == 'Note'}
+				<Note note={currItem} />
+			{:else if currItem.type == 'ThreeDMaterial'}
+				<ThreeDMaterial material={currItem} />
+			{/if}
+		</div>
 	</div>
 </div>
diff --git a/src/src/lib/components/forms/interactive/viewers/Notes.svelte b/src/src/lib/components/forms/interactive/viewers/Notes.svelte
@@ -1,35 +1,76 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	export let note: any;
 
-	let selected = note.content;
+	let isPDF = note.content.endsWith('.pdf');
+	let pdfUrl = note.content;
+	let fallbackSource = `https://docs.google.com/gview?url=${encodeURIComponent(pdfUrl)}&embedded=true`;
+	let isMobile = false;
 
-	$: selected;
+	function checkIfMobile() {
+		isMobile = window.innerWidth <= 768;
+		console.log('Mobile:', isMobile);
+	}
+
+	onMount(() => {
+		checkIfMobile();
+		window.addEventListener('resize', checkIfMobile);
+		return () => {
+			window.removeEventListener('resize', checkIfMobile);
+		};
+	});
 </script>
 
-<main class="container mx-auto p-4">
-	<div class="p-2 md:px-5 md:py-2">
-		<div class="grid grid-cols-12 justify-center gap-6 text-center">
-			<div class="col-span-10">
-				<div class="mb-6">
-					<h2 class="mb-2 text-2xl">
-						{note.title}
-					</h2>
-				</div>
-				<div>
-					<div class="flex justify-center p-3">
-						<section
-							class="flex h-[100%] w-[100%] flex-col space-y-4 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
-						>
-							<div class="flex-1">
-								<object
-									id="pdf-file"
-									class="h-[100vh] w-full flex-grow"
-									data={note.content}
-									title="Study Material"
+<main class="container mx-auto px-2 py-4 sm:px-4 md:px-6 lg:px-8">
+	<div class="mx-auto w-full max-w-4xl">
+		<div class="flex flex-col items-center">
+			<!-- Title Section -->
+			<div class="mb-4 w-full">
+				<h2 class="text-center text-xl font-semibold sm:text-2xl md:text-3xl">
+					{note.title}
+				</h2>
+			</div>
+			<!-- Content Section -->
+			<div class="w-full">
+				<div class="p-2 sm:p-3">
+					<section
+						class="flex flex-col space-y-2 rounded-lg bg-gray-200 p-2 shadow-md ring dark:bg-gray-700"
+					>
+						<div class="w-full flex-1">
+							{#if isPDF}
+								{#if !isMobile}
+									<!-- Try to render PDF using the native PDF viewer -->
+									<object
+										id="pdf-file"
+										class="h-[50vh] w-full sm:h-[60vh] md:h-[70vh] lg:h-[80vh]"
+										data={pdfUrl}
+										type="application/pdf"
+										title="Study Material"
+									>
+										<p>
+											Your browser doesn't support PDF viewing. Switching to Google PDF Viewer...
+										</p>
+									</object>
+								{:else}
+									<!-- Fallback to Google PDF viewer -->
+									<iframe
+										id="google-pdf-viewer"
+										class="h-[50vh] w-full sm:h-[60vh] md:h-[70vh] lg:h-[80vh]"
+										src={fallbackSource}
+										frameborder="0"
+										title="Study Material"
+									></iframe>
+								{/if}
+							{:else}
+								<!-- Image viewer for non-PDF content -->
+								<img
+									src={note.content}
+									alt={note.title}
+									class="h-auto max-h-[50vh] w-full object-contain sm:max-h-[60vh] md:max-h-[70vh] lg:max-h-[80vh]"
 								/>
-							</div>
-						</section>
-					</div>
+							{/if}
+						</div>
+					</section>
 				</div>
 			</div>
 		</div>

diff --git a/src/src/lib/components/forms/interactive/viewers/ThreeDMaterial.svelte b/src/src/lib/components/forms/interactive/viewers/ThreeDMaterial.svelte
@@ -3,7 +3,7 @@
 	export let material: LessonThreeDMaterial;
 </script>
 
-<main class="container mx-auto p-4">
+<main class="container mx-auto p-4 sm:w-[100vw]">
 	<div class="p-2 md:px-5 md:py-2">
 		<div class="grid grid-cols-12 justify-center gap-6 text-center">
 			<div class="col-span-10">

diff --git a/src/src/routes/(app)/workspaces/[workspace]/interactive/[interactive]/+page.svelte b/src/src/routes/(app)/workspaces/[workspace]/interactive/[interactive]/+page.svelte
@@ -54,10 +54,7 @@
 						{:else if item.type == 'Note'}
 							<Note {materials} note={item} />
 						{:else if item.type == 'ThreeDMaterial'}
-							<ThreeDMaterial
-								materials={threeDMaterials}
-								threeDMaterial={item}
-							/>
+							<ThreeDMaterial materials={threeDMaterials} threeDMaterial={item} />
 						{/if}
 					</div>
 				{/each}