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