Made modal more specific, fixed video responsiveness issue, and updat…

…ed about section
milkcee12 · Feb 11, 2024 · 07f5b21 · 07f5b21
1 parent 16fd85f
commit 07f5b21
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 16 deletions.
diff --git a/src/lib/components/common/Modal.svelte → ...lib/components/common/GalleryModal.svelte b/src/lib/components/common/Modal.svelte → ...lib/components/common/GalleryModal.svelte
diff --git a/src/routes/(app)/about/+page.svelte b/src/routes/(app)/about/+page.svelte
@@ -91,7 +91,7 @@
         <li>Bleach</li>
         <li>Fairy Tail</li>
         <li>Link Click</li>
-        <li>Haikyuu!</li>
+        <li>Frieren: Beyond Journey's End</li>
         <li>Birdie Wing</li>
       </ul>
     </div>

diff --git a/src/routes/(app)/playground/+page.svelte b/src/routes/(app)/playground/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { openModal } from "svelte-modals";
-  import Modal from "$lib/components/common/Modal.svelte";
+  import GalleryModal from "$lib/components/common/GalleryModal.svelte";
   import Heading from "$lib/components/common/Heading.svelte";
   import LazyImage from "$lib/components/common/LazyImage.svelte";
   import { loadImagesFromModule } from "$lib/util";
@@ -10,7 +10,6 @@
   import cowsRoomStill1 from "$lib/images/playground/cows_room_still1.jpg";
   import cowsRoomPlaceholder from "$lib/images/playground/cows_room_placeholder.jpg";
   import cowsRoomVideo from "$lib/images/playground/cows_room.mp4";
-  import ColorLink from "$lib/components/common/ColorLink.svelte";
 
   enum Module {
     FEATURED = 0,
@@ -76,7 +75,7 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="item"
-          on:click={() => openModal(Modal, { imageData: imageData })}>
+          on:click={() => openModal(GalleryModal, { imageData: imageData })}>
           <div class="hover-overlay" />
           <p>{title}<br /><small><i>{imageData.date}</i></small></p>
           <LazyImage src={image.url} alt={title} />
@@ -101,7 +100,7 @@
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           class="item"
-          on:click={() => openModal(Modal, { imageData: imageData })}>
+          on:click={() => openModal(GalleryModal, { imageData: imageData })}>
           <div class="hover-overlay" />
           <p>{title}<br /><small><i>{imageData.date}</i></small></p>
           <LazyImage src={image.url} alt={title} />
@@ -120,7 +119,7 @@
     <div
       class="item"
       on:click={() =>
-        openModal(Modal, {
+        openModal(GalleryModal, {
           imageData: {
             url: cowsRoomStill1,
             title: "Cow's Room still",
@@ -164,6 +163,7 @@
       video {
         border-radius: 1em;
         height: 100%;
+        max-width: 100%;
       }
 
       p {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,11 +3,11 @@
   import Footer from "$lib/components/common/Footer.svelte";
   import { Modals, closeModal } from "svelte-modals";
   import { fade } from "svelte/transition";
+  import { page } from "$app/stores";
   import type { Snapshot } from "./$types";
   import { afterNavigate, disableScrollHandling } from "$app/navigation";
 
-  export let data: any;
-  $: pathname = data.pathname;
+  $: pathname = $page.url.pathname;
 
   // Allows you to preserve scroll position on back button while keeping smooth page transition behavior
   let scrollYState: number;

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1,9 +1 @@
 export const prerender = true;
-
-export const load = ({ url }: { url: any }) => {
-  const { pathname }: { pathname: any } = url;
-
-  return {
-    pathname,
-  };
-};