mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-05 17:04:28 +02:00
806a5de320
* feat: add donation page * fix: add src to `AnimatedImage` (#139) * feat: redesign page * feat: use api for donations, add QR code * tweak qr code modal and team member design * make team look better at different screen sizes * feat: use api for donations * fix: filled button comes first * feat: use better QR lib * list of crypto instead of table * feat: make crypto card expandable * feat: add donate back to footer-bottom * feat: add expand animation to crypto card * feat: accept an array of queries for prefetch * feat: use api for friendly crypto names * refactor: currency_codes are already uppercase * fix: capitalize crypto icon filenames * feat: use generic crypto icon when no icon is available * feat: add the pulsating heart animated image back * feat: improve animation of pulsating image * feat: decrease donation page top margin * feat: use preferred field to determine button type * use cards for donation methods * optimize images, improve accessibility, add crypto icon to dialogue * update cryptocurrencies modal title * clean up and add comments * add card image fallback * feat: dont hide heart on phones * feat: improve top margin on main class * GRAHH * feat: improve animations * add webp images with png fallbacks --------- Co-authored-by: ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ <29128703+milksense@users.noreply.github.com> Co-authored-by: afn <hey@afn.im> Co-authored-by: Ushie <ushiekane@gmail.com>
61 lines
1.2 KiB
Svelte
61 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { slide, fade } from 'svelte/transition';
|
|
import { expoOut } from 'svelte/easing';
|
|
|
|
export let open = false;
|
|
export let closeIcon = false;
|
|
export let dismissTime = 3000;
|
|
|
|
let timeout: ReturnType<typeof setTimeout>;
|
|
$: if (open) {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => (open = false), dismissTime);
|
|
}
|
|
</script>
|
|
|
|
{#if open}
|
|
<div
|
|
class="snackbar"
|
|
class:closeIcon
|
|
in:slide|local={{ duration: 400, easing: expoOut }}
|
|
out:fade|local={{ duration: 300, easing: expoOut }}
|
|
>
|
|
<div class="text">
|
|
<slot name="text" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.snackbar {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
justify-content: space-between;
|
|
padding-top: 0.25rem;
|
|
padding-bottom: 0.25rem;
|
|
padding-left: 1rem;
|
|
padding-right: 0.5rem;
|
|
height: 3rem;
|
|
gap: 1.5rem;
|
|
align-items: center;
|
|
border-radius: 0.25rem;
|
|
min-width: 12.5rem;
|
|
max-width: 35rem;
|
|
position: fixed;
|
|
margin-left: 2.25rem;
|
|
margin-right: 2.25rem;
|
|
z-index: 9999;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 2rem;
|
|
background-color: var(--white);
|
|
transition: all 0.4s var(--bezier-one);
|
|
box-shadow: var(--drop-shadow-one);
|
|
}
|
|
|
|
.text {
|
|
color: var(--grey-two);
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
</style> |