ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: packages fullscreen dialogue

Browse Source
This commit is contained in:
afn
2022-12-26 02:26:11 -05:00
parent 6f6f30e3bb
commit 715cb6a37d
9 changed files with 123 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/download/+page.svelte
View File

@ -14,7 +14,7 @@
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<h2>ReVanced <span>Manager</span></h2>
<h4>Patch your favourite apps, right on your device.</h4>
<p>Patch your favourite apps, right on your device.</p>
<div class="buttons">
<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
{manager.version}
@ -40,7 +40,7 @@
color: var(--white);
}
h4 {
p {
text-align: center;
margin-bottom: 1.5rem;
}

72
src/routes/patches/+page.svelte
View File

@ -11,7 +11,7 @@
import Footer from '$layout/Footer.svelte';
import Search from '$lib/components/Search.svelte';
import FilterChip from '$lib/components/FilterChip.svelte';
import Modal from '$lib/components/Modal.svelte';
import Dialogue from '$lib/components/Dialogue.svelte';
$: ({ patches, packages } = $api_patches);
@ -76,39 +76,39 @@
title="Search for patches"
on:keyup={debounce}
/>
<div class="filter-chips">
<FilterChip
selected={selectedPkg}
dropdown
on:click={() => (mobilePackages = !mobilePackages)}
>
{selectedPkg ? selectedPkg : 'Packages'}
</FilterChip>
<!-- <FilterChip check>Universal</FilterChip>
<FilterChip>Patch options</FilterChip> -->
</div>
<div class="mobile-packages-modal">
<Modal bind:modalOpen={mobilePackages}>
<svelte:fragment slot="title">Packages</svelte:fragment>
<div class="mobile-packages">
<!-- <span on:click={() => (mobilePackages = !mobilePackages)}>
<Package bind:selectedPkg name="All packages" />
</span> -->
{#each packages as pkg}
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package bind:selectedPkg name={pkg} />
</span>
{/each}
</div>
</Modal>
</div>
</div>
</div>
<main>
<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<FilterChip selected={selectedPkg} dropdown on:click={() => (mobilePackages = !mobilePackages)}>
{selectedPkg ? selectedPkg : 'Packages'}
</FilterChip>
<!-- <FilterChip check>Universal</FilterChip>
<FilterChip>Patch options</FilterChip> -->
</div>
<div class="mobile-packages-Dialogue">
<Dialogue bind:modalOpen={mobilePackages} fullscreen>
<svelte:fragment slot="title">Packages</svelte:fragment>
<div class="mobile-packages">
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package bind:selectedPkg name="All packages" />
</span>
{#each packages as pkg}
<span
on:click={() => (mobilePackages = !mobilePackages)}
on:keypress={() => (mobilePackages = !mobilePackages)}
>
<Package bind:selectedPkg name={pkg} />
</span>
{/each}
</div>
</Dialogue>
</div>
<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PackageMenu>
<span class="packages">
@ -155,7 +155,7 @@
.search-contain {
width: min(90%, 80rem);
margin-inline: auto;
margin-inline: auto;;
}
.patches-container {
@ -184,7 +184,7 @@
}
@media (min-width: 768px) {
.mobile-packages-modal {
.mobile-packages-Dialogue {
display: none;
}
}
@ -199,8 +199,12 @@
display: none;
}
.search {
padding-top: 4.5rem;
}
.patches-container {
margin-top: 1.5rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
gap: 0.75rem;
}

13
src/routes/patches/Package.svelte
View File

@ -3,15 +3,20 @@
export let name: string;
function handleClick() {
selectedPkg = selectedPkg === name ? false : name
window.scrollTo({ top: 0, behavior: 'smooth' })
// Assign the selected package, if already selected, make it false
if (selectedPkg === name || name === 'All packages') {
selectedPkg = false;
} else {
selectedPkg = name;
}
window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="package"
class:selected={selectedPkg === name}
class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
on:click={handleClick}
>
{name}
@ -60,7 +65,7 @@
color: var(--grey-five);
border-bottom: 1px solid var(--grey-three);
}
.selected {
color: var(--accent-color);
background-color: var(--accent-low-opacity);