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

Improve environments compat description and fix accessibility issues project-wide

Browse Source
This commit is contained in:
Prospector
2024-08-20 23:32:36 -07:00
parent 2d416d491c
commit 9deddbbe7c
32 changed files with 336 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
apps/frontend/src/pages/[type]/[id].vue
View File

@@ -38,7 +38,7 @@
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
label="General"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@@ -46,7 +46,7 @@
}/settings/tags`"
label="Tags"
>
<TagsIcon />
<TagsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@@ -54,7 +54,7 @@
}/settings/description`"
label="Description"
>
<DescriptionIcon />
<DescriptionIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@@ -62,7 +62,7 @@
}/settings/license`"
label="License"
>
<CopyrightIcon />
<CopyrightIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@@ -70,7 +70,7 @@
}/settings/links`"
label="Links"
>
<LinksIcon />
<LinksIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${
@@ -78,7 +78,7 @@
}/settings/members`"
label="Members"
>
<UsersIcon />
<UsersIcon aria-hidden="true" />
</NavStackItem>
<h3>View</h3>
<NavStackItem
@@ -88,7 +88,7 @@
label="Analytics"
chevron
>
<ChartIcon />
<ChartIcon aria-hidden="true" />
</NavStackItem>
<h3>Upload</h3>
<NavStackItem
@@ -96,14 +96,14 @@
label="Gallery"
chevron
>
<GalleryIcon />
<GalleryIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
:link="`/${project.project_type}/${project.slug ? project.slug : project.id}/versions`"
label="Versions"
chevron
>
<VersionIcon />
<VersionIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>
@@ -184,9 +184,9 @@
:href="`modrinth://mod/${project.slug}`"
@click="() => installWithApp()"
>
<ModrinthIcon />
<ModrinthIcon aria-hidden="true" />
Install with Modrinth App
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
</a>
</ButtonStyled>
<Accordion ref="getModrinthAppAccordion">
@@ -208,7 +208,7 @@
<div class="mx-auto flex w-fit flex-col gap-2">
<ButtonStyled v-if="project.game_versions.length === 1">
<div class="disabled button-like">
<GameIcon />
<GameIcon aria-hidden="true" />
{{
currentGameVersion
? `Game version: ${currentGameVersion}`
@@ -234,14 +234,14 @@
"
>
<template #title>
<GameIcon />
<GameIcon aria-hidden="true" />
{{
currentGameVersion ? `Game version: ${currentGameVersion}` : "Select game version"
}}
</template>
<div class="iconified-input mb-2 flex w-full">
<label for="game-versions-filtering" hidden>Search game versions...</label>
<SearchIcon />
<SearchIcon aria-hidden="true" />
<input
id="game-versions-filtering"
ref="gameVersionFilterInput"
@@ -300,7 +300,7 @@
v-if="project.loaders.length === 1 && project.project_type !== 'resourcepack'"
>
<div class="disabled button-like">
<WrenchIcon />
<WrenchIcon aria-hidden="true" />
{{
currentPlatform
? `Platform: ${formatCategory(currentPlatform)}`
@@ -327,7 +327,7 @@
"
>
<template #title>
<WrenchIcon />
<WrenchIcon aria-hidden="true" />
{{
currentPlatform
? `Platform: ${formatCategory(currentPlatform)}`
@@ -536,7 +536,7 @@
class="btn collection-button"
@click="(event) => $refs.modal_collection.show(event)"
>
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create new collection
</button>
</template>
@@ -549,7 +549,7 @@
<nuxt-link
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/settings`"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
</nuxt-link>
</ButtonStyled>
<ButtonStyled size="large" circular type="transparent">
@@ -591,22 +591,23 @@
},
{ id: 'copy-id', action: () => copyId() },
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #analytics>
<ChartIcon />
<ChartIcon aria-hidden="true" />
Analytics
</template>
<template #moderation-checklist>
<ScaleIcon />
<ScaleIcon aria-hidden="true" />
Review project
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</template>
<template #copy-id>
<ClipboardCopyIcon />
<ClipboardCopyIcon aria-hidden="true" />
Copy ID
</template>
</OverflowMenu>

22
apps/frontend/src/pages/[type]/[id]/gallery.vue
View File

@@ -8,7 +8,7 @@
<div class="modal-gallery universal-labels">
<div class="gallery-file-input">
<div class="file-header">
<ImageIcon />
<ImageIcon aria-hidden="true" />
<strong>{{ editFile ? editFile.name : "Current image" }}</strong>
<FileInput
v-if="editIndex === -1"
@@ -17,6 +17,7 @@
:accept="acceptFileTypes"
:max-size="524288000"
should-always-reset
aria-label="Replace image"
@change="
(x) => {
editFile = x[0];
@@ -24,7 +25,7 @@
}
"
>
<TransferIcon />
<TransferIcon aria-hidden="true" />
</FileInput>
</div>
<img
@@ -95,7 +96,7 @@
</button>
<div class="button-group">
<button class="iconified-button" @click="$refs.modal_edit_item.hide()">
<XIcon />
<XIcon aria-hidden="true" />
Cancel
</button>
<button
@@ -104,7 +105,7 @@
:disabled="shouldPreventActions"
@click="createGalleryItem"
>
<PlusIcon />
<PlusIcon aria-hidden="true" />
Add gallery image
</button>
<button
@@ -113,7 +114,7 @@
:disabled="shouldPreventActions"
@click="editGalleryItem"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Save changes
</button>
</div>
@@ -199,14 +200,15 @@
:max-size="524288000"
:accept="acceptFileTypes"
prompt="Upload an image"
aria-label="Upload an image"
class="iconified-button brand-button"
:disabled="!isPermission(currentMember?.permissions, 1 << 2)"
@change="handleFiles"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<span class="indicator">
<InfoIcon /> Click to choose an image or drag one onto this page
<InfoIcon aria-hidden="true" /> Click to choose an image or drag one onto this page
</span>
<DropArea
:accept="acceptFileTypes"
@@ -234,7 +236,7 @@
</div>
<div class="gallery-bottom">
<div class="gallery-created">
<CalendarIcon />
<CalendarIcon aria-hidden="true" aria-label="Date created" />
{{ $dayjs(item.created).format("MMMM D, YYYY") }}
</div>
<div v-if="currentMember" class="gallery-buttons input-group">
@@ -252,7 +254,7 @@
}
"
>
<EditIcon />
<EditIcon aria-hidden="true" />
Edit
</button>
<button
@@ -264,7 +266,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</div>

93
apps/frontend/src/pages/[type]/[id]/index.vue
View File

@@ -36,7 +36,7 @@
</div>
</div>
</section>
<section>
<section v-if="project.project_type !== 'resourcepack'">
<h3>{{ formatMessage(compatibilityMessages.platforms) }}</h3>
<div class="tag-list">
<div
@@ -50,67 +50,50 @@
</div>
</div>
</section>
<section>
<section
v-if="
(project.actualProjectType === 'mod' || project.project_type === 'modpack') &&
!(project.client_side === 'unsupported' && project.server_side === 'unsupported') &&
!(project.client_side === 'unknown' && project.server_side === 'unknown')
"
>
<h3>{{ formatMessage(compatibilityMessages.environments) }}</h3>
<div class="status-list">
<div class="status-list__item status-list__item--color-green">
<CheckIcon />
<div
v-if="
(project.client_side === 'required' && project.server_side !== 'required') ||
(project.client_side === 'optional' && project.server_side === 'optional')
"
class="status-list__item"
>
<ClientIcon aria-hidden="true" />
Client only
</div>
<div
v-if="
(project.server_side === 'required' && project.client_side !== 'unsupported') ||
(project.client_side === 'optional' && project.server_side === 'optional')
"
class="status-list__item"
>
<ServerIcon aria-hidden="true" />
Server only
</div>
<div class="status-list__item">
<UserIcon aria-hidden="true" />
Singleplayer
</div>
<div
v-if="project.client_side !== 'unsupported' && project.server_side !== 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Client and server
</div>
<div
v-if="project.client_side === 'required' && project.server_side === 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Client
</div>
<div
v-if="project.server_side === 'required' && project.client_side === 'unsupported'"
class="status-list__item status-list__item--color-green"
>
<CheckIcon />
Server
</div>
<div
v-if="
project.client_side === 'optional' ||
(project.client_side === 'required' && project.server_side === 'optional')
"
class="status-list__item status-list__item--color-orange"
>
<CheckIcon />
Client <span class="text-sm">(Limited functionality)</span>
</div>
<div
v-if="
(project.client_side === 'required' && project.server_side === 'optional') ||
project.server_side === 'optional' ||
(project.server_side === 'required' && project.client_side === 'optional')
"
class="status-list__item status-list__item--color-orange"
class="status-list__item"
>
<CheckIcon />
Server <span class="text-sm">(Limited functionality)</span>
</div>
<div
v-if="project.client_side === 'unsupported'"
class="status-list__item status-list__item--color-red"
>
<XIcon />
Client
</div>
<div
v-if="project.server_side === 'unsupported'"
class="status-list__item status-list__item--color-red"
>
<XIcon />
Server
<MonitorSmartphoneIcon aria-hidden="true" />
Client and server <span class="text-sm">(optional)</span>
</div>
</div>
</section>
@@ -321,8 +304,6 @@
<script setup>
import {
CheckIcon,
XIcon,
CalendarIcon,
IssuesIcon,
WikiIcon,
@@ -340,6 +321,10 @@ import {
VersionIcon,
ExternalIcon,
CodeIcon,
UserIcon,
ServerIcon,
ClientIcon,
MonitorSmartphoneIcon,
} from "@modrinth/assets";
import { NewModal, Avatar } from "@modrinth/ui";
@@ -395,7 +380,7 @@ const compatibilityMessages = defineMessages({
},
environments: {
id: "project.about.compatibility.environments",
defaultMessage: "Environments",
defaultMessage: "Supported environments",
},
});
const linksMessages = defineMessages({

9
apps/frontend/src/pages/[type]/[id]/settings/index.vue
View File

@@ -33,10 +33,11 @@
accept="image/png,image/jpeg,image/gif,image/webp"
class="choose-image iconified-button"
prompt="Upload icon"
aria-label="Upload icon"
:disabled="!hasPermission"
@change="showPreviewImage"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<button
v-if="!deletedIcon && (previewImage || project.icon_url)"
@@ -44,7 +45,7 @@
:disabled="!hasPermission"
@click="markIconForDeletion"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove icon
</button>
</div>
@@ -211,7 +212,7 @@
:disabled="!hasChanges"
@click="saveChanges()"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Save changes
</button>
</div>
@@ -233,7 +234,7 @@
:disabled="!hasDeletePermission"
@click="$refs.modal_confirm.show()"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete project
</button>
</section>

26
apps/frontend/src/pages/[type]/[id]/version/[version].vue
View File

@@ -39,13 +39,13 @@
<div class="button-group">
<ButtonStyled>
<button @click="$refs.modal_package_mod.hide()">
<CrossIcon />
<CrossIcon aria-hidden="true" />
Cancel
</button>
</ButtonStyled>
<ButtonStyled color="brand">
<button @click="createDataPackVersion">
<RightArrowIcon />
<RightArrowIcon aria-hidden="true" />
Begin packaging data pack
</button>
</ButtonStyled>
@@ -254,7 +254,7 @@
</div>
<ButtonStyled v-if="isEditing && project.project_type !== 'modpack'">
<button @click="version.dependencies.splice(index, 1)">
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@@ -307,7 +307,7 @@
<div class="input-group">
<ButtonStyled color="brand">
<button @click="addDependency(dependencyAddMode, newDependencyId, newDependencyType)">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Add dependency
</button>
</ButtonStyled>
@@ -317,7 +317,7 @@
<div class="version-page__files universal-card">
<h3>Files</h3>
<div v-if="isEditing && replaceFile" class="file primary">
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ replaceFile.name }}</strong>
<span class="file-size">({{ $formatBytes(replaceFile.size) }})</span>
@@ -325,12 +325,13 @@
<FileInput
class="iconified-button raised-button"
prompt="Replace"
aria-label="Replace"
:accept="acceptFileFromProjectType(project.project_type)"
:max-size="524288000"
should-always-reset
@change="(x) => (replaceFile = x[0])"
>
<TransferIcon />
<TransferIcon aria-hidden="true" />
</FileInput>
</div>
<div
@@ -341,7 +342,7 @@
primary: primaryFile.hashes.sha1 === file.hashes.sha1,
}"
>
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ file.filename }}</strong>
<span class="file-size">({{ $formatBytes(file.size) }})</span>
@@ -389,7 +390,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@@ -400,14 +401,14 @@
:title="`Download ${file.filename}`"
tabindex="0"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</a>
</ButtonStyled>
</div>
<template v-if="isEditing">
<div v-for="(file, index) in newFiles" :key="index" class="file">
<FileIcon />
<FileIcon aria-hidden="true" />
<span class="filename">
<strong>{{ file.name }}</strong>
<span class="file-size">({{ $formatBytes(file.size) }})</span>
@@ -435,7 +436,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Remove
</button>
</ButtonStyled>
@@ -448,6 +449,7 @@
<span v-else>Used for files such as sources or Javadocs.</span>
<FileInput
prompt="Drag and drop to upload or click to select"
aria-label="Upload additional file"
multiple
long-style
:accept="acceptFileFromProjectType(project.project_type)"
@@ -460,7 +462,7 @@
})
"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
</div>
</template>

25
apps/frontend/src/pages/[type]/[id]/versions.vue
View File

@@ -9,12 +9,13 @@
:accept="acceptFileFromProjectType(project.project_type)"
prompt="Upload a version"
class="btn btn-primary"
aria-label="Upload a version"
@change="handleFiles"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
</FileInput>
<span class="flex items-center gap-2">
<InfoIcon /> Click to choose a file or drag one onto this page
<InfoIcon aria-hidden="true" /> Click to choose a file or drag one onto this page
</span>
<DropArea :accept="acceptFileFromProjectType(project.project_type)" @change="handleFiles" />
</div>
@@ -134,9 +135,10 @@
v-tooltip="`Download`"
:href="getPrimaryFile(version).url"
class="z-[1] group-hover:!bg-brand group-hover:!text-brand-inverted"
aria-label="Download"
@click="emits('onDownload')"
>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
</a>
</ButtonStyled>
<ButtonStyled circular type="transparent">
@@ -196,34 +198,35 @@
shown: currentMember && false,
},
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #download>
<DownloadIcon />
<DownloadIcon aria-hidden="true" />
Download
</template>
<template #new-tab>
<ExternalIcon />
<ExternalIcon aria-hidden="true" />
Open in new tab
</template>
<template #copy-link>
<LinkIcon />
<LinkIcon aria-hidden="true" />
Copy link
</template>
<template #share>
<ShareIcon />
<ShareIcon aria-hidden="true" />
Share
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
Report
</template>
<template #edit>
<EditIcon />
<EditIcon aria-hidden="true" />
Edit
</template>
<template #delete>
<TrashIcon />
<TrashIcon aria-hidden="true" />
Delete
</template>
</OverflowMenu>

2
apps/frontend/src/pages/app.vue
View File

@@ -210,7 +210,7 @@ useSeoMeta({
<div class="search-bar">
<h4>Installed mods</h4>
<div class="mini-input">
<SearchIcon />
<SearchIcon aria-hidden="true" />
<div class="search">Search mods</div>
</div>
</div>

27
apps/frontend/src/pages/collection/[id].vue
View File

@@ -15,17 +15,17 @@
<div class="card__overlay input-group">
<template v-if="canEdit && isEditing === false">
<Button @click="isEditing = true">
<EditIcon />
<EditIcon aria-hidden="true" />
{{ formatMessage(commonMessages.editButton) }}
</Button>
<Button id="delete-collection" @click="() => $refs.deleteModal.show()">
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(commonMessages.deleteLabel) }}
</Button>
</template>
<template v-else-if="canEdit && isEditing === true">
<PopoutMenu class="btn">
<EditIcon /> {{ formatMessage(messages.editIconButton) }}
<EditIcon aria-hidden="true" /> {{ formatMessage(messages.editIconButton) }}
<template #menu>
<span class="icon-edit-menu">
<FileInput
@@ -35,10 +35,11 @@
accept="image/png,image/jpeg,image/gif,image/webp"
class="btn btn-transparent upload"
style="white-space: nowrap"
prompt=""
prompt="Upload icon"
aria-label="Upload icon"
@change="showPreviewImage"
>
<UploadIcon />
<UploadIcon aria-hidden="true" />
{{ formatMessage(messages.uploadIconButton) }}
</FileInput>
<Button
@@ -52,7 +53,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.deleteIconButton) }}
</Button>
</span>
@@ -103,11 +104,11 @@
</div>
<div class="push-right input-group">
<Button @click="isEditing = false">
<XIcon />
<XIcon aria-hidden="true" />
{{ formatMessage(commonMessages.cancelButton) }}
</Button>
<Button color="primary" @click="saveChanges()">
<SaveIcon />
<SaveIcon aria-hidden="true" />
{{ formatMessage(commonMessages.saveButton) }}
</Button>
</div>
@@ -122,7 +123,7 @@
<div>
<span class="collection-label">
<BoxIcon /> {{ formatMessage(messages.collectionLabel) }}
<BoxIcon aria-hidden="true" /> {{ formatMessage(messages.collectionLabel) }}
</span>
</div>
@@ -187,7 +188,7 @@
"
class="date"
>
<CalendarIcon />
<CalendarIcon aria-hidden="true" />
<label>
{{
formatMessage(messages.createdAtLabel, {
@@ -208,7 +209,7 @@
"
class="date"
>
<UpdatedIcon />
<UpdatedIcon aria-hidden="true" />
<label>
{{
formatMessage(messages.updatedAtLabel, {
@@ -331,7 +332,7 @@
}
"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.removeProjectButton) }}
</button>
<button
@@ -339,7 +340,7 @@
class="iconified-button"
@click="unfollowProject(project)"
>
<TrashIcon />
<TrashIcon aria-hidden="true" />
{{ formatMessage(messages.unfollowProjectButton) }}
</button>
</ProjectCard>

16
apps/frontend/src/pages/dashboard.vue
View File

@@ -5,33 +5,33 @@
<h1>Dashboard</h1>
<NavStack>
<NavStackItem link="/dashboard" label="Overview">
<DashboardIcon />
<DashboardIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/notifications" label="Notifications">
<NotificationsIcon />
<NotificationsIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/reports" label="Active reports">
<ReportIcon />
<ReportIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/analytics" label="Analytics">
<ChartIcon />
<ChartIcon aria-hidden="true" />
</NavStackItem>
<h3>Manage</h3>
<NavStackItem v-if="true" link="/dashboard/projects" label="Projects">
<ListIcon />
<ListIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem v-if="true" link="/dashboard/organizations" label="Organizations">
<OrganizationIcon />
<OrganizationIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem
link="/dashboard/collections"
:label="formatMessage(commonMessages.collectionsLabel)"
>
<LibraryIcon />
<LibraryIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/dashboard/revenue" label="Revenue">
<CurrencyIcon />
<CurrencyIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

28
apps/frontend/src/pages/dashboard/collections.vue
View File

@@ -5,14 +5,19 @@
<div class="search-row">
<div class="iconified-input">
<label for="search-input" hidden>{{ formatMessage(messages.searchInputLabel) }}</label>
<SearchIcon />
<SearchIcon aria-hidden="true" />
<input id="search-input" v-model="filterQuery" type="text" />
<Button v-if="filterQuery" class="r-btn" @click="() => (filterQuery = '')">
<XIcon />
<Button
v-if="filterQuery"
class="r-btn"
aria-label="Clear search"
@click="() => (filterQuery = '')"
>
<XIcon aria-hidden="true" />
</Button>
</div>
<Button color="primary" @click="(event) => $refs.modal_creation.show(event)">
<PlusIcon /> {{ formatMessage(messages.createNewButton) }}
<PlusIcon aria-hidden="true" /> {{ formatMessage(messages.createNewButton) }}
</Button>
</div>
<div class="collections-grid">
@@ -29,7 +34,7 @@
</span>
<div class="stat-bar">
<div class="stats">
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{
formatMessage(messages.projectsCountLabel, {
count: formatCompactNumber(user ? user.follows.length : 0),
@@ -37,7 +42,8 @@
}}
</div>
<div class="stats">
<LockIcon /> <span> {{ formatMessage(commonMessages.privateLabel) }} </span>
<LockIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.privateLabel) }} </span>
</div>
</div>
</div>
@@ -56,7 +62,7 @@
</span>
<div class="stat-bar">
<div class="stats">
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{
formatMessage(messages.projectsCountLabel, {
count: formatCompactNumber(collection.projects?.length || 0),
@@ -65,19 +71,19 @@
</div>
<div class="stats">
<template v-if="collection.status === 'listed'">
<WorldIcon />
<WorldIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.publicLabel) }} </span>
</template>
<template v-else-if="collection.status === 'unlisted'">
<LinkIcon />
<LinkIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.unlistedLabel) }} </span>
</template>
<template v-else-if="collection.status === 'private'">
<LockIcon />
<LockIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.privateLabel) }} </span>
</template>
<template v-else-if="collection.status === 'rejected'">
<XIcon />
<XIcon aria-hidden="true" />
<span> {{ formatMessage(commonMessages.rejectedLabel) }} </span>
</template>
</div>

4
apps/frontend/src/pages/dashboard/organizations.vue
View File

@@ -6,7 +6,7 @@
<h2 class="header__title text-2xl">Organizations</h2>
<div class="input-group">
<button class="iconified-button brand-button" @click="openCreateOrgModal">
<PlusIcon />
<PlusIcon aria-hidden="true" />
Create organization
</button>
</div>
@@ -30,7 +30,7 @@
</div>
<span class="stat-bar">
<div class="stats">
<UsersIcon />
<UsersIcon aria-hidden="true" />
<span>
{{ onlyAcceptedMembers(org.members).length }} member<template
v-if="onlyAcceptedMembers(org.members).length !== 1"

18
apps/frontend/src/pages/index.vue
View File

@@ -23,15 +23,15 @@
</h2>
<div class="button-group">
<ButtonStyled color="brand" size="large">
<nuxt-link to="/mods"> <CompassIcon /> Discover mods </nuxt-link>
<nuxt-link to="/mods"> <CompassIcon aria-hidden="true" /> Discover mods </nuxt-link>
</ButtonStyled>
<ButtonStyled size="large" type="outlined">
<nuxt-link v-if="!auth.user" to="/auth/sign-up" rel="noopener nofollow">
<LogInIcon />
<LogInIcon aria-hidden="true" />
Sign up
</nuxt-link>
<nuxt-link v-else to="/dashboard/projects">
<DashboardIcon />
<DashboardIcon aria-hidden="true" />
Go to dashboard
</nuxt-link>
</ButtonStyled>
@@ -175,7 +175,7 @@
{{ notification.versions[notification.versions.length - 1] }}
</p>
<div class="date">
<CalendarIcon />
<CalendarIcon aria-hidden="true" />
<span>
Received
{{ fromNow(notification.date_modified) }}
@@ -217,19 +217,21 @@
href="https://prismlauncher.org/"
class="graphic gradient-border"
title="Prism Launcher"
aria-label="Prism Launcher"
>
<PrismLauncherLogo />
<PrismLauncherLogo aria-hidden="true" />
</a>
<nuxt-link to="/app" class="graphic gradient-border">
<ModrinthIcon />
<nuxt-link to="/app" class="graphic gradient-border" aria-label="Modrinth App">
<ModrinthIcon aria-hidden="true" />
</nuxt-link>
<a
rel="noopener"
href="https://atlauncher.com/"
class="graphic gradient-border"
title="ATLauncher"
aria-label="ATLauncher"
>
<ATLauncherLogo />
<ATLauncherLogo aria-hidden="true" />
</a>
</div>
</div>

16
apps/frontend/src/pages/legal.vue
View File

@@ -5,32 +5,32 @@
<h1>Legal</h1>
<NavStack>
<NavStackItem link="/legal/terms" label="Terms of Use">
<HeartHandshakeIcon />
<HeartHandshakeIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/rules" label="Content Rules">
<ScaleIcon />
<ScaleIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/copyright" label="Copyright Policy">
<CopyrightIcon />
<CopyrightIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/security" label="Security Notice">
<ShieldIcon />
<ShieldIcon aria-hidden="true" />
</NavStackItem>
<h3>Privacy</h3>
<NavStackItem link="/legal/privacy" label="Privacy Policy">
<LockIcon />
<LockIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/ccpa" label="California Privacy Notice">
<InfoIcon />
<InfoIcon aria-hidden="true" />
</NavStackItem>
<h3>Rewards Program</h3>
<NavStackItem link="/legal/cmp" label="Rewards Program Terms">
<CurrencyIcon />
<CurrencyIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/legal/cmp-info" label="Rewards Program Info">
<InfoIcon />
<InfoIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

6
apps/frontend/src/pages/moderation.vue
View File

@@ -5,13 +5,13 @@
<h1>Moderation</h1>
<NavStack>
<NavStackItem link="/moderation" label="Overview">
<ModrinthIcon />
<ModrinthIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/moderation/review" label="Review projects">
<ModerationIcon />
<ModerationIcon aria-hidden="true" />
</NavStackItem>
<NavStackItem link="/moderation/reports" label="Reports">
<ReportIcon />
<ReportIcon aria-hidden="true" />
</NavStackItem>
</NavStack>
</aside>

2
apps/frontend/src/pages/plus.vue
View File

@@ -44,7 +44,7 @@
to="/settings/billing"
class="btn btn-purple btn-large"
>
<SettingsIcon />
<SettingsIcon aria-hidden="true" />
Manage subscription
</nuxt-link>
<button v-else-if="auth.user" class="btn btn-purple btn-large" @click="purchaseModal.show()">

2
apps/frontend/src/pages/report.vue
View File

@@ -82,7 +82,7 @@
:disabled="submitLoading || !canSubmit"
@click="submitReport"
>
<SaveIcon />
<SaveIcon aria-hidden="true" />
Submit
</Button>
</div>

3
apps/frontend/src/pages/search/[searchProjectType].vue
View File

@@ -40,9 +40,10 @@
"
v-tooltip="`Reset all filters`"
class="btn icon-only"
aria-label="Reset all filters"
@click="clearFilters"
>
<FilterXIcon />
<FilterXIcon aria-hidden="true" />
</button>
</div>
<div

13
apps/frontend/src/pages/user/[id].vue
View File

@@ -30,7 +30,7 @@
<div class="flex flex-wrap gap-2">
<ButtonStyled size="large">
<NuxtLink v-if="auth.user && auth.user.id === user.id" to="/settings/profile">
<EditIcon />
<EditIcon aria-hidden="true" />
{{ formatMessage(commonMessages.editButton) }}
</NuxtLink>
</ButtonStyled>
@@ -52,18 +52,19 @@
},
{ id: 'copy-id', action: () => copyId() },
]"
aria-label="More options"
>
<MoreVerticalIcon />
<MoreVerticalIcon aria-hidden="true" />
<template #manage-projects>
<BoxIcon />
<BoxIcon aria-hidden="true" />
{{ formatMessage(messages.profileManageProjectsButton) }}
</template>
<template #report>
<ReportIcon />
<ReportIcon aria-hidden="true" />
{{ formatMessage(commonMessages.reportButton) }}
</template>
<template #copy-id>
<ClipboardCopyIcon />
<ClipboardCopyIcon aria-hidden="true" />
{{ formatMessage(commonMessages.copyIdButton) }}
</template>
</OverflowMenu>
@@ -141,7 +142,7 @@
<div class="details">
<h2 class="title">{{ collection.name }}</h2>
<div class="stats">
<LibraryIcon />
<LibraryIcon aria-hidden="true" />
Collection
</div>
</div>