ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-09 19:04:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: tweak appearance of package menu

Browse Source
This commit is contained in:
afn 2022-10-16 00:09:36 -04:00
parent 0984f26f4a
commit 6f6081eb1b
2 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/molecules/ContributorHost.svelte
View File

@ -75,7 +75,7 @@
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
background-color: var(--grey-six); background-color: var(--grey-six);
padding: 1.5rem; padding: 1.5rem;
border-radius: 28px; border-radius: 16px;
} }
</style> </style>

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

@ -8,7 +8,7 @@
let patches: any; let patches: any;
let pkg_list = []; let pkg_list = [];
let current = 'all'; let current = '';
onMount (async () => { onMount (async () => {
PatchesStore.subscribe(async (e) => { PatchesStore.subscribe(async (e) => {
@ -37,9 +37,10 @@
> >
{#if pkg_list} {#if pkg_list}
<div in:fly="{{ y: 10, easing: quintOut, duration: 750}}"> <div in:fly="{{ y: 10, easing: quintOut, duration: 750}}">
<h3>PACKAGES</h3> <h5>PACKAGES</h5>
<hr/>
<div class="package-list"> <div class="package-list">
{#each pkg_list as pkg, i } {#each pkg_list as pkg}
<div <div
class="package" class="package"
class:selected={current === pkg} class:selected={current === pkg}
@ -53,29 +54,28 @@
{/if} {/if}
</div> </div>
{#if patches}
{#if patches} <div class="patches-list patches-container">
<div class="patches-list patches-container"> {#each patches as patch, i}
{#each patches as patch, i} <div in:fly="{{ x: 10, easing: quintOut, duration: 750, delay: (80 * i)}}">
<div in:fly="{{ x: 10, easing: quintOut, duration: 750, delay: (80 * i)}}"> <Patch
<Patch name={patch.name
name={patch.name // im sorry
// im sorry .replace(/-/g, ' ')
.replace(/-/g, ' ') .replace(/(?:^|\s)\S/g, x => x.toUpperCase())
.replace(/(?:^|\s)\S/g, x => x.toUpperCase()) .replace(/Microg/g, 'MicroG')
.replace(/Microg/g, 'MicroG') .replace(/Hdr/g, 'HDR')
.replace(/Hdr/g, 'HDR') .replace(/Sponsorblock/g, 'SponsorBlock')
.replace(/Sponsorblock/g, 'SponsorBlock') .replace(/Tiktok/g, 'TikTok')
.replace(/Tiktok/g, 'TikTok') }
} desc={patch.description}
desc={patch.description} ver={patch.version}
ver={patch.version} hasPatchOptions={!!patch.options.length}
hasPatchOptions={!!patch.options.length} />
/> </div>
</div> {/each}
{/each} </div>
</div> {/if}
{/if}
</section> </section>
<style> <style>
@ -88,6 +88,12 @@
gap: 1rem; gap: 1rem;
} }
h5 {
font-weight: 500;
}
h3 {
font-size: 0.9rem;
}
.patches-container { .patches-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -111,6 +117,7 @@
} }
.package-list { .package-list {
margin-top: 1rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
white-space: normal; white-space: normal;
@ -137,21 +144,33 @@
} }
.selected::before{ .selected::before{
transition: all 0.4s var(--bezier-one);
opacity: 1; opacity: 1;
} }
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--grey-three);
margin-top: 1rem;
}
.package > h3 { .package > h3 {
color: var(--grey-five); color: var(--grey-five);
transition: all 0.4s var(--bezier-one);
} }
.selected {
background-color: var(--grey-three);
}
.selected > h3 { .selected > h3 {
color: var(--red); color: var(--red);
transition: all 0.4s var(--bezier-one);
} }
.package:not(.selected):hover { .package:hover {
background-color: var(--grey-six); background-color: var(--grey-six);
} }
.package:hover > h3 {
color: var(--white);
}
</style> </style>