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: Improve accessibility in patches page (#206)

Browse Source
This commit is contained in:
André 2023-12-31 20:15:27 +00:00 committed by GitHub
parent 3a8ec6b054
commit 425d0c347b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,13 +34,15 @@
<li class="patch-info">🌎 Universal patch</li> <li class="patch-info">🌎 Universal patch</li>
{:else} {:else}
{#each patch.compatiblePackages as pkg} {#each patch.compatiblePackages as pkg}
<a <li class="patch-info">
href="https://play.google.com/store/apps/details?id={pkg.name}" <a
target="_blank" href="https://play.google.com/store/apps/details?id={pkg.name}"
rel="noreferrer" target="_blank"
> rel="noreferrer"
<li class="patch-info">📦 {pkg.name}</li> >
</a> 📦 {pkg.name}
</a>
</li>
{/each} {/each}
{/if} {/if}
@ -71,14 +73,16 @@
</li> </li>
{/if} {/if}
{#if patch.compatiblePackages[0].versions.length > 1} {#if patch.compatiblePackages[0].versions.length > 1}
<Button type="text" on:click={() => (showAllVersions = !showAllVersions)}> <li class="button">
<img <Button type="text" on:click={() => (showAllVersions = !showAllVersions)}>
class="expand-arrow" <img
style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'} class="expand-arrow"
src="/icons/expand_more.svg" style:transform={showAllVersions ? 'rotate(90deg)' : 'rotate(-90deg)'}
alt="dropdown" src="/icons/expand_more.svg"
/> alt="dropdown"
</Button> />
</Button>
</li>
{/if} {/if}
{:else} {:else}
<li class="patch-info">🎯 Any</li> <li class="patch-info">🎯 Any</li>
@ -117,6 +121,10 @@
color: var(--accent-color-two); color: var(--accent-color-two);
} }
.button {
display: flex;
align-items: center;
}
.patch-info { .patch-info {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -136,11 +144,12 @@
a { a {
text-decoration: none; text-decoration: none;
} color: var(--grey-five);
a .patch-info:hover { &:hover {
text-decoration: underline var(--accent-color-two); text-decoration: underline var(--accent-color-two);
color: var(--accent-color-two); color: var(--accent-color-two);
}
} }
.info-container { .info-container {