chore: added view transitions
37fe3c2f
2 file(s) · +37 −22
| 1 | 1 | <script lang="ts"> |
|
| 2 | + | import { onNavigate } from "$app/navigation"; |
|
| 2 | 3 | import "./layout.css"; |
|
| 3 | 4 | import favicon from "$lib/assets/favicon.svg"; |
|
| 4 | 5 | ||
| 5 | 6 | let { children } = $props(); |
|
| 7 | + | ||
| 8 | + | onNavigate((navigation) => { |
|
| 9 | + | if (!document.startViewTransition) return; |
|
| 10 | + | ||
| 11 | + | return new Promise((resolve) => { |
|
| 12 | + | document.startViewTransition(async () => { |
|
| 13 | + | resolve(); |
|
| 14 | + | await navigation.complete; |
|
| 15 | + | }); |
|
| 16 | + | }); |
|
| 17 | + | }); |
|
| 6 | 18 | </script> |
|
| 7 | 19 | ||
| 8 | 20 | <svelte:head><link rel="icon" href={favicon} /></svelte:head> |
| 1 | 1 | <script lang="ts"> |
|
| 2 | - | import type { PageData } from "./$types"; |
|
| 3 | - | let { data }: { data: PageData } = $props(); |
|
| 2 | + | import type { PageData } from "./$types"; |
|
| 3 | + | let { data }: { data: PageData } = $props(); |
|
| 4 | 4 | </script> |
|
| 5 | 5 | ||
| 6 | 6 | <div class="bg-[#121113] min-h-screen text-white flex flex-col gap-4 pb-4"> |
|
| 7 | - | <div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4"> |
|
| 8 | - | <a href="/" class="text-sm hover:underline">steve.photo (go back)</a> |
|
| 9 | - | </div> |
|
| 7 | + | <div class="fixed bg-[#121113] w-full py-4 sm:px-8 px-4"> |
|
| 8 | + | <a href="/" class="text-sm hover:underline">steve.photo</a> |
|
| 9 | + | </div> |
|
| 10 | 10 | ||
| 11 | - | <div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-16"> |
|
| 12 | - | <div class="flex-6 min-w-0"> |
|
| 13 | - | <img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} /> |
|
| 14 | - | </div> |
|
| 15 | - | <div class="flex flex-col gap-1 flex-1 min-w-0 p-4"> |
|
| 16 | - | <h2 class="text-lg">{data.photo.title.toUpperCase()}</h2> |
|
| 17 | - | <h3 class="text-sm">{data.photo.make} {data.photo.camera}</h3> |
|
| 18 | - | <div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4"> |
|
| 19 | - | <p>{data.photo.focalLength}</p> |
|
| 20 | - | <p>{data.photo.aperture}</p> |
|
| 21 | - | <p>{data.photo.exposure}</p> |
|
| 22 | - | <p>ISO {data.photo.iso}</p> |
|
| 23 | - | <p>-</p> |
|
| 24 | - | <p class="text-neutral-700 text-xs">{new Date(data.photo.date).toLocaleDateString()}</p> |
|
| 25 | - | </div> |
|
| 26 | - | </div> |
|
| 27 | - | </div> |
|
| 11 | + | <div class="flex sm:flex-row flex-col gap-2 sm:px-8 px-4 pt-16"> |
|
| 12 | + | <div class="flex-6 min-w-0"> |
|
| 13 | + | <img class="max-w-full h-auto block" src={data.photo.image} alt={data.photo.title} /> |
|
| 14 | + | </div> |
|
| 15 | + | <div class="flex flex-col p-4 flex-1 min-w-0 justify-between"> |
|
| 16 | + | <div class="flex flex-col gap-1 flex-1 min-w-0"> |
|
| 17 | + | <h2 class="text-lg">{data.photo.title.toUpperCase()}</h2> |
|
| 18 | + | <h3 class="text-sm">{data.photo.make} {data.photo.camera}</h3> |
|
| 19 | + | <div class="flex flex-col gap-2 text-neutral-400 font-thin text-xs mt-4"> |
|
| 20 | + | <p>{data.photo.focalLength}</p> |
|
| 21 | + | <p>{data.photo.aperture}</p> |
|
| 22 | + | <p>{data.photo.exposure}</p> |
|
| 23 | + | <p>ISO {data.photo.iso}</p> |
|
| 24 | + | <p>-</p> |
|
| 25 | + | <p class="text-neutral-700 text-xs">{new Date(data.photo.date).toLocaleDateString()}</p> |
|
| 26 | + | </div> |
|
| 27 | + | </div> |
|
| 28 | + | <a class="text-zinc-400 hover:text-white text-xs sm:pt-0 pt-24" href="/">Back to gallery</a> |
|
| 29 | + | </div> |
|
| 30 | + | </div> |
|
| 28 | 31 | </div> |