You've already forked AstralRinth
forked from didirus/AstralRinth
Mostly accessibility stuff (#344)
This commit is contained in:
stairman06
@@ -37,7 +37,7 @@
|
||||
"
|
||||
class="side-descriptor"
|
||||
>
|
||||
<InfoIcon />
|
||||
<InfoIcon aria-hidden="true" />
|
||||
Universal {{ project.project_type }}
|
||||
</div>
|
||||
<div
|
||||
@@ -49,7 +49,7 @@
|
||||
"
|
||||
class="side-descriptor"
|
||||
>
|
||||
<InfoIcon />
|
||||
<InfoIcon aria-hidden="true" />
|
||||
Client {{ project.project_type }}
|
||||
</div>
|
||||
<div
|
||||
@@ -61,7 +61,7 @@
|
||||
"
|
||||
class="side-descriptor"
|
||||
>
|
||||
<InfoIcon />
|
||||
<InfoIcon aria-hidden="true" />
|
||||
Server {{ project.project_type }}
|
||||
</div>
|
||||
<p class="description">
|
||||
@@ -81,14 +81,14 @@
|
||||
</div>
|
||||
<div class="dates">
|
||||
<div class="date">
|
||||
<CalendarIcon />
|
||||
<CalendarIcon aria-hidden="true" />
|
||||
<span class="label">Created</span>
|
||||
<span class="value">{{
|
||||
$dayjs(project.published).fromNow()
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="date">
|
||||
<UpdateIcon />
|
||||
<UpdateIcon aria-hidden="true" />
|
||||
<span class="label">Updated</span>
|
||||
<span class="value">{{ $dayjs(project.updated).fromNow() }}</span>
|
||||
</div>
|
||||
@@ -100,7 +100,7 @@
|
||||
:to="`/create/report?id=${project.id}&t=project`"
|
||||
class="iconified-button"
|
||||
>
|
||||
<ReportIcon />
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</nuxt-link>
|
||||
<button
|
||||
@@ -110,7 +110,7 @@
|
||||
class="iconified-button"
|
||||
@click="$store.dispatch('user/followProject', project)"
|
||||
>
|
||||
<FollowIcon />
|
||||
<FollowIcon aria-hidden="true" />
|
||||
Follow
|
||||
</button>
|
||||
<button
|
||||
@@ -120,7 +120,7 @@
|
||||
class="iconified-button"
|
||||
@click="$store.dispatch('user/unfollowProject', project)"
|
||||
>
|
||||
<FollowIcon fill="currentColor" />
|
||||
<FollowIcon fill="currentColor" aria-hidden="true" />
|
||||
Unfollow
|
||||
</button>
|
||||
</div>
|
||||
@@ -215,7 +215,7 @@
|
||||
class="title"
|
||||
target="_blank"
|
||||
>
|
||||
<IssuesIcon />
|
||||
<IssuesIcon aria-hidden="true" />
|
||||
<span>Issues</span>
|
||||
</a>
|
||||
<a
|
||||
@@ -224,7 +224,7 @@
|
||||
class="title"
|
||||
target="_blank"
|
||||
>
|
||||
<CodeIcon />
|
||||
<CodeIcon aria-hidden="true" />
|
||||
<span>Source</span>
|
||||
</a>
|
||||
<a
|
||||
@@ -233,7 +233,7 @@
|
||||
class="title"
|
||||
target="_blank"
|
||||
>
|
||||
<WikiIcon />
|
||||
<WikiIcon aria-hidden="true" />
|
||||
<span>Wiki</span>
|
||||
</a>
|
||||
<a
|
||||
@@ -244,8 +244,9 @@
|
||||
<DiscordIcon
|
||||
v-if="$colorMode.value === 'light'"
|
||||
class="shrink"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<DiscordIconWhite v-else class="shrink" />
|
||||
<DiscordIconWhite v-else class="shrink" aria-hidden="true" />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a
|
||||
@@ -256,18 +257,20 @@
|
||||
>
|
||||
<BuyMeACoffeeLogo
|
||||
v-if="donation.id === 'bmac' && $colorMode.value === 'light'"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<BuyMeACoffeeLogoWhite
|
||||
v-else-if="
|
||||
donation.id === 'bmac' && $colorMode.value === 'dark'
|
||||
"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<img
|
||||
v-else-if="
|
||||
donation.id === 'patreon' && $colorMode.value === 'light'
|
||||
"
|
||||
class="shrink"
|
||||
alt="patreon"
|
||||
alt=""
|
||||
src="~/assets/images/external/patreon.png"
|
||||
/>
|
||||
<img
|
||||
@@ -275,7 +278,7 @@
|
||||
donation.id === 'patreon' && $colorMode.value === 'dark'
|
||||
"
|
||||
class="shrink"
|
||||
alt="patreon"
|
||||
alt=""
|
||||
src="~/assets/images/external/patreon-white.png"
|
||||
/>
|
||||
<img
|
||||
@@ -283,7 +286,7 @@
|
||||
donation.id === 'paypal' && $colorMode.value === 'light'
|
||||
"
|
||||
class="shrink"
|
||||
alt="paypal"
|
||||
alt=""
|
||||
src="~/assets/images/external/paypal.png"
|
||||
/>
|
||||
<img
|
||||
@@ -291,21 +294,21 @@
|
||||
donation.id === 'paypal' && $colorMode.value === 'dark'
|
||||
"
|
||||
class="shrink"
|
||||
alt="paypal"
|
||||
alt=""
|
||||
src="~/assets/images/external/paypal-white.png"
|
||||
/>
|
||||
<img
|
||||
v-else-if="
|
||||
donation.id === 'ko-fi' && $colorMode.value === 'light'
|
||||
"
|
||||
alt="kofi"
|
||||
alt=""
|
||||
src="~/assets/images/external/kofi.png"
|
||||
/>
|
||||
<img
|
||||
v-else-if="
|
||||
donation.id === 'ko-fi' && $colorMode.value === 'dark'
|
||||
"
|
||||
alt="kofi"
|
||||
alt=""
|
||||
src="~/assets/images/external/kofi-white.png"
|
||||
/>
|
||||
<FollowIcon v-else-if="donation.id === 'github'" />
|
||||
@@ -332,6 +335,7 @@
|
||||
<a
|
||||
:href="findPrimary(version).url"
|
||||
class="download"
|
||||
:title="`Download ${version.name}`"
|
||||
@click.prevent="
|
||||
downloadFile(
|
||||
findPrimary(version).hashes.sha1,
|
||||
@@ -339,7 +343,7 @@
|
||||
)
|
||||
"
|
||||
>
|
||||
<DownloadIcon />
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
</a>
|
||||
<div class="info">
|
||||
<nuxt-link
|
||||
|
||||
@@ -38,6 +38,7 @@
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="iconified-button download"
|
||||
:title="`Download ${version.name}`"
|
||||
@click.prevent="
|
||||
$parent.downloadFile(
|
||||
$parent.findPrimary(version).hashes.sha1,
|
||||
@@ -45,7 +46,7 @@
|
||||
)
|
||||
"
|
||||
>
|
||||
<DownloadIcon />
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Download
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
project.slug ? project.slug : project.id
|
||||
}/versions`"
|
||||
>
|
||||
<BackIcon />
|
||||
<BackIcon aria-hidden="true" />
|
||||
Back to list
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@@ -25,14 +25,14 @@
|
||||
<h2>{{ version.name }}</h2>
|
||||
|
||||
<div v-if="version.featured" class="featured">
|
||||
<StarIcon />
|
||||
<StarIcon aria-hidden="true" />
|
||||
Featured
|
||||
</div>
|
||||
<div
|
||||
v-else-if="featuredVersions.find((x) => x.id === version.id)"
|
||||
class="featured"
|
||||
>
|
||||
<StarIcon />
|
||||
<StarIcon aria-hidden="true" />
|
||||
Auto-featured
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,7 +41,7 @@
|
||||
class="action iconified-button brand-button-colors"
|
||||
@click="saveEditedVersion"
|
||||
>
|
||||
<CheckIcon />
|
||||
<CheckIcon aria-hidden="true" />
|
||||
Save
|
||||
</button>
|
||||
<nuxt-link
|
||||
@@ -51,7 +51,7 @@
|
||||
}/version/${encodeURIComponent(version.version_number)}`"
|
||||
class="action iconified-button"
|
||||
>
|
||||
<TrashIcon />
|
||||
<TrashIcon aria-hidden="true" />
|
||||
Discard changes
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@
|
||||
class="action iconified-button brand-button-colors"
|
||||
@click="createVersion"
|
||||
>
|
||||
<CheckIcon />
|
||||
<CheckIcon aria-hidden="true" />
|
||||
Save
|
||||
</button>
|
||||
<nuxt-link
|
||||
@@ -70,7 +70,7 @@
|
||||
}/versions`"
|
||||
class="action iconified-button"
|
||||
>
|
||||
<TrashIcon />
|
||||
<TrashIcon aria-hidden="true" />
|
||||
Discard version
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@@ -79,11 +79,12 @@
|
||||
v-if="primaryFile"
|
||||
:href="primaryFile.url"
|
||||
class="action iconified-button brand-button-colors"
|
||||
:title="`Download ${primaryFile.filename}`"
|
||||
@click.prevent="
|
||||
$parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url)
|
||||
"
|
||||
>
|
||||
<DownloadIcon />
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Download
|
||||
</a>
|
||||
<nuxt-link
|
||||
@@ -91,7 +92,7 @@
|
||||
:to="`/create/report?id=${version.id}&t=version`"
|
||||
class="action iconified-button"
|
||||
>
|
||||
<ReportIcon />
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</nuxt-link>
|
||||
<button
|
||||
@@ -99,7 +100,7 @@
|
||||
class="action iconified-button"
|
||||
@click="$refs.delete_version_popup.show()"
|
||||
>
|
||||
<TrashIcon />
|
||||
<TrashIcon aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
<nuxt-link
|
||||
@@ -110,7 +111,7 @@
|
||||
}/version/${encodeURIComponent(version.version_number)}/edit`"
|
||||
@click.prevent="mode = 'edit'"
|
||||
>
|
||||
<EditIcon />
|
||||
<EditIcon aria-hidden="true" />
|
||||
Edit
|
||||
</nuxt-link>
|
||||
</div>
|
||||
@@ -409,14 +410,16 @@
|
||||
v-if="primaryFile.hashes.sha1 === file.hashes.sha1"
|
||||
class="featured"
|
||||
>
|
||||
<StarIcon />
|
||||
<StarIcon aria-hidden="true" />
|
||||
Primary
|
||||
</div>
|
||||
<a
|
||||
class="action iconified-button"
|
||||
:title="`Download ${file.filename}`"
|
||||
tabindex="0"
|
||||
@click.prevent="$parent.downloadFile(file.hashes.sha1, file.url)"
|
||||
>
|
||||
<DownloadIcon />
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
Download
|
||||
</a>
|
||||
<button
|
||||
@@ -427,7 +430,7 @@
|
||||
version.files.splice(index, 1)
|
||||
"
|
||||
>
|
||||
<TrashIcon />
|
||||
<TrashIcon aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
@@ -437,7 +440,7 @@
|
||||
class="action iconified-button"
|
||||
@click="primaryFile = file"
|
||||
>
|
||||
<StarIcon />
|
||||
<StarIcon aria-hidden="true" />
|
||||
Make primary
|
||||
</button>
|
||||
</div>
|
||||
@@ -452,7 +455,7 @@
|
||||
class="action iconified-button"
|
||||
@click="newFiles.splice(index, 1)"
|
||||
>
|
||||
<TrashIcon />
|
||||
<TrashIcon aria-hidden="true" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th role="presentation"></th>
|
||||
<th>Version</th>
|
||||
<th>Supports</th>
|
||||
<th>Stats</th>
|
||||
@@ -23,6 +23,7 @@
|
||||
<a
|
||||
:href="$parent.findPrimary(version).url"
|
||||
class="download-button"
|
||||
:title="`Download ${version.name}`"
|
||||
@click.prevent="
|
||||
$parent.downloadFile(
|
||||
$parent.findPrimary(version).hashes.sha1,
|
||||
@@ -30,7 +31,7 @@
|
||||
)
|
||||
"
|
||||
>
|
||||
<DownloadIcon />
|
||||
<DownloadIcon aria-hidden="true" />
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
137
pages/search.vue
137
pages/search.vue
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="normal-page">
|
||||
<aside class="normal-page__sidebar">
|
||||
<section class="card">
|
||||
<aside class="normal-page__sidebar" aria-label="Filters">
|
||||
<section class="card" role="presentation">
|
||||
<button
|
||||
class="iconified-button sidebar-menu-close-button"
|
||||
@click="sidebarMenuOpen = !sidebarMenuOpen"
|
||||
>
|
||||
<EyeOffIcon v-if="sidebarMenuOpen" />
|
||||
<EyeIcon v-else />
|
||||
<EyeOffIcon v-if="sidebarMenuOpen" aria-hidden="true" />
|
||||
<EyeIcon v-else aria-hidden="true" />
|
||||
{{ sidebarMenuOpen ? 'Hide filters' : 'Show filters' }}
|
||||
</button>
|
||||
<div
|
||||
@@ -24,71 +24,78 @@
|
||||
class="iconified-button"
|
||||
@click="clearFilters"
|
||||
>
|
||||
<ExitIcon />
|
||||
<ExitIcon aria-hidden="true" />
|
||||
Clear filters
|
||||
</button>
|
||||
<h3
|
||||
v-if="
|
||||
$tag.categories.filter((x) => x.project_type === projectType)
|
||||
.length > 0
|
||||
"
|
||||
class="sidebar-menu-heading"
|
||||
>
|
||||
Categories
|
||||
</h3>
|
||||
<SearchFilter
|
||||
v-for="category in $tag.categories.filter(
|
||||
(x) => x.project_type === projectType
|
||||
)"
|
||||
:key="category.name"
|
||||
:active-filters="facets"
|
||||
:display-name="category.name"
|
||||
:facet-name="`categories:${category.name}`"
|
||||
:icon="category.icon"
|
||||
@toggle="toggleFacet"
|
||||
/>
|
||||
<h3
|
||||
v-if="
|
||||
$tag.loaders.filter((x) =>
|
||||
<section aria-label="Category filters">
|
||||
<h3
|
||||
v-if="
|
||||
$tag.categories.filter((x) => x.project_type === projectType)
|
||||
.length > 0
|
||||
"
|
||||
class="sidebar-menu-heading"
|
||||
>
|
||||
Categories
|
||||
</h3>
|
||||
<SearchFilter
|
||||
v-for="category in $tag.categories.filter(
|
||||
(x) => x.project_type === projectType
|
||||
)"
|
||||
:key="category.name"
|
||||
:active-filters="facets"
|
||||
:display-name="category.name"
|
||||
:facet-name="`categories:${category.name}`"
|
||||
:icon="category.icon"
|
||||
@toggle="toggleFacet"
|
||||
/>
|
||||
</section>
|
||||
<section aria-label="Loader filters">
|
||||
<h3
|
||||
v-if="
|
||||
$tag.loaders.filter((x) =>
|
||||
x.supported_project_types.includes(projectType)
|
||||
).length > 0
|
||||
"
|
||||
class="sidebar-menu-heading"
|
||||
>
|
||||
Loaders
|
||||
</h3>
|
||||
<SearchFilter
|
||||
v-for="loader in $tag.loaders.filter((x) =>
|
||||
x.supported_project_types.includes(projectType)
|
||||
).length > 0
|
||||
"
|
||||
class="sidebar-menu-heading"
|
||||
>
|
||||
Loaders
|
||||
</h3>
|
||||
<SearchFilter
|
||||
v-for="loader in $tag.loaders.filter((x) =>
|
||||
x.supported_project_types.includes(projectType)
|
||||
)"
|
||||
:key="loader.name"
|
||||
:active-filters="facets"
|
||||
:display-name="loader.name"
|
||||
:facet-name="`categories:${loader.name}`"
|
||||
:icon="loader.icon"
|
||||
@toggle="toggleFacet"
|
||||
/>
|
||||
<h3 class="sidebar-menu-heading">Environments</h3>
|
||||
<SearchFilter
|
||||
:active-filters="selectedEnvironments"
|
||||
display-name="Client"
|
||||
facet-name="client"
|
||||
@toggle="toggleEnv"
|
||||
>
|
||||
<ClientSide />
|
||||
</SearchFilter>
|
||||
<SearchFilter
|
||||
:active-filters="selectedEnvironments"
|
||||
display-name="Server"
|
||||
facet-name="server"
|
||||
@toggle="toggleEnv"
|
||||
>
|
||||
<ServerSide />
|
||||
</SearchFilter>
|
||||
)"
|
||||
:key="loader.name"
|
||||
:active-filters="facets"
|
||||
:display-name="loader.name"
|
||||
:facet-name="`categories:${loader.name}`"
|
||||
:icon="loader.icon"
|
||||
@toggle="toggleFacet"
|
||||
/>
|
||||
</section>
|
||||
<section aria-label="Environment filters">
|
||||
<h3 class="sidebar-menu-heading">Environments</h3>
|
||||
<SearchFilter
|
||||
:active-filters="selectedEnvironments"
|
||||
display-name="Client"
|
||||
facet-name="client"
|
||||
@toggle="toggleEnv"
|
||||
>
|
||||
<ClientSide aria-hidden="true" />
|
||||
</SearchFilter>
|
||||
<SearchFilter
|
||||
:active-filters="selectedEnvironments"
|
||||
display-name="Server"
|
||||
facet-name="server"
|
||||
@toggle="toggleEnv"
|
||||
>
|
||||
<ServerSide aria-hidden="true" />
|
||||
</SearchFilter>
|
||||
</section>
|
||||
<h3 class="sidebar-menu-heading">Minecraft versions</h3>
|
||||
<Checkbox
|
||||
v-model="showSnapshots"
|
||||
label="Include snapshots"
|
||||
description="Include snapshots"
|
||||
style="margin-bottom: 0.5rem"
|
||||
:border="false"
|
||||
/>
|
||||
@@ -132,7 +139,7 @@
|
||||
<div class="card search-controls">
|
||||
<div class="iconified-input">
|
||||
<label class="hidden" for="search">Search Mods</label>
|
||||
<SearchIcon />
|
||||
<SearchIcon aria-hidden="true" />
|
||||
<input
|
||||
id="search"
|
||||
v-model="query"
|
||||
@@ -191,10 +198,10 @@
|
||||
ethical-ads-big
|
||||
/>
|
||||
<div v-if="$fetchState.pending" class="no-results">
|
||||
<LogoAnimated />
|
||||
<LogoAnimated aria-hidden="true" />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-else role="list" aria-label="Search results">
|
||||
<SearchResult
|
||||
v-for="result in results"
|
||||
:id="result.slug ? result.slug : result.project_id"
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
:to="`/create/report?id=${user.id}&t=user`"
|
||||
class="sidebar__item report-button iconified-button"
|
||||
>
|
||||
<ReportIcon />
|
||||
<ReportIcon aria-hidden="true" />
|
||||
Report
|
||||
</nuxt-link>
|
||||
<div class="sidebar__item">
|
||||
@@ -29,19 +29,19 @@
|
||||
<span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
|
||||
<div class="sidebar__item stats-block">
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<SunriseIcon class="secondary-stat__icon" />
|
||||
<SunriseIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span class="secondary-stat__text">
|
||||
Joined {{ $dayjs(user.created).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="stats-block__item secondary-stat">
|
||||
<UserIcon class="secondary-stat__icon" />
|
||||
<UserIcon class="secondary-stat__icon" aria-hidden="true" />
|
||||
<span class="secondary-stat__text">User ID: {{ user.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar__item stats-block">
|
||||
<div class="stats-block__item primary-stat">
|
||||
<DownloadIcon class="primary-stat__icon" />
|
||||
<DownloadIcon class="primary-stat__icon" aria-hidden="true" />
|
||||
<div class="primary-stat__text">
|
||||
<span class="primary-stat__counter">{{ sumDownloads() }}</span>
|
||||
<span class="primary-stat__label">downloads</span>
|
||||
|
||||
Reference in New Issue
Block a user