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

Improve accessibiltiy of env selector, improve mobile support, and message for those with no permission (#4304)

Browse Source 
* 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
This commit is contained in:
Prospector
2025-08-31 10:23:21 -07:00
committed by GitHub
parent 28337c88f6
commit 8058993578
12 changed files with 163 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/frontend/src/assets/styles/global.scss
View File

@@ -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;
}
}

2
apps/frontend/src/assets/styles/layout.scss
View File

@@ -49,7 +49,7 @@
/ 100%;
@media screen and (max-width: 1024px) {
margin-top: var(--spacing-card-md);
margin-top: 1.5rem;
}
.normal-page__sidebar {

9
apps/frontend/src/locales/en-US/index.json
View File

@@ -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."
},

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

@@ -5,7 +5,7 @@
<div v-if="route.name.startsWith('type-id-settings')" class="normal-page no-sidebar">
<div class="normal-page__header">
<div
class="mb-4 flex items-center gap-2 border-0 border-b-[1px] border-solid border-divider pb-4 text-lg font-semibold"
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"
>
<nuxt-link
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
@@ -759,21 +759,31 @@
projectV3.environment[0] !== 'unknown'
"
type="warning"
:header="formatMessage(messages.environmentMigrationTitle)"
:header="
formatMessage(
hasEditDetailsPermission
? messages.environmentMigrationTitle
: messages.environmentMigrationNoPermissionTitle,
)
"
class="mt-3"
>
{{ formatMessage(messages.environmentMigrationMessage) }}
<ButtonStyled color="orange">
<nuxt-link
v-tooltip="
hasEditDetailsPermission
? undefined
: formatMessage(commonProjectSettingsMessages.noPermissionDescription)
"
:to="`/project/${project.id}/settings/environment`"
class="mt-3 w-fit"
:disabled="!hasEditDetailsPermission"
>
{{
formatMessage(
hasEditDetailsPermission
? messages.environmentMigrationMessage
: messages.environmentMigrationNoPermissionMessage,
)
}}
<nuxt-link
to="/news/article/new-environments"
target="_blank"
class="mt-1 block w-fit font-semibold text-orange hover:underline"
>
{{ formatMessage(messages.environmentMigrationLink) }}
</nuxt-link>
<ButtonStyled v-if="hasEditDetailsPermission" color="orange">
<nuxt-link :to="`/project/${project.id}/settings/environment`" class="mt-3 w-fit">
<SettingsIcon /> {{ formatMessage(messages.reviewEnvironmentSettings) }}
</nuxt-link>
</ButtonStyled>
@@ -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}}',

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

@@ -41,7 +41,7 @@ const dependencies = defineModel<any>('dependencies')
const organization = defineModel<any>('organization')
</script>
<template>
<div class="experimental-styles-within grid grid-cols-[1fr_3fr] gap-4">
<div class="experimental-styles-within grid gap-4 lg:grid-cols-[1fr_3fr]">
<div>
<aside class="universal-card">
<NavStack>
@@ -140,7 +140,7 @@ const organization = defineModel<any>('organization')
</NavStack>
</aside>
</div>
<div>
<div class="min-w-0">
<NuxtPage
v-model:project="project"
v-model:project-v3="projectV3"

29
apps/frontend/src/pages/[type]/[id]/settings/environment.vue
View File

@@ -110,18 +110,6 @@ const messages = defineMessages({
</script>
<template>
<div>
<UnsavedChangesPopup
v-if="supportsEnvironment && hasPermission"
:original="saved"
:modified="current"
:saving="saving"
:can-reset="!needsToVerify"
:text="needsToVerify ? messages.verifyLabel : undefined"
:save-label="needsToVerify ? messages.verifyButton : undefined"
:save-icon="needsToVerify ? CheckIcon : undefined"
@reset="reset"
@save="save"
/>
<div class="card experimental-styles-within">
<h2 class="m-0 mb-2 block text-lg font-extrabold text-contrast">
{{ formatMessage(commonProjectSettingsMessages.environment) }}
@@ -166,8 +154,23 @@ const messages = defineMessages({
:body="formatMessage(messages.reviewOptionsDescription)"
class="mb-3"
/>
<ProjectSettingsEnvSelector v-model="current.environment" :disabled="!hasPermission" />
<ProjectSettingsEnvSelector
v-model="current.environment"
:disabled="!hasPermission || projectV3?.environment?.length > 1"
/>
</template>
</div>
<UnsavedChangesPopup
v-if="supportsEnvironment && hasPermission"
:original="saved"
:modified="current"
:saving="saving"
:can-reset="!needsToVerify"
:text="needsToVerify ? messages.verifyLabel : undefined"
:save-label="needsToVerify ? messages.verifyButton : undefined"
:save-icon="needsToVerify ? CheckIcon : undefined"
@reset="reset"
@save="save"
/>
</div>
</template>

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

@@ -67,7 +67,9 @@
</label>
<div class="text-input-wrapper">
<div class="text-input-wrapper__before">
https://modrinth.com/{{ $getProjectTypeForUrl(project.project_type, project.loaders) }}/
<span class="hidden sm:inline">https://modrinth.com</span>/{{
$getProjectTypeForUrl(project.project_type, project.loaders)
}}/
</div>
<input
id="project-slug"