ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 06:34:35 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app.scss
View File

@ -40,7 +40,7 @@ body {
--white: hsl(206, 100%, 94%); --white: hsl(206, 100%, 94%);
--accent-color: hsl(206, 100%, 81%); --accent-color: hsl(206, 100%, 81%);
--accent-color-two: hsl(208, 75%, 82%); --accent-color-two: hsl(208, 75%, 82%);
--accent-low-opacity: hsla(205, 100%, 81%, 0.15); --accent-low-opacity: hsla(205, 91%, 69%, 0.15);
--bg-color: hsl(252, 10%, 11%); --bg-color: hsl(252, 10%, 11%);
--grey-one: hsl(210, 14%, 17%); --grey-one: hsl(210, 14%, 17%);
--grey-two: hsl(212, 19%, 19%); --grey-two: hsl(212, 19%, 19%);
@ -52,6 +52,7 @@ body {
--grey-eight: hsla(207, 30%, 75%, 0.577); --grey-eight: hsla(207, 30%, 75%, 0.577);
--grey-nine: hsla(240, 6%, 7%, 0.3); --grey-nine: hsla(240, 6%, 7%, 0.3);
--grey-ten: hsl(230, 9.5%, 17.5%); --grey-ten: hsl(230, 9.5%, 17.5%);
--grey-eleven: hsl(208, 10%, 40%);
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} }
@ -84,8 +85,8 @@ h3 {
h4 { h4 {
color: var(--accent-color-two); color: var(--accent-color-two);
font-weight: 400; font-weight: 500;
font-size: 1.1rem; font-size: 1.2rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
line-height: 2rem; line-height: 2rem;
} }
@ -108,7 +109,7 @@ p {
font-weight: 400; font-weight: 400;
font-size: 0.95rem; font-size: 0.95rem;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
line-height: 1.875rem; line-height: 1.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -120,10 +121,6 @@ p {
h2 { h2 {
font-size: 2rem; font-size: 2rem;
} }
p {
font-size: 0.875rem;
}
} }
/*---------------*/ /*---------------*/

6
src/layout/Hero/HeroSection.svelte
View File

@ -8,9 +8,9 @@
<section class="hero"> <section class="hero">
<div class="hero-text"> <div class="hero-text">
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1> <h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
<h4> <p>
Customize your mobile experience through ReVanced <br /> by applying patches to your applications. Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</h4> </p>
<div class="hero-buttons"> <div class="hero-buttons">
<Button icon="download" kind="primary" href="download">Download Manager</Button> <Button icon="download" kind="primary" href="download">Download Manager</Button>
<Button icon="docs" href="patches">View patches</Button> <Button icon="docs" href="patches">View patches</Button>
@ -24,7 +24,7 @@
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
h4 { p {
margin-bottom: 2rem; margin-bottom: 2rem;
} }

2
src/layout/Navbar/NavHost.svelte
View File

@ -6,7 +6,7 @@
import Navigation from './NavButton.svelte'; import Navigation from './NavButton.svelte';
import Svg from '$lib/components/Svg.svelte'; import Svg from '$lib/components/Svg.svelte';
import Modal from '$lib/components/Modal.svelte'; import Modal from '$lib/components/Dialogue.svelte';
import Button from '$lib/components/Button.svelte'; import Button from '$lib/components/Button.svelte';
import { clear_and_reload } from '$data/api/cache'; import { clear_and_reload } from '$data/api/cache';

62
src/lib/components/Modal.svelte → src/lib/components/Dialogue.svelte
View File

@ -2,6 +2,7 @@
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { quadInOut } from 'svelte/easing'; import { quadInOut } from 'svelte/easing';
export let modalOpen = false; export let modalOpen = false;
export let fullscreen = false;
</script> </script>
{#if modalOpen} {#if modalOpen}
@ -11,16 +12,26 @@
on:keypress={() => (modalOpen = !modalOpen)} on:keypress={() => (modalOpen = !modalOpen)}
transition:fade={{ easing: quadInOut, duration: 150 }} transition:fade={{ easing: quadInOut, duration: 150 }}
/> />
<div <div
class="modal" class="modal"
role="dialog" role="dialog"
class:fullscreen
aria-modal="true" aria-modal="true"
transition:fade={{ easing: quadInOut, duration: 250 }} transition:fade={{ easing: quadInOut, duration: 150 }}
> >
<div class="top">
<div class="title"> <div class="title">
<h3> {#if fullscreen}
<button on:click={() => (modalOpen = !modalOpen)}>
<img src="../icons/back.svg" id="back" alt="back" />
</button>
{/if}
{#if $$slots.title}
<h4>
<slot name="title" /> <slot name="title" />
</h3> </h4>
{/if}
</div> </div>
{#if $$slots.description} {#if $$slots.description}
@ -28,6 +39,7 @@
<slot name="description" /> <slot name="description" />
</p> </p>
{/if} {/if}
</div>
<div class="slot"><slot /></div> <div class="slot"><slot /></div>
</div> </div>
@ -44,20 +56,23 @@
z-index: 999; z-index: 999;
} }
h3 { .top {
text-align: center; display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
} }
.title { .title {
position: sticky; position: sticky;
padding-top: 46px; display: flex;
padding-bottom: 20px; align-items: center;
gap: 1rem;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
background-color: var(--grey-six); background-color: var(--grey-six);
} margin-bottom: 8px;
p {
margin-bottom: 1rem;
} }
.modal { .modal {
@ -78,12 +93,37 @@
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
z-index: 1001; z-index: 1001;
padding: 32px;
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
0px 2px 4px -1px rgba(0, 0, 0, 0.2); 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
} }
button {
padding: 0;
margin: 0;
border: none;
background-color: transparent;
display: flex;
align-items: center;
}
#back {
height: 24px;
}
.fullscreen {
max-height: 100%;
width: 100%;
border-radius: 0;
}
.fullscreen .title {
justify-content: flex-start;
}
.slot { .slot {
padding: 0px 28px 36px 28px; display: flex;
flex-direction: column;
align-content: center;
} }
.modal::-webkit-scrollbar { .modal::-webkit-scrollbar {

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

@ -2,9 +2,7 @@
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
</script> </script>
<div class="spinner-container"> <div class="spinner" transition:fade={{ duration: 250 }} />
<div class="spinner" transition:fade={{ duration: 250 }} />
</div>
<style> <style>
@keyframes spinner { @keyframes spinner {
@ -13,19 +11,15 @@
} }
} }
.spinner-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner:before { .spinner:before {
content: ''; content: '';
box-sizing: border-box; box-sizing: border-box;
width: 50px; width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
border: 4.5px solid transparent; border: 4.5px solid transparent;
border-top-color: var(--accent-color); border-top-color: var(--accent-color);
animation: spinner 0.6s linear infinite; animation: spinner 0.6s linear infinite;

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

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

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

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

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

@ -3,15 +3,20 @@
export let name: string; export let name: string;
function handleClick() { function handleClick() {
selectedPkg = selectedPkg === name ? false : name // Assign the selected package, if already selected, make it false
window.scrollTo({ top: 0, behavior: 'smooth' }) if (selectedPkg === name || name === 'All packages') {
selectedPkg = false;
} else {
selectedPkg = name;
}
window.scrollTo({ top: 0, behavior: 'smooth' });
} }
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div <div
class="package" class="package"
class:selected={selectedPkg === name} class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
on:click={handleClick} on:click={handleClick}
> >
{name} {name}

2
static/icons/back.svg Normal file
View File

@ -0,0 +1,2 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24 40.3 7.7 24 24 7.7l2.8 2.75L15.3 22h25v4h-25l11.5 11.5Z" fill="#AFD3F4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 156 B