mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: packages fullscreen dialogue
This commit is contained in:
afn
parent
6f6f30e3bb
commit
715cb6a37d
13
src/app.scss
13
src/app.scss
@ -40,7 +40,7 @@ body {
|
||||
--white: hsl(206, 100%, 94%);
|
||||
--accent-color: hsl(206, 100%, 81%);
|
||||
--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%);
|
||||
--grey-one: hsl(210, 14%, 17%);
|
||||
--grey-two: hsl(212, 19%, 19%);
|
||||
@ -52,6 +52,7 @@ body {
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--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);
|
||||
}
|
||||
|
||||
@ -84,8 +85,8 @@ h3 {
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
@ -108,7 +109,7 @@ p {
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 1.875rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
@ -120,10 +121,6 @@ p {
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
|
||||
@ -8,9 +8,9 @@
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<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.
|
||||
</h4>
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" kind="primary" href="download">Download Manager</Button>
|
||||
<Button icon="docs" href="patches">View patches</Button>
|
||||
@ -24,7 +24,7 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
import Navigation from './NavButton.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 { clear_and_reload } from '$data/api/cache';
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import { fade } from 'svelte/transition';
|
||||
import { quadInOut } from 'svelte/easing';
|
||||
export let modalOpen = false;
|
||||
export let fullscreen = false;
|
||||
</script>
|
||||
|
||||
{#if modalOpen}
|
||||
@ -11,23 +12,34 @@
|
||||
on:keypress={() => (modalOpen = !modalOpen)}
|
||||
transition:fade={{ easing: quadInOut, duration: 150 }}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="modal"
|
||||
role="dialog"
|
||||
class:fullscreen
|
||||
aria-modal="true"
|
||||
transition:fade={{ easing: quadInOut, duration: 250 }}
|
||||
transition:fade={{ easing: quadInOut, duration: 150 }}
|
||||
>
|
||||
<div class="title">
|
||||
<h3>
|
||||
<slot name="title" />
|
||||
</h3>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="title">
|
||||
{#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" />
|
||||
</h4>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $$slots.description}
|
||||
<p>
|
||||
<slot name="description" />
|
||||
</p>
|
||||
{/if}
|
||||
{#if $$slots.description}
|
||||
<p>
|
||||
<slot name="description" />
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="slot"><slot /></div>
|
||||
</div>
|
||||
@ -44,20 +56,23 @@
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
.top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: sticky;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: var(--grey-six);
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@ -78,12 +93,37 @@
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
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),
|
||||
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 {
|
||||
padding: 0px 28px 36px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.modal::-webkit-scrollbar {
|
||||
@ -2,9 +2,7 @@
|
||||
import { fade } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div class="spinner-container">
|
||||
<div class="spinner" transition:fade={{ duration: 250 }} />
|
||||
</div>
|
||||
<div class="spinner" transition:fade={{ duration: 250 }} />
|
||||
|
||||
<style>
|
||||
@keyframes spinner {
|
||||
@ -13,19 +11,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.spinner:before {
|
||||
content: '';
|
||||
box-sizing: border-box;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 4.5px solid transparent;
|
||||
border-top-color: var(--accent-color);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
2
static/icons/back.svg
Normal file
2
static/icons/back.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 156 B |
Loading…
x
Reference in New Issue
Block a user