diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/AppHeader.svelte | 4 | ||||
| -rw-r--r-- | src/routes/(app)/+layout.svelte | 5 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/+layout.svelte | 52 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/settings/[...tab]/+page.svelte | 38 |
4 files changed, 82 insertions, 17 deletions
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte index ae162e1f..53b31de4 100644 --- a/src/components/AppHeader.svelte +++ b/src/components/AppHeader.svelte @@ -142,4 +142,8 @@ .z { z-index: 100; } + + header { + view-transition-name: header; + } </style> diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 7f4e3c7b..3422d358 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -10,8 +10,6 @@ import { warning, protectedRoutes } from '$lib/utils'; import { t, locale } from '$lib/translations'; - const localeLocalStorageKey = 'sveltekit-i18n-locale'; - export let data; let { rate, user, subject, token, rates } = data; @@ -22,6 +20,7 @@ }; onMount(async () => { + let localeLocalStorageKey = 'sveltekit-i18n-locale'; let localStorageLocale = localStorage.getItem(localeLocalStorageKey); if (localStorageLocale) locale.set(localStorageLocale); @@ -32,7 +31,7 @@ if (browser) { let log = console.log; checkSocket(); - expireTimer = setTimeout(expirePin, user.locktime * 1000 || 300000); + expireTimer = setTimeout(expirePin, user.locktime * 1000 || 300000); // if (window.NDEFReader) { // try { diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte index b2efa894..54fcd600 100644 --- a/src/routes/(app)/[username]/+layout.svelte +++ b/src/routes/(app)/[username]/+layout.svelte @@ -1,7 +1,57 @@ <script> import { AppHeader } from '$comp'; + import { onNavigate } from '$app/navigation'; export let data; + + onNavigate((navigation) => { + if (!document.startViewTransition) return; + + return new Promise((resolve) => { + document.startViewTransition(async () => { + resolve(); + await navigation.complete; + }); + }); + }); </script> <AppHeader {data} /> -<slot /> +<div class="content"> + <slot /> +</div> + +<style> + @keyframes fade-in { + from { + opacity: 0; + } + } + + @keyframes fade-out { + to { + opacity: 0; + } + } + + @keyframes slide-from-right { + from { + transform: translateX(60px); + } + } + + @keyframes slide-to-left { + to { + transform: translateX(-60px); + } + } + + :root::view-transition-old(root) { + animation: 280ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; + } + + :root::view-transition-new(root) { + animation: 280ms cubic-bezier(0, 0, 0.2, 1) 80ms both fade-in, + 180ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; + } +</style> diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte index a3afce62..933fa1f6 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte @@ -121,6 +121,10 @@ } } + if (user.email !== prev.email) { + await post('/api/verify', { test: true }); + } + const response = await fetch(formElement.action, { method: 'POST', body: data @@ -156,20 +160,22 @@ <input type="hidden" name="pin" value={$pin} /> <div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8"> - <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10"> - {$t('user.settings.header')} - </h1> + <div class="header"> + <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10"> + {$t('user.settings.header')} + </h1> - <div class="font-bold flex justify-around items-center border-b pb-3 text-secondary"> - {#each tabs.filter((t) => t.name !== 'shopify') as { name, key }} - <a href={`/${user.username}/settings/${name}`}> - <button - class="hover:opacity-80" - class:text-black={tab === name || (tab === 'shopify' && name === 'pos')} - >{$t(`user.settings.${key}`)}</button - > - </a> - {/each} + <div class="font-bold flex justify-around items-center border-b pb-3 text-secondary"> + {#each tabs.filter((t) => t.name !== 'shopify') as { name, key }} + <a href={`/${user.username}/settings/${name}`}> + <button + class="hover:opacity-80" + class:text-black={tab === name || (tab === 'shopify' && name === 'pos')} + >{$t(`user.settings.${key}`)}</button + > + </a> + {/each} + </div> </div> <svelte:component this={comp} {user} {rates} {submit} /> @@ -192,3 +198,9 @@ </button> </div> </form> + +<style> + .header { + view-transition-name: tabs; + } +</style> |