From 8058993578de79a6806d01fc0f10141bb6b6154e Mon Sep 17 00:00:00 2001 From: Prospector <6166773+Prospector@users.noreply.github.com> Date: Sun, 31 Aug 2025 10:23:21 -0700 Subject: [PATCH] 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 --- apps/frontend/src/assets/styles/global.scss | 14 +-- apps/frontend/src/assets/styles/layout.scss | 2 +- apps/frontend/src/locales/en-US/index.json | 9 ++ apps/frontend/src/pages/[type]/[id].vue | 52 ++++++--- .../src/pages/[type]/[id]/settings.vue | 4 +- .../[type]/[id]/settings/environment.vue | 29 ++--- .../src/pages/[type]/[id]/settings/index.vue | 4 +- .../ui/src/components/base/Admonition.vue | 2 +- .../src/components/base/LargeRadioButton.vue | 7 +- .../components/base/UnsavedChangesPopup.vue | 28 +++-- .../ProjectSettingsEnvSelector.vue | 102 +++++++++++------- packages/ui/src/locales/en-US/index.json | 6 ++ 12 files changed, 163 insertions(+), 96 deletions(-) diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss index e8262adf..a14bbec4 100644 --- a/apps/frontend/src/assets/styles/global.scss +++ b/apps/frontend/src/assets/styles/global.scss @@ -338,7 +338,7 @@ body { --size-navbar-height: 3.5rem; --size-mobile-navbar-height: 3.5rem; - --size-mobile-navbar-height-expanded: 13.75rem; + --size-mobile-navbar-height-expanded: 26.5rem; --spacing-card-lg: 1.5rem; --spacing-card-bg: 1rem; @@ -367,16 +367,8 @@ body { --font-weight-heading: var(--font-weight-extrabold); --font-weight-title: var(--font-weight-extrabold); - @media screen and (min-width: 320px) { - --size-mobile-navbar-height-expanded: 11.5rem; - } - - @media screen and (min-width: 432px) { - --size-mobile-navbar-height-expanded: 9.25rem; - } - - @media screen and (min-width: 765px) { - --size-mobile-navbar-height-expanded: 7rem; + @media screen and (min-width: 354px) { + --size-mobile-navbar-height-expanded: 15.5rem; } } diff --git a/apps/frontend/src/assets/styles/layout.scss b/apps/frontend/src/assets/styles/layout.scss index d0010f7a..751974d9 100644 --- a/apps/frontend/src/assets/styles/layout.scss +++ b/apps/frontend/src/assets/styles/layout.scss @@ -49,7 +49,7 @@ / 100%; @media screen and (max-width: 1024px) { - margin-top: var(--spacing-card-md); + margin-top: 1.5rem; } .normal-page__sidebar { diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json index 54d39bf8..6a66e9b9 100644 --- a/apps/frontend/src/locales/en-US/index.json +++ b/apps/frontend/src/locales/en-US/index.json @@ -770,6 +770,15 @@ "project.download.title": { "message": "Download {title}" }, + "project.environment.migration-no-permission.message": { + "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." + }, + "project.environment.migration-no-permission.title": { + "message": "Environment metadata needs to be reviewed" + }, + "project.environment.migration.learn-more": { + "message": "Learn more about this change" + }, "project.environment.migration.message": { "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." }, diff --git a/apps/frontend/src/pages/[type]/[id].vue b/apps/frontend/src/pages/[type]/[id].vue index d9094b27..236753ca 100644 --- a/apps/frontend/src/pages/[type]/[id].vue +++ b/apps/frontend/src/pages/[type]/[id].vue @@ -5,7 +5,7 @@
- {{ formatMessage(messages.environmentMigrationMessage) }} - - + {{ + formatMessage( + hasEditDetailsPermission + ? messages.environmentMigrationMessage + : messages.environmentMigrationNoPermissionMessage, + ) + }} + + {{ formatMessage(messages.environmentMigrationLink) }} + + + {{ formatMessage(messages.reviewEnvironmentSettings) }} @@ -966,7 +976,6 @@ import { ButtonStyled, Checkbox, commonMessages, - commonProjectSettingsMessages, injectNotificationManager, NewModal, OverflowMenu, @@ -1152,6 +1161,19 @@ const messages = defineMessages({ id: 'project.environment.migration.title', defaultMessage: 'Please review environment metadata', }, + environmentMigrationNoPermissionMessage: { + id: 'project.environment.migration-no-permission.message', + defaultMessage: + "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.", + }, + environmentMigrationNoPermissionTitle: { + id: 'project.environment.migration-no-permission.title', + defaultMessage: 'Environment metadata needs to be reviewed', + }, + environmentMigrationLink: { + id: 'project.environment.migration.learn-more', + defaultMessage: 'Learn more about this change', + }, followersStat: { id: 'project.stats.followers-label', defaultMessage: 'follower{count, plural, one {} other {s}}', diff --git a/apps/frontend/src/pages/[type]/[id]/settings.vue b/apps/frontend/src/pages/[type]/[id]/settings.vue index 7992ba4f..96fd6c51 100644 --- a/apps/frontend/src/pages/[type]/[id]/settings.vue +++ b/apps/frontend/src/pages/[type]/[id]/settings.vue @@ -41,7 +41,7 @@ const dependencies = defineModel('dependencies') const organization = defineModel('organization') diff --git a/apps/frontend/src/pages/[type]/[id]/settings/index.vue b/apps/frontend/src/pages/[type]/[id]/settings/index.vue index 180cb4d1..8824d178 100644 --- a/apps/frontend/src/pages/[type]/[id]/settings/index.vue +++ b/apps/frontend/src/pages/[type]/[id]/settings/index.vue @@ -67,7 +67,9 @@
- https://modrinth.com/{{ $getProjectTypeForUrl(project.project_type, project.loaders) }}/ + /{{ + $getProjectTypeForUrl(project.project_type, project.loaders) + }}/
{{ header }}
-
+
{{ body }}
diff --git a/packages/ui/src/components/base/LargeRadioButton.vue b/packages/ui/src/components/base/LargeRadioButton.vue index 9e5ae006..f7a199c3 100644 --- a/packages/ui/src/components/base/LargeRadioButton.vue +++ b/packages/ui/src/components/base/LargeRadioButton.vue @@ -1,5 +1,8 @@ diff --git a/packages/ui/src/components/base/UnsavedChangesPopup.vue b/packages/ui/src/components/base/UnsavedChangesPopup.vue index d8fcc560..c150f584 100644 --- a/packages/ui/src/components/base/UnsavedChangesPopup.vue +++ b/packages/ui/src/components/base/UnsavedChangesPopup.vue @@ -50,20 +50,15 @@ const shown = computed(() => { function localizeIfPossible(message: MessageDescriptor | string) { return typeof message === 'string' ? message : formatMessage(message) } - -const bodyText = computed(() => localizeIfPossible(props.text)) -const saveText = computed(() => - localizeIfPossible(props.saving ? props.savingLabel : props.saveLabel), -)