MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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

28
packages/ui/src/components/base/UnsavedChangesPopup.vue
View File

@@ -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),
)
</script>
<template>
<Transition name="pop-in">
<div v-if="shown" class="fixed w-full z-10 left-0 bottom-0 p-4">
<div v-if="shown" class="fixed w-full z-10 left-0 p-4 unsaved-changes-popup">
<div
class="flex items-center rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
class="flex items-center gap-2 rounded-2xl bg-bg-raised border-2 border-divider border-solid mx-auto max-w-[77rem] p-4"
>
<p class="m-0 font-semibold">{{ bodyText }}</p>
<p class="m-0 font-semibold text-sm md:text-base">{{ localizeIfPossible(text) }}</p>
<div class="ml-auto flex gap-2">
<ButtonStyled v-if="canReset" type="transparent">
<button :disabled="saving" @click="(e) => emit('reset', e)">
@@ -74,7 +69,7 @@ const saveText = computed(() =>
<button :disabled="saving" @click="(e) => emit('save', e)">
<SpinnerIcon v-if="saving" class="animate-spin" />
<component :is="saveIcon" v-else />
{{ saveText }}
{{ localizeIfPossible(saving ? savingLabel : saveLabel) }}
</button>
</ButtonStyled>
</div>
@@ -103,4 +98,19 @@ const saveText = computed(() =>
translate: 0 0.25rem;
opacity: 0;
}
.unsaved-changes-popup {
transition: bottom 0.25s ease-in-out;
bottom: 0;
}
@media (any-hover: none) and (max-width: 640px) {
.unsaved-changes-popup {
bottom: var(--size-mobile-navbar-height);
}
.expanded-mobile-nav .unsaved-changes-popup {
bottom: var(--size-mobile-navbar-height-expanded);
}
}
</style>