ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-29 22:24:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix transition logic for svelte 4 (#220)

Browse Source 
update transition logic for svelte 4
This commit is contained in:
Kendell R 2024-01-11 06:56:16 -08:00 committed by GitHub
parent 66bb4b10f8
commit c90201f5f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/Footer/FooterSection.svelte
View File

@ -25,7 +25,7 @@
/> />
</button> </button>
{#if expanded} {#if expanded}
<ul transition:slide|local={{ easing: quintOut, duration: 500 }}> <ul transition:slide={{ easing: quintOut, duration: 500 }}>
<slot /> <slot />
</ul> </ul>
{/if} {/if}

2
src/lib/components/Search.svelte
View File

@ -27,7 +27,7 @@
alt="Clear" alt="Clear"
on:click={clear} on:click={clear}
on:keypress={clear} on:keypress={clear}
transition:fade|local={{ easing: quintOut, duration: 250 }} transition:fade={{ easing: quintOut, duration: 250 }}
/> />
{/if} {/if}
<input <input

6
src/lib/components/Snackbar.svelte
View File

@ -3,7 +3,6 @@
import { expoOut } from 'svelte/easing'; import { expoOut } from 'svelte/easing';
export let open = false; export let open = false;
export let closeIcon = false;
export let dismissTime = 3000; export let dismissTime = 3000;
let timeout: ReturnType<typeof setTimeout>; let timeout: ReturnType<typeof setTimeout>;
@ -16,9 +15,8 @@
{#if open} {#if open}
<div <div
class="snackbar" class="snackbar"
class:closeIcon in:slide={{ duration: 400, easing: expoOut }}
in:slide|local={{ duration: 400, easing: expoOut }} out:fade={{ duration: 300, easing: expoOut }}
out:fade|local={{ duration: 300, easing: expoOut }}
> >
<div class="text"> <div class="text">
<slot name="text" /> <slot name="text" />

6
src/lib/components/Spinner.svelte
View File

@ -1,8 +1,4 @@
<script> <div class="spinner" />
import { fade } from 'svelte/transition';
</script>
<div class="spinner" transition:fade={{ duration: 250 }} />
<style> <style>
@keyframes spinner { @keyframes spinner {

2
src/routes/contributors/ContributorSection.svelte
View File

@ -33,7 +33,7 @@
</div> </div>
{#if expanded} {#if expanded}
<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}> <div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
{#each contributors as { login, avatar_url, html_url }} {#each contributors as { login, avatar_url, html_url }}
{#if !usersIwantToExplodeSoBadly.includes(login)} {#if !usersIwantToExplodeSoBadly.includes(login)}
<ContributorButton name={login} pfp={avatar_url} url={html_url} /> <ContributorButton name={login} pfp={avatar_url} url={html_url} />

2
src/routes/donate/+page.svelte
View File

@ -195,7 +195,7 @@
</svelte:fragment> </svelte:fragment>
</Dialogue> </Dialogue>
<Snackbar bind:open={addressSnackbar} closeIcon> <Snackbar bind:open={addressSnackbar}>
<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment> <svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
</Snackbar> </Snackbar>

4
src/routes/donate/TeamMember.svelte
View File

@ -13,9 +13,9 @@
href={member.html_url} href={member.html_url}
rel="noreferrer" rel="noreferrer"
target="_blank" target="_blank"
in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }} in:fly|global={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }}
> >
<img src={member.avatar_url} alt={`${member.login}'s profile picture.'`} /> <img src={member.avatar_url} alt="{member.login}'s profile picture." />
<div class="member-text"> <div class="member-text">
<h4>{member.login}</h4> <h4>{member.login}</h4>

6
src/routes/patches/PatchItem.svelte
View File

@ -90,8 +90,8 @@
</ul> </ul>
{#if expanded && hasPatchOptions} {#if expanded && hasPatchOptions}
<span transition:fade|local={{ easing: quintOut, duration: 1000 }}> <span transition:fade={{ easing: quintOut, duration: 1000 }}>
<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}> <div class="options" transition:slide={{ easing: quintOut, duration: 500 }}>
{#each patch.options as option} {#each patch.options as option}
<div class="option"> <div class="option">
<h5 id="option-title">{option.title}</h5> <h5 id="option-title">{option.title}</h5>
@ -125,7 +125,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.patch-info { .patch-info {
display: flex; display: flex;
justify-content: center; justify-content: center;