ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-29 22:24:31 +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

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

@ -191,16 +191,14 @@
</PackageMenu>
</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}
<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<PatchItem {patch} bind:showAllVersions />
</div>
{/key}
{/each}
</div>
{#key selectedPkg || searchTermFiltered}
<!-- 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 />
{/each}
</div>
{/key}
</Query>
</main>
<Footer />

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

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