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

fix: more accessible patches list

Browse Source
This commit is contained in:
Kendell R 2024-04-27 07:18:10 -07:00
parent f86456cb4c
commit 69dd96fceb
No known key found for this signature in database
GPG Key ID: 64314E306EEF6109
2 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,16 +191,14 @@
</PackageMenu> </PackageMenu>
</aside> </aside>
<div class="patches-container">
{#each filter(data.patches, selectedPkg || '', searchTermFiltered) as patch}
<!-- Trigger new animations when package or search changes (I love Svelte) -->
{#key selectedPkg || searchTermFiltered} {#key selectedPkg || searchTermFiltered}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <!-- Trigger new animations when package or search changes (I love Svelte) -->
<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
{#each filter(data.patches, selectedPkg || '', searchTermFiltered) as patch}
<PatchItem {patch} bind:showAllVersions /> <PatchItem {patch} bind:showAllVersions />
</div>
{/key}
{/each} {/each}
</div> </div>
{/key}
</Query> </Query>
</main> </main>
<Footer /> <Footer />

19
src/routes/patches/PatchItem.svelte
View File

@ -11,10 +11,10 @@
let expanded: boolean = false; let expanded: boolean = false;
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <svelte:element
this={hasPatchOptions ? 'button' : 'div'}
class="patch-container" class="patch-container"
class:expanded={hasPatchOptions}
class:rotate={expanded} class:rotate={expanded}
on:click={() => (expanded = !expanded)} on:click={() => (expanded = !expanded)}
> >
@ -103,7 +103,7 @@
</div> </div>
</span> </span>
{/if} {/if}
</div> </svelte:element>
<style lang="scss"> <style lang="scss">
h3 { h3 {
@ -167,6 +167,13 @@
background-color: var(--grey-six); background-color: var(--grey-six);
padding: 1.25rem; padding: 1.25rem;
border-radius: 12px; border-radius: 12px;
}
button.patch-container {
cursor: pointer;
display: block;
border: none;
text-align: left;
&:active { &:active {
filter: brightness(1.15); filter: brightness(1.15);
@ -197,10 +204,6 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
.expanded {
cursor: pointer;
}
.option { .option {
padding: 1rem; padding: 1rem;