RomanNum3ral
/
vert
mirror of https://github.com/VERT-sh/VERT.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

move bg code to layout 

prevents fly animation from affecting it
This commit is contained in:
JovannMC 2025-02-05 17:35:56 +03:00
parent 1261584ae6
commit bfba1cc655
No known key found for this signature in database
2 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/routes/+layout.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from "$app/state";
import { beforeNavigate, goto } from "$app/navigation"; import { beforeNavigate, goto } from "$app/navigation";
import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public"; import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
import { duration, fly } from "$lib/animation"; import { duration, fly } from "$lib/animation";
@ -26,7 +26,7 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import { quintOut } from "svelte/easing"; import { quintOut } from "svelte/easing";
import "../app.scss"; import "../app.scss";
import { writable } from 'svelte/store'; import { writable } from "svelte/store";
let { children } = $props(); let { children } = $props();
let shouldGoBack = writable(false); let shouldGoBack = writable(false);
@ -231,6 +231,32 @@
class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none"
style="background: var(--bg-gradient-{$gradientColor || 'pink'});" style="background: var(--bg-gradient-{$gradientColor || 'pink'});"
></div> ></div>
{:else if page.url.pathname === "/convert" && files.files.length === 1 && files.files[0].blobUrl}
<div
class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1"
>
<div
class="w-full relative"
transition:fade={{
duration,
easing: quintOut,
}}
>
<img
class="object-cover w-full {!isMobile ? "h-[calc(100%-66px)]" : "h-full"} blur-md"
src={files.files[0].blobUrl}
alt={files.files[0].name}
/>
<!-- <div class="absolute bottom-0 left-0 w-full h-full">
<ProgressiveBlur
direction="bottom"
endIntensity={256}
iterations={8}
fadeTo="var(--bg)"
/>
</div> -->
</div>
</div>
{:else if page.url.pathname === "/settings"} {:else if page.url.pathname === "/settings"}
<div <div
id="gradient-bg" id="gradient-bg"

30
src/routes/convert/+page.svelte
View File

@ -159,32 +159,4 @@
<Uploader class="w-full h-full" /> <Uploader class="w-full h-full" />
{/if} {/if}
</div> </div>
</div> </div>
<div
class="fixed w-screen h-screen opacity-75 overflow-hidden top-0 left-0 -z-50 pointer-events-none grid grid-cols-1 grid-rows-1"
>
{#if files.files.length === 1 && files.files[0].blobUrl}
<div
class="w-full relative"
transition:fade={{
duration,
easing: quintOut,
}}
>
<img
class="object-cover w-full h-[calc(100%-66px)] blur-md"
src={files.files[0].blobUrl}
alt={files.files[0].name}
/>
<!-- <div class="absolute bottom-0 left-0 w-full h-full">
<ProgressiveBlur
direction="bottom"
endIntensity={256}
iterations={8}
fadeTo="var(--bg)"
/>
</div> -->
</div>
{/if}
</div>