eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Mostly accessibility stuff (#344)

Browse Source
This commit is contained in:
stairman06
2022-01-20 22:21:13 -06:00
committed by GitHub
parent 98c85441f8
commit 643cd87706
13 changed files with 212 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
assets/styles/components.scss
View File

@@ -3,12 +3,16 @@
.iconified-input { .iconified-input {
align-items: center; align-items: center;
display: inline-flex; display: inline-flex;
position: relative;
input { input {
padding-left: 2rem; padding-left: 2rem;
width: 100%;
} }
svg { svg {
position: absolute;
left: 0.6rem;
height: 1rem; height: 1rem;
z-index: 1; z-index: 1;
@@ -35,7 +39,7 @@
border-radius: 2rem; border-radius: 2rem;
&:hover, &:hover,
&:focus { &:focus-visible {
background-color: var(--color-button-bg-hover); background-color: var(--color-button-bg-hover);
} }
@@ -306,7 +310,7 @@
background-color: var(--color-button-bg); background-color: var(--color-button-bg);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
font-size: var(--font-size-nm); font-size: var(--font-size-nm);
&:focus, &:focus-visible,
&:hover { &:hover {
background-color: var(--color-button-bg-hover); background-color: var(--color-button-bg-hover);
} }
@@ -326,7 +330,7 @@
color: var(--color-text); color: var(--color-text);
background-color: transparent; background-color: transparent;
&:focus, &:focus-visible,
&:hover, &:hover,
&.selected, &.selected,
&.nuxt-link-exact-active, &.nuxt-link-exact-active,
@@ -349,7 +353,7 @@
@extend .button; @extend .button;
color: var(--color-brand-inverted); color: var(--color-brand-inverted);
background-color: var(--color-brand); background-color: var(--color-brand);
&:focus, &:focus-visible,
&:hover { &:hover {
background-color: var(--color-brand-hover); background-color: var(--color-brand-hover);
color: var(--color-brand-inverted); color: var(--color-brand-inverted);
@@ -364,7 +368,7 @@
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25);
color: var(--color-brand-inverted); color: var(--color-brand-inverted);
background-color: var(--color-brand); background-color: var(--color-brand);
&:focus, &:focus-visible,
&:hover { &:hover {
background-color: var(--color-brand-hover); background-color: var(--color-brand-hover);
color: var(--color-brand-inverted); color: var(--color-brand-inverted);

4
assets/styles/global.scss
View File

@@ -146,7 +146,7 @@ body {
--color-badge-red-bg: #db3162; --color-badge-red-bg: #db3162;
--color-badge-green-text: #1ebb7b; --color-badge-green-text: #1ebb7b;
--color-badge-green-bg: #24a54e; --color-badge-green-bg: #24a54e;
--color-badge-yellow-text: #755920; --color-badge-yellow-text: #dba22d;
--color-badge-yellow-bg: #f7bb43; --color-badge-yellow-bg: #f7bb43;
--color-block-quote: var(--color-code-bg); --color-block-quote: var(--color-code-bg);
@@ -307,7 +307,7 @@ button {
border: none; border: none;
border-radius: var(--size-rounded-control); border-radius: var(--size-rounded-control);
&:focus, &:focus-visible,
&:hover { &:hover {
background-color: var(--color-button-bg-hover); background-color: var(--color-button-bg-hover);
color: var(--color-button-text-hover); color: var(--color-button-text-hover);

19
components/ads/Advertisement.vue
View File

@@ -79,6 +79,7 @@ export default {
onSmallScreen: false, onSmallScreen: false,
windowResizeListenerDebounce: null, windowResizeListenerDebounce: null,
ethicalAdLoad: null, ethicalAdLoad: null,
ethicalAdTries: 0,
} }
}, },
head: { head: {
@@ -165,14 +166,18 @@ export default {
}, },
refresh_ad() { refresh_ad() {
if (this.ethical_ads_on) { if (this.ethical_ads_on) {
this.ethicalAdTries++
clearTimeout(this.ethicalAdLoad) clearTimeout(this.ethicalAdLoad)
this.ethicalAdLoad = setTimeout(() => {
if (typeof window.ethicalads === 'undefined') { if (this.ethicalAdTries <= 5) {
console.log('EthicalAds are not loaded yet, retrying...') this.ethicalAdLoad = setTimeout(() => {
this.refresh_ad() if (typeof window.ethicalads === 'undefined') {
} console.log('EthicalAds are not loaded yet, retrying...')
ethicalads.load() this.refresh_ad()
}, 100) }
ethicalads.load()
}, 100)
}
} }
}, },
}, },

25
components/ui/Checkbox.vue
View File

@@ -1,9 +1,22 @@
<template> <template>
<div class="checkbox-outer" :class="{ disabled }" @click="toggle"> <div
<button class="checkbox" :disabled="disabled" :class="{ checked: value }"> class="checkbox-outer"
<CheckIcon v-if="value" /> :class="{ disabled }"
role="presentation"
@click="toggle"
>
<button
class="checkbox"
role="checkbox"
:disabled="disabled"
:class="{ checked: value }"
:aria-label="description"
:aria-checked="value"
>
<CheckIcon v-if="value" aria-hidden="true" />
</button> </button>
<p v-if="label">{{ label }}</p> <!-- aria-hidden is set so screenreaders only use the <button>'s aria-label -->
<p v-if="label" aria-hidden="true">{{ label }}</p>
<slot v-else /> <slot v-else />
</div> </div>
</template> </template>
@@ -25,6 +38,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
description: {
type: String,
default: '',
},
value: Boolean, value: Boolean,
clickEvent: { clickEvent: {
type: Function, type: Function,

16
components/ui/ProjectCard.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<article class="project-card card"> <article class="project-card card" :aria-label="name" role="listitem">
<div class="columns"> <div class="columns">
<div class="icon"> <div class="icon">
<nuxt-link :to="`/${type}/${id}`"> <nuxt-link :to="`/${type}/${id}`">
@@ -26,7 +26,7 @@
v-if="clientSide === 'optional' && serverSide === 'optional'" v-if="clientSide === 'optional' && serverSide === 'optional'"
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Universal {{ type }} Universal {{ type }}
</div> </div>
<div <div
@@ -36,7 +36,7 @@
" "
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Client {{ type }} Client {{ type }}
</div> </div>
<div <div
@@ -46,7 +46,7 @@
" "
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Server {{ type }} Server {{ type }}
</div> </div>
</div> </div>
@@ -56,18 +56,18 @@
<Categories :categories="categories" class="right-categories" /> <Categories :categories="categories" class="right-categories" />
<div class="dates"> <div class="dates">
<div class="date"> <div class="date">
<CalendarIcon /> <CalendarIcon aria-hidden="true" />
Created {{ $dayjs(createdAt).fromNow() }} Created {{ $dayjs(createdAt).fromNow() }}
</div> </div>
<div class="date"> <div class="date">
<EditIcon /> <EditIcon aria-hidden="true" />
Updated {{ $dayjs(updatedAt).fromNow() }} Updated {{ $dayjs(updatedAt).fromNow() }}
</div> </div>
</div> </div>
</div> </div>
<div class="right-side"> <div class="right-side">
<div v-if="downloads" class="stat"> <div v-if="downloads" class="stat">
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
<p> <p>
<strong>{{ formatNumber(downloads) }}</strong> download<span <strong>{{ formatNumber(downloads) }}</strong> download<span
v-if="downloads !== '1'" v-if="downloads !== '1'"
@@ -76,7 +76,7 @@
</p> </p>
</div> </div>
<div v-if="follows" class="stat"> <div v-if="follows" class="stat">
<HeartIcon /> <HeartIcon aria-hidden="true" />
<p> <p>
<strong>{{ formatNumber(follows) }}</strong> follower<span <strong>{{ formatNumber(follows) }}</strong> follower<span
v-if="follows !== '1'" v-if="follows !== '1'"

5
components/ui/search/SearchFilter.vue
View File

@@ -2,12 +2,13 @@
<Checkbox <Checkbox
class="filter" class="filter"
:value="activeFilters.includes(facetName)" :value="activeFilters.includes(facetName)"
:description="displayName"
@input="toggle()" @input="toggle()"
> >
<div class="filter-text"> <div class="filter-text">
<div v-if="icon" class="icon" v-html="icon"></div> <div v-if="icon" aria-hidden="true" class="icon" v-html="icon"></div>
<div v-else class="icon"><slot /></div> <div v-else class="icon"><slot /></div>
<span> {{ displayName }}</span> <span aria-hidden="true"> {{ displayName }}</span>
</div> </div>
</Checkbox> </Checkbox>
</template> </template>

61
layouts/default.vue
View File

@@ -1,14 +1,14 @@
<template> <template>
<div class="layout"> <div class="layout">
<header class="site-header"> <header class="site-header" role="presentation">
<section class="navbar columns"> <section class="navbar columns" role="navigation">
<section class="logo column"> <section class="logo column" role="presentation">
<NuxtLink to="/"> <NuxtLink to="/" aria-label="Modrinth home page">
<ModrinthLogo aria-label="modrinth" class="text-logo" /> <ModrinthLogo aria-hidden="true" class="text-logo" />
</NuxtLink> </NuxtLink>
</section> </section>
<section class="nav-group columns"> <section class="nav-group columns" role="presentation">
<section class="nav"> <section class="nav" aria-label="Page links">
<div class="styled-tabs"> <div class="styled-tabs">
<NuxtLink to="/mods" class="tab"> <NuxtLink to="/mods" class="tab">
<span>Mods</span> <span>Mods</span>
@@ -18,25 +18,34 @@
</NuxtLink> </NuxtLink>
</div> </div>
</section> </section>
<section class="column-grow user-outer"> <section class="column-grow user-outer" aria-label="Account links">
<section class="user-controls"> <section class="user-controls">
<button class="control-button" @click="changeTheme"> <button
<MoonIcon v-if="$colorMode.value === 'light'" /> class="control-button"
<SunIcon v-else /> title="Switch theme"
@click="changeTheme"
>
<MoonIcon
v-if="$colorMode.value === 'light'"
aria-hidden="true"
/>
<SunIcon v-else aria-hidden="true" />
</button> </button>
<nuxt-link <nuxt-link
v-if="$auth.user" v-if="$auth.user"
to="/create/project" to="/create/project"
class="control-button" class="control-button"
title="Create project"
> >
<PlusIcon /> <PlusIcon aria-hidden="true" />
</nuxt-link> </nuxt-link>
<nuxt-link <nuxt-link
v-if="$auth.user" v-if="$auth.user"
to="/notifications" to="/notifications"
class="control-button" class="control-button"
title="Notifications"
> >
<NotificationIcon /> <NotificationIcon aria-hidden="true" />
<div v-if="$user.notifications.length > 0" class="bubble"> <div v-if="$user.notifications.length > 0" class="bubble">
{{ $user.notifications.length }} {{ $user.notifications.length }}
</div> </div>
@@ -202,8 +211,8 @@
<Nuxt /> <Nuxt />
</main> </main>
<footer> <footer>
<div class="logo-info"> <div class="logo-info" role="region" aria-label="Modrinth information">
<ModrinthLogo aria-label="modrinth" class="text-logo" /> <ModrinthLogo aria-hidden="true" class="text-logo" />
<p> <p>
Modrinth is open source software. You may view the source code at Modrinth is open source software. You may view the source code at
<a <a
@@ -217,8 +226,8 @@
<p>modrinth/knossos {{ version }}</p> <p>modrinth/knossos {{ version }}</p>
<p>© Guavy LLC</p> <p>© Guavy LLC</p>
</div> </div>
<div class="links"> <div class="links" role="region" aria-label="Legal">
<h4>Legal</h4> <h4 aria-hidden="true">Legal</h4>
<nuxt-link to="/legal/terms">Terms</nuxt-link> <nuxt-link to="/legal/terms">Terms</nuxt-link>
<nuxt-link to="/legal/privacy">Privacy</nuxt-link> <nuxt-link to="/legal/privacy">Privacy</nuxt-link>
<nuxt-link to="/legal/rules">Rules</nuxt-link> <nuxt-link to="/legal/rules">Rules</nuxt-link>
@@ -229,23 +238,21 @@
License License
</a> </a>
</div> </div>
<div class="links"> <div class="links" role="region" aria-label="Resources">
<h4>Resources</h4> <h4 aria-hidden="true">Resources</h4>
<a target="_blank" href="https://blog.modrinth.com">Blog</a> <a target="_blank" href="https://blog.modrinth.com">Blog</a>
<a target="_blank" href="https://discord.gg/EUHuJHt">Discord</a> <a target="_blank" href="https://discord.gg/EUHuJHt">Discord</a>
<a target="_blank" href="https://github.com/modrinth/knossos">GitHub</a> <a target="_blank" href="https://github.com/modrinth/knossos">GitHub</a>
<a target="_blank" href="https://docs.modrinth.com">Docs</a> <a target="_blank" href="https://docs.modrinth.com">Docs</a>
</div> </div>
<div class="buttons"> <div class="buttons">
<nuxt-link to="/settings/privacy"> <nuxt-link to="/settings/privacy" class="iconified-button">
<button class="iconified-button"> <ShieldIcon aria-hidden="true" />
<ShieldIcon /> Privacy settings
Privacy settings
</button>
</nuxt-link> </nuxt-link>
<button class="iconified-button" @click="changeTheme"> <button class="iconified-button" @click="changeTheme">
<MoonIcon v-if="$colorMode.value === 'light'" /> <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
<SunIcon v-else /> <SunIcon v-else aria-hidden="true" />
Change theme Change theme
</button> </button>
</div> </div>
@@ -886,7 +893,7 @@ html {
margin-right: auto; margin-right: auto;
&:hover, &:hover,
&:focus { &:focus-visible {
background-color: var(--color-button-bg-hover); background-color: var(--color-button-bg-hover);
} }
} }

42
pages/_type/_id.vue
View File

@@ -37,7 +37,7 @@
" "
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Universal {{ project.project_type }} Universal {{ project.project_type }}
</div> </div>
<div <div
@@ -49,7 +49,7 @@
" "
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Client {{ project.project_type }} Client {{ project.project_type }}
</div> </div>
<div <div
@@ -61,7 +61,7 @@
" "
class="side-descriptor" class="side-descriptor"
> >
<InfoIcon /> <InfoIcon aria-hidden="true" />
Server {{ project.project_type }} Server {{ project.project_type }}
</div> </div>
<p class="description"> <p class="description">
@@ -81,14 +81,14 @@
</div> </div>
<div class="dates"> <div class="dates">
<div class="date"> <div class="date">
<CalendarIcon /> <CalendarIcon aria-hidden="true" />
<span class="label">Created</span> <span class="label">Created</span>
<span class="value">{{ <span class="value">{{
$dayjs(project.published).fromNow() $dayjs(project.published).fromNow()
}}</span> }}</span>
</div> </div>
<div class="date"> <div class="date">
<UpdateIcon /> <UpdateIcon aria-hidden="true" />
<span class="label">Updated</span> <span class="label">Updated</span>
<span class="value">{{ $dayjs(project.updated).fromNow() }}</span> <span class="value">{{ $dayjs(project.updated).fromNow() }}</span>
</div> </div>
@@ -100,7 +100,7 @@
:to="`/create/report?id=${project.id}&t=project`" :to="`/create/report?id=${project.id}&t=project`"
class="iconified-button" class="iconified-button"
> >
<ReportIcon /> <ReportIcon aria-hidden="true" />
Report Report
</nuxt-link> </nuxt-link>
<button <button
@@ -110,7 +110,7 @@
class="iconified-button" class="iconified-button"
@click="$store.dispatch('user/followProject', project)" @click="$store.dispatch('user/followProject', project)"
> >
<FollowIcon /> <FollowIcon aria-hidden="true" />
Follow Follow
</button> </button>
<button <button
@@ -120,7 +120,7 @@
class="iconified-button" class="iconified-button"
@click="$store.dispatch('user/unfollowProject', project)" @click="$store.dispatch('user/unfollowProject', project)"
> >
<FollowIcon fill="currentColor" /> <FollowIcon fill="currentColor" aria-hidden="true" />
Unfollow Unfollow
</button> </button>
</div> </div>
@@ -215,7 +215,7 @@
class="title" class="title"
target="_blank" target="_blank"
> >
<IssuesIcon /> <IssuesIcon aria-hidden="true" />
<span>Issues</span> <span>Issues</span>
</a> </a>
<a <a
@@ -224,7 +224,7 @@
class="title" class="title"
target="_blank" target="_blank"
> >
<CodeIcon /> <CodeIcon aria-hidden="true" />
<span>Source</span> <span>Source</span>
</a> </a>
<a <a
@@ -233,7 +233,7 @@
class="title" class="title"
target="_blank" target="_blank"
> >
<WikiIcon /> <WikiIcon aria-hidden="true" />
<span>Wiki</span> <span>Wiki</span>
</a> </a>
<a <a
@@ -244,8 +244,9 @@
<DiscordIcon <DiscordIcon
v-if="$colorMode.value === 'light'" v-if="$colorMode.value === 'light'"
class="shrink" class="shrink"
aria-hidden="true"
/> />
<DiscordIconWhite v-else class="shrink" /> <DiscordIconWhite v-else class="shrink" aria-hidden="true" />
<span>Discord</span> <span>Discord</span>
</a> </a>
<a <a
@@ -256,18 +257,20 @@
> >
<BuyMeACoffeeLogo <BuyMeACoffeeLogo
v-if="donation.id === 'bmac' && $colorMode.value === 'light'" v-if="donation.id === 'bmac' && $colorMode.value === 'light'"
aria-hidden="true"
/> />
<BuyMeACoffeeLogoWhite <BuyMeACoffeeLogoWhite
v-else-if=" v-else-if="
donation.id === 'bmac' && $colorMode.value === 'dark' donation.id === 'bmac' && $colorMode.value === 'dark'
" "
aria-hidden="true"
/> />
<img <img
v-else-if=" v-else-if="
donation.id === 'patreon' && $colorMode.value === 'light' donation.id === 'patreon' && $colorMode.value === 'light'
" "
class="shrink" class="shrink"
alt="patreon" alt=""
src="~/assets/images/external/patreon.png" src="~/assets/images/external/patreon.png"
/> />
<img <img
@@ -275,7 +278,7 @@
donation.id === 'patreon' && $colorMode.value === 'dark' donation.id === 'patreon' && $colorMode.value === 'dark'
" "
class="shrink" class="shrink"
alt="patreon" alt=""
src="~/assets/images/external/patreon-white.png" src="~/assets/images/external/patreon-white.png"
/> />
<img <img
@@ -283,7 +286,7 @@
donation.id === 'paypal' && $colorMode.value === 'light' donation.id === 'paypal' && $colorMode.value === 'light'
" "
class="shrink" class="shrink"
alt="paypal" alt=""
src="~/assets/images/external/paypal.png" src="~/assets/images/external/paypal.png"
/> />
<img <img
@@ -291,21 +294,21 @@
donation.id === 'paypal' && $colorMode.value === 'dark' donation.id === 'paypal' && $colorMode.value === 'dark'
" "
class="shrink" class="shrink"
alt="paypal" alt=""
src="~/assets/images/external/paypal-white.png" src="~/assets/images/external/paypal-white.png"
/> />
<img <img
v-else-if=" v-else-if="
donation.id === 'ko-fi' && $colorMode.value === 'light' donation.id === 'ko-fi' && $colorMode.value === 'light'
" "
alt="kofi" alt=""
src="~/assets/images/external/kofi.png" src="~/assets/images/external/kofi.png"
/> />
<img <img
v-else-if=" v-else-if="
donation.id === 'ko-fi' && $colorMode.value === 'dark' donation.id === 'ko-fi' && $colorMode.value === 'dark'
" "
alt="kofi" alt=""
src="~/assets/images/external/kofi-white.png" src="~/assets/images/external/kofi-white.png"
/> />
<FollowIcon v-else-if="donation.id === 'github'" /> <FollowIcon v-else-if="donation.id === 'github'" />
@@ -332,6 +335,7 @@
<a <a
:href="findPrimary(version).url" :href="findPrimary(version).url"
class="download" class="download"
:title="`Download ${version.name}`"
@click.prevent=" @click.prevent="
downloadFile( downloadFile(
findPrimary(version).hashes.sha1, findPrimary(version).hashes.sha1,
@@ -339,7 +343,7 @@
) )
" "
> >
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
</a> </a>
<div class="info"> <div class="info">
<nuxt-link <nuxt-link

3
pages/_type/_id/changelog.vue
View File

@@ -38,6 +38,7 @@
<a <a
:href="$parent.findPrimary(version).url" :href="$parent.findPrimary(version).url"
class="iconified-button download" class="iconified-button download"
:title="`Download ${version.name}`"
@click.prevent=" @click.prevent="
$parent.downloadFile( $parent.downloadFile(
$parent.findPrimary(version).hashes.sha1, $parent.findPrimary(version).hashes.sha1,
@@ -45,7 +46,7 @@
) )
" "
> >
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
Download Download
</a> </a>
</div> </div>

35
pages/_type/_id/version.vue
View File

@@ -16,7 +16,7 @@
project.slug ? project.slug : project.id project.slug ? project.slug : project.id
}/versions`" }/versions`"
> >
<BackIcon /> <BackIcon aria-hidden="true" />
Back to list Back to list
</nuxt-link> </nuxt-link>
</div> </div>
@@ -25,14 +25,14 @@
<h2>{{ version.name }}</h2> <h2>{{ version.name }}</h2>
<div v-if="version.featured" class="featured"> <div v-if="version.featured" class="featured">
<StarIcon /> <StarIcon aria-hidden="true" />
Featured Featured
</div> </div>
<div <div
v-else-if="featuredVersions.find((x) => x.id === version.id)" v-else-if="featuredVersions.find((x) => x.id === version.id)"
class="featured" class="featured"
> >
<StarIcon /> <StarIcon aria-hidden="true" />
Auto-featured Auto-featured
</div> </div>
</div> </div>
@@ -41,7 +41,7 @@
class="action iconified-button brand-button-colors" class="action iconified-button brand-button-colors"
@click="saveEditedVersion" @click="saveEditedVersion"
> >
<CheckIcon /> <CheckIcon aria-hidden="true" />
Save Save
</button> </button>
<nuxt-link <nuxt-link
@@ -51,7 +51,7 @@
}/version/${encodeURIComponent(version.version_number)}`" }/version/${encodeURIComponent(version.version_number)}`"
class="action iconified-button" class="action iconified-button"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Discard changes Discard changes
</nuxt-link> </nuxt-link>
</div> </div>
@@ -60,7 +60,7 @@
class="action iconified-button brand-button-colors" class="action iconified-button brand-button-colors"
@click="createVersion" @click="createVersion"
> >
<CheckIcon /> <CheckIcon aria-hidden="true" />
Save Save
</button> </button>
<nuxt-link <nuxt-link
@@ -70,7 +70,7 @@
}/versions`" }/versions`"
class="action iconified-button" class="action iconified-button"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Discard version Discard version
</nuxt-link> </nuxt-link>
</div> </div>
@@ -79,11 +79,12 @@
v-if="primaryFile" v-if="primaryFile"
:href="primaryFile.url" :href="primaryFile.url"
class="action iconified-button brand-button-colors" class="action iconified-button brand-button-colors"
:title="`Download ${primaryFile.filename}`"
@click.prevent=" @click.prevent="
$parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url) $parent.downloadFile(primaryFile.hashes.sha1, primaryFile.url)
" "
> >
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
Download Download
</a> </a>
<nuxt-link <nuxt-link
@@ -91,7 +92,7 @@
:to="`/create/report?id=${version.id}&t=version`" :to="`/create/report?id=${version.id}&t=version`"
class="action iconified-button" class="action iconified-button"
> >
<ReportIcon /> <ReportIcon aria-hidden="true" />
Report Report
</nuxt-link> </nuxt-link>
<button <button
@@ -99,7 +100,7 @@
class="action iconified-button" class="action iconified-button"
@click="$refs.delete_version_popup.show()" @click="$refs.delete_version_popup.show()"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Delete Delete
</button> </button>
<nuxt-link <nuxt-link
@@ -110,7 +111,7 @@
}/version/${encodeURIComponent(version.version_number)}/edit`" }/version/${encodeURIComponent(version.version_number)}/edit`"
@click.prevent="mode = 'edit'" @click.prevent="mode = 'edit'"
> >
<EditIcon /> <EditIcon aria-hidden="true" />
Edit Edit
</nuxt-link> </nuxt-link>
</div> </div>
@@ -409,14 +410,16 @@
v-if="primaryFile.hashes.sha1 === file.hashes.sha1" v-if="primaryFile.hashes.sha1 === file.hashes.sha1"
class="featured" class="featured"
> >
<StarIcon /> <StarIcon aria-hidden="true" />
Primary Primary
</div> </div>
<a <a
class="action iconified-button" class="action iconified-button"
:title="`Download ${file.filename}`"
tabindex="0"
@click.prevent="$parent.downloadFile(file.hashes.sha1, file.url)" @click.prevent="$parent.downloadFile(file.hashes.sha1, file.url)"
> >
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
Download Download
</a> </a>
<button <button
@@ -427,7 +430,7 @@
version.files.splice(index, 1) version.files.splice(index, 1)
" "
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Delete Delete
</button> </button>
<button <button
@@ -437,7 +440,7 @@
class="action iconified-button" class="action iconified-button"
@click="primaryFile = file" @click="primaryFile = file"
> >
<StarIcon /> <StarIcon aria-hidden="true" />
Make primary Make primary
</button> </button>
</div> </div>
@@ -452,7 +455,7 @@
class="action iconified-button" class="action iconified-button"
@click="newFiles.splice(index, 1)" @click="newFiles.splice(index, 1)"
> >
<TrashIcon /> <TrashIcon aria-hidden="true" />
Delete Delete
</button> </button>
</div> </div>

5
pages/_type/_id/versions.vue
View File

@@ -11,7 +11,7 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th> <th role="presentation"></th>
<th>Version</th> <th>Version</th>
<th>Supports</th> <th>Supports</th>
<th>Stats</th> <th>Stats</th>
@@ -23,6 +23,7 @@
<a <a
:href="$parent.findPrimary(version).url" :href="$parent.findPrimary(version).url"
class="download-button" class="download-button"
:title="`Download ${version.name}`"
@click.prevent=" @click.prevent="
$parent.downloadFile( $parent.downloadFile(
$parent.findPrimary(version).hashes.sha1, $parent.findPrimary(version).hashes.sha1,
@@ -30,7 +31,7 @@
) )
" "
> >
<DownloadIcon /> <DownloadIcon aria-hidden="true" />
</a> </a>
</td> </td>
<td> <td>

137
pages/search.vue
View File

@@ -1,13 +1,13 @@
<template> <template>
<div class="normal-page"> <div class="normal-page">
<aside class="normal-page__sidebar"> <aside class="normal-page__sidebar" aria-label="Filters">
<section class="card"> <section class="card" role="presentation">
<button <button
class="iconified-button sidebar-menu-close-button" class="iconified-button sidebar-menu-close-button"
@click="sidebarMenuOpen = !sidebarMenuOpen" @click="sidebarMenuOpen = !sidebarMenuOpen"
> >
<EyeOffIcon v-if="sidebarMenuOpen" /> <EyeOffIcon v-if="sidebarMenuOpen" aria-hidden="true" />
<EyeIcon v-else /> <EyeIcon v-else aria-hidden="true" />
{{ sidebarMenuOpen ? 'Hide filters' : 'Show filters' }} {{ sidebarMenuOpen ? 'Hide filters' : 'Show filters' }}
</button> </button>
<div <div
@@ -24,71 +24,78 @@
class="iconified-button" class="iconified-button"
@click="clearFilters" @click="clearFilters"
> >
<ExitIcon /> <ExitIcon aria-hidden="true" />
Clear filters Clear filters
</button> </button>
<h3 <section aria-label="Category filters">
v-if=" <h3
$tag.categories.filter((x) => x.project_type === projectType) v-if="
.length > 0 $tag.categories.filter((x) => x.project_type === projectType)
" .length > 0
class="sidebar-menu-heading" "
> class="sidebar-menu-heading"
Categories >
</h3> Categories
<SearchFilter </h3>
v-for="category in $tag.categories.filter( <SearchFilter
(x) => x.project_type === projectType v-for="category in $tag.categories.filter(
)" (x) => x.project_type === projectType
:key="category.name" )"
:active-filters="facets" :key="category.name"
:display-name="category.name" :active-filters="facets"
:facet-name="`categories:${category.name}`" :display-name="category.name"
:icon="category.icon" :facet-name="`categories:${category.name}`"
@toggle="toggleFacet" :icon="category.icon"
/> @toggle="toggleFacet"
<h3 />
v-if=" </section>
$tag.loaders.filter((x) => <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) x.supported_project_types.includes(projectType)
).length > 0 )"
" :key="loader.name"
class="sidebar-menu-heading" :active-filters="facets"
> :display-name="loader.name"
Loaders :facet-name="`categories:${loader.name}`"
</h3> :icon="loader.icon"
<SearchFilter @toggle="toggleFacet"
v-for="loader in $tag.loaders.filter((x) => />
x.supported_project_types.includes(projectType) </section>
)" <section aria-label="Environment filters">
:key="loader.name" <h3 class="sidebar-menu-heading">Environments</h3>
:active-filters="facets" <SearchFilter
:display-name="loader.name" :active-filters="selectedEnvironments"
:facet-name="`categories:${loader.name}`" display-name="Client"
:icon="loader.icon" facet-name="client"
@toggle="toggleFacet" @toggle="toggleEnv"
/> >
<h3 class="sidebar-menu-heading">Environments</h3> <ClientSide aria-hidden="true" />
<SearchFilter </SearchFilter>
:active-filters="selectedEnvironments" <SearchFilter
display-name="Client" :active-filters="selectedEnvironments"
facet-name="client" display-name="Server"
@toggle="toggleEnv" facet-name="server"
> @toggle="toggleEnv"
<ClientSide /> >
</SearchFilter> <ServerSide aria-hidden="true" />
<SearchFilter </SearchFilter>
:active-filters="selectedEnvironments" </section>
display-name="Server"
facet-name="server"
@toggle="toggleEnv"
>
<ServerSide />
</SearchFilter>
<h3 class="sidebar-menu-heading">Minecraft versions</h3> <h3 class="sidebar-menu-heading">Minecraft versions</h3>
<Checkbox <Checkbox
v-model="showSnapshots" v-model="showSnapshots"
label="Include snapshots" label="Include snapshots"
description="Include snapshots"
style="margin-bottom: 0.5rem" style="margin-bottom: 0.5rem"
:border="false" :border="false"
/> />
@@ -132,7 +139,7 @@
<div class="card search-controls"> <div class="card search-controls">
<div class="iconified-input"> <div class="iconified-input">
<label class="hidden" for="search">Search Mods</label> <label class="hidden" for="search">Search Mods</label>
<SearchIcon /> <SearchIcon aria-hidden="true" />
<input <input
id="search" id="search"
v-model="query" v-model="query"
@@ -191,10 +198,10 @@
ethical-ads-big ethical-ads-big
/> />
<div v-if="$fetchState.pending" class="no-results"> <div v-if="$fetchState.pending" class="no-results">
<LogoAnimated /> <LogoAnimated aria-hidden="true" />
<p>Loading...</p> <p>Loading...</p>
</div> </div>
<div v-else> <div v-else role="list" aria-label="Search results">
<SearchResult <SearchResult
v-for="result in results" v-for="result in results"
:id="result.slug ? result.slug : result.project_id" :id="result.slug ? result.slug : result.project_id"

