Skip to content

Commit 8058993

Browse files
ProspectorProspector
authored
Improve accessibiltiy of env selector, improve mobile support, and message for those with no permission (#4304)
* Fix redirect from project ID * improve fix * improve accessibility of environment selector * lint * fix mobile accessibility of project settings and improve message for those without permission * disable envs when multiple + lint
1 parent 28337c8 commit 8058993

File tree

12 files changed

+163
-96
lines changed

12 files changed

+163
-96
lines changed

‎apps/frontend/src/assets/styles/global.scss‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ body {
338338

339339
--size-navbar-height: 3.5rem;
340340
--size-mobile-navbar-height: 3.5rem;
341-
--size-mobile-navbar-height-expanded: 13.75rem;
341+
--size-mobile-navbar-height-expanded: 26.5rem;
342342

343343
--spacing-card-lg: 1.5rem;
344344
--spacing-card-bg: 1rem;
@@ -367,16 +367,8 @@ body {
367367
--font-weight-heading: var(--font-weight-extrabold);
368368
--font-weight-title: var(--font-weight-extrabold);
369369

370-
@media screen and (min-width: 320px) {
371-
--size-mobile-navbar-height-expanded: 11.5rem;
372-
}
373-
374-
@media screen and (min-width: 432px) {
375-
--size-mobile-navbar-height-expanded: 9.25rem;
376-
}
377-
378-
@media screen and (min-width: 765px) {
379-
--size-mobile-navbar-height-expanded: 7rem;
370+
@media screen and (min-width: 354px) {
371+
--size-mobile-navbar-height-expanded: 15.5rem;
380372
}
381373
}
382374

‎apps/frontend/src/assets/styles/layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
/ 100%;
5050

5151
@media screen and (max-width: 1024px) {
52-
margin-top: var(--spacing-card-md);
52+
margin-top: 1.5rem;
5353
}
5454

5555
.normal-page__sidebar {

‎apps/frontend/src/locales/en-US/index.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -770,6 +770,15 @@
770770
"project.download.title": {
771771
"message": "Download {title}"
772772
},
773+
"project.environment.migration-no-permission.message": {
774+
"message": "We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified."
775+
},
776+
"project.environment.migration-no-permission.title": {
777+
"message": "Environment metadata needs to be reviewed"
778+
},
779+
"project.environment.migration.learn-more": {
780+
"message": "Learn more about this change"
781+
},
773782
"project.environment.migration.message": {
774783
"message": "We've just overhauled the Environments system on Modrinth and new options are now available. Please visit your project's settings and verify that the metadata is correct."
775784
},

‎apps/frontend/src/pages/[type]/[id].vue‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div v-if="route.name.startsWith('type-id-settings')" class="normal-page no-sidebar">
66
<div class="normal-page__header">
77
<div
8-
class="mb-4 flex items-center gap-2 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
8+
class="mb-4 flex flex-wrap items-center gap-x-2 gap-y-3 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
99
>
1010
<nuxt-link
1111
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
@@ -759,21 +759,31 @@
759759
projectV3.environment[0] !== 'unknown'
760760
"
761761
type="warning"
762-
:header="formatMessage(messages.environmentMigrationTitle)"
762+
:header="
763+
formatMessage(
764+
hasEditDetailsPermission
765+
? messages.environmentMigrationTitle
766+
: messages.environmentMigrationNoPermissionTitle,
767+
)
768+
"
763769
class="mt-3"
764770
>
765-
{{ formatMessage(messages.environmentMigrationMessage) }}
766-
<ButtonStyled color="orange">
767-
<nuxt-link
768-
v-tooltip="
769-
hasEditDetailsPermission
770-
? undefined
771-
: formatMessage(commonProjectSettingsMessages.noPermissionDescription)
772-
"
773-
:to="`/project/${project.id}/settings/environment`"
774-
class="mt-3 w-fit"
775-
:disabled="!hasEditDetailsPermission"
776-
>
771+
{{
772+
formatMessage(
773+
hasEditDetailsPermission
774+
? messages.environmentMigrationMessage
775+
: messages.environmentMigrationNoPermissionMessage,
776+
)
777+
}}
778+
<nuxt-link
779+
to="/news/article/new-environments"
780+
target="_blank"
781+
class="mt-1 block w-fit font-semibold text-orange hover:underline"
782+
>
783+
{{ formatMessage(messages.environmentMigrationLink) }}
784+
</nuxt-link>
785+
<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
786+
<nuxt-link :to="`/project/${project.id}/settings/environment`" class="mt-3 w-fit">
777787
<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
778788
</nuxt-link>
779789
</ButtonStyled>
@@ -966,7 +976,6 @@ import {
966976
ButtonStyled,
967977
Checkbox,
968978
commonMessages,
969-
commonProjectSettingsMessages,
970979
injectNotificationManager,
971980
NewModal,
972981
OverflowMenu,
@@ -1152,6 +1161,19 @@ const messages = defineMessages({
11521161
id: 'project.environment.migration.title',
11531162
defaultMessage: 'Please review environment metadata',
11541163
},
1164+
environmentMigrationNoPermissionMessage: {
1165+
id: 'project.environment.migration-no-permission.message',
1166+
defaultMessage:
1167+
"We've just overhauled the Environments system on Modrinth and new options are now available. You don't have permission to modify these settings, but please let another member of the project know that the environment metadata needs to be verified.",
1168+
},
1169+
environmentMigrationNoPermissionTitle: {
1170+
id: 'project.environment.migration-no-permission.title',
1171+
defaultMessage: 'Environment metadata needs to be reviewed',
1172+
},
1173+
environmentMigrationLink: {
1174+
id: 'project.environment.migration.learn-more',
1175+
defaultMessage: 'Learn more about this change',
1176+
},
11551177
followersStat: {
11561178
id: 'project.stats.followers-label',
11571179
defaultMessage: 'follower{count, plural, one {} other {s}}',

‎apps/frontend/src/pages/[type]/[id]/settings.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const dependencies = defineModel<any>('dependencies')
4141
const organization = defineModel<any>('organization')
4242
</script>
4343
<template>
44-
<div class="experimental-styles-within grid grid-cols-[1fr_3fr] gap-4">
44+
<div class="experimental-styles-within grid gap-4 lg:grid-cols-[1fr_3fr]">
4545
<div>
4646
<aside class="universal-card">
4747
<NavStack>
@@ -140,7 +140,7 @@ const organization = defineModel<any>('organization')
140140
</NavStack>
141141
</aside>
142142
</div>
143-
<div>
143+
<div class="min-w-0">
144144
<NuxtPage
145145
v-model:project="project"
146146
v-model:project-v3="projectV3"

‎apps/frontend/src/pages/[type]/[id]/settings/environment.vue‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -110,18 +110,6 @@ const messages = defineMessages({
110110
</script>
111111
<template>
112112
<div>
113-
<UnsavedChangesPopup
114-
v-if="supportsEnvironment && hasPermission"
115-
:original="saved"
116-
:modified="current"
117-
:saving="saving"
118-
:can-reset="!needsToVerify"
119-
:text="needsToVerify ? messages.verifyLabel : undefined"
120-
:save-label="needsToVerify ? messages.verifyButton : undefined"
121-
:save-icon="needsToVerify ? CheckIcon : undefined"
122-
@reset="reset"
123-
@save="save"
124-
/>
125113
<div class="card experimental-styles-within">
126114
<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
127115
{{ formatMessage(commonProjectSettingsMessages.environment) }}
@@ -166,8 +154,23 @@ const messages = defineMessages({
166154
:body="formatMessage(messages.reviewOptionsDescription)"
167155
class="mb-3"
168156
/>
169-
<ProjectSettingsEnvSelector v-model="current.environment" :disabled="!hasPermission" />
157+
<ProjectSettingsEnvSelector
158+
v-model="current.environment"
159+
:disabled="!hasPermission || projectV3?.environment?.length > 1"
160+
/>
170161
</template>
171162
</div>
163+
<UnsavedChangesPopup
164+
v-if="supportsEnvironment && hasPermission"
165+
:original="saved"
166+
:modified="current"
167+
:saving="saving"
168+
:can-reset="!needsToVerify"
169+
:text="needsToVerify ? messages.verifyLabel : undefined"
170+
:save-label="needsToVerify ? messages.verifyButton : undefined"
171+
:save-icon="needsToVerify ? CheckIcon : undefined"
172+
@reset="reset"
173+
@save="save"
174+
/>
172175
</div>
173176
</template>

‎apps/frontend/src/pages/[type]/[id]/settings/index.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@
6767
</label>
6868
<div class="text-input-wrapper">
6969
<div class="text-input-wrapper__before">
70-
https://modrinth.com/{{ $getProjectTypeForUrl(project.project_type, project.loaders) }}/
70+
<span class="hidden sm:inline">https://modrinth.com</span>/{{
71+
$getProjectTypeForUrl(project.project_type, project.loaders)
72+
}}/
7173
</div>
7274
<input
7375
id="project-slug"

‎packages/ui/src/components/base/Admonition.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="font-semibold flex justify-between gap-4">
1414
<slot name="header">{{ header }}</slot>
1515
</div>
16-
<div class="font-normal">
16+
<div class="font-normal text-sm sm:text-base">
1717
<slot>{{ body }}</slot>
1818
</div>
1919
</div>

‎packages/ui/src/components/base/LargeRadioButton.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
22
<button
3+
role="radio"
4+
:aria-checked="selected"
5+
:aria-disabled="disabled"
36
class="px-4 py-3 text-left border-0 font-medium border-2 border-button-bg border-solid flex gap-2 transition-all cursor-pointer rounded-xl"
47
:class="
58
(selected ? 'text-contrast bg-button-bg' : 'text-primary bg-transparent') +
@@ -10,8 +13,8 @@
1013
:disabled="disabled"
1114
@click="emit('select')"
1215
>
13-
<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" />
14-
<RadioButtonIcon v-else class="h-5 w-5 shrink-0" />
16+
<RadioButtonCheckedIcon v-if="selected" class="text-brand h-5 w-5 shrink-0" aria-hidden="true" />
17+
<RadioButtonIcon v-else class="h-5 w-5 shrink-0" aria-hidden="true" />
1518
<slot />
1619
</button>
1720
</template>

‎packages/ui/src/components/base/UnsavedChangesPopup.vue‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,20 +50,15 @@ const shown = computed(() => {
5050
function localizeIfPossible(message: MessageDescriptor | string) {
5151
return typeof message === 'string' ? message : formatMessage(message)
5252
}
53-
54-
const bodyText = computed(() => localizeIfPossible(props.text))
55-
const saveText = computed(() =>
56-
localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel),
57-
)
5853
</script>
5954

6055
<template>
6156
<Transition name="pop-in">
62-
<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
57+
<div v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
6358
<div
64-
class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
59+
class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
6560
>
66-
<p class="m-0 font-semibold">{{ bodyText }}</p>
61+
<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
6762
<div class="ml-auto flex gap-2">
6863
<ButtonStyled v-if="canReset" type="transparent">
6964
<button :disabled="saving" @click="(e) => emit('reset', e)">
@@ -74,7 +69,7 @@ const saveText = computed(() =>
7469
<button :disabled="saving" @click="(e) => emit('save', e)">
7570
<SpinnerIcon v-if="saving" class="animate-spin" />
7671
<component :is="saveIcon" v-else />
77-
{{ saveText }}
72+
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
7873
</button>
7974
</ButtonStyled>
8075
</div>
@@ -103,4 +98,19 @@ const saveText = computed(() =>
10398
translate: 0 0.25rem;
10499
opacity: 0;
105100
}
101+
102+
.unsaved-changes-popup {
103+
transition: bottom 0.25s ease-in-out;
104+
bottom: 0;
105+
}
106+
107+
@media (any-hover: none) and (max-width: 640px) {
108+
.unsaved-changes-popup {
109+
bottom: var(--size-mobile-navbar-height);
110+
}
111+
112+
.expanded-mobile-nav .unsaved-changes-popup {
113+
bottom: var(--size-mobile-navbar-height-expanded);
114+
}
115+
}
106116
</style>

0 commit comments

Comments
 (0)