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 e8262adf8..a14bbec46 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 d0010f7aa..751974d9d 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 54d39bf84..6a66e9b91 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 d9094b278..236753cac 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 7992ba4fa..96fd6c516 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 180cb4d10..8824d1784 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 9e5ae0061..f7a199c3b 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 d8fcc5605..c150f5840 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), -)