8
pages/user/_id.vue
View File

@@ -13,7 +13,7 @@
:to="`/create/report?id=${user.id}&t=user`" :to="`/create/report?id=${user.id}&t=user`"
class="sidebar__item report-button iconified-button" class="sidebar__item report-button iconified-button"
> >
<ReportIcon /> <ReportIcon aria-hidden="true" />
Report Report
</nuxt-link> </nuxt-link>
<div class="sidebar__item"> <div class="sidebar__item">
@@ -29,19 +29,19 @@
<span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span> <span v-if="user.bio" class="sidebar__item bio">{{ user.bio }}</span>
<div class="sidebar__item stats-block"> <div class="sidebar__item stats-block">
<div class="stats-block__item secondary-stat"> <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"> <span class="secondary-stat__text">
Joined {{ $dayjs(user.created).fromNow() }} Joined {{ $dayjs(user.created).fromNow() }}
</span> </span>
</div> </div>
<div class="stats-block__item secondary-stat"> <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> <span class="secondary-stat__text">User ID: {{ user.id }}</span>
</div> </div>
</div> </div>
<div class="sidebar__item stats-block"> <div class="sidebar__item stats-block">
<div class="stats-block__item primary-stat"> <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"> <div class="primary-stat__text">
<span class="primary-stat__counter">{{ sumDownloads() }}</span> <span class="primary-stat__counter">{{ sumDownloads() }}</span>
<span class="primary-stat__label">downloads</span> <span class="primary-stat__label">downloads</span>