sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 12:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

begin button consistency pass

Browse Source
This commit is contained in:
Prospector
2026-08-07 13:34:26 -07:00
parent a71a361e0f
commit 4f9baffa13
10 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/layouts/default.vue
+48 -54
View File
@@ -88,19 +88,19 @@
</div>
<div
class="col-span-2 row-start-2 flex justify-center lg:col-span-1 lg:row-start-auto"
:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
:class="{ 'gap-4': !flags.projectTypesPrimaryNav, 'gap-1': flags.projectTypesPrimaryNav }"
>
<template v-if="flags.projectTypesPrimaryNav">
<ButtonLink
type="quiet"
to="/discover/mods"
size="sm"
:class="
route.name === 'discover-mods' || route.path.startsWith('/mod/')
? (route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary') ===
'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/mods')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/mod/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BoxIcon aria-hidden="true" />
@@ -109,14 +109,13 @@
<ButtonLink
type="quiet"
to="/discover/resourcepacks"
size="sm"
:class="
route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
? (route.name === 'discover-resourcepacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/resourcepacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/resourcepack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PaintbrushIcon aria-hidden="true" />
@@ -125,14 +124,13 @@
<ButtonLink
type="quiet"
to="/discover/datapacks"
size="sm"
:class="
route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
? (route.name === 'discover-datapacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/datapacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/datapack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<BracesIcon aria-hidden="true" />
@@ -141,14 +139,13 @@
<ButtonLink
type="quiet"
to="/discover/modpacks"
size="sm"
:class="
route.name === 'discover-modpacks' || route.path.startsWith('/modpack/')
? (route.name === 'discover-modpacks'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/modpacks')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/modpack/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PackageOpenIcon aria-hidden="true" />
@@ -156,15 +153,14 @@
</ButtonLink>
<ButtonLink
type="quiet"
size="sm"
to="/discover/shaders"
:class="
route.name === 'discover-shaders' || route.path.startsWith('/shader/')
? (route.name === 'discover-shaders'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/shaders')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/shader/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<GlassesIcon aria-hidden="true" />
@@ -173,14 +169,13 @@
<ButtonLink
type="quiet"
to="/discover/plugins"
size="sm"
:class="
route.name === 'discover-plugins' || route.path.startsWith('/plugin/')
? (route.name === 'discover-plugins'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/plugins')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/plugin/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<PlugIcon aria-hidden="true" />
@@ -189,14 +184,13 @@
<ButtonLink
type="quiet"
to="/discover/servers"
size="sm"
:class="
route.name === 'discover-servers' || route.path.startsWith('/server/')
? (route.name === 'discover-servers'
? 'main-nav-primary'
: 'main-nav-secondary') === 'main-nav-primary'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
: '!bg-[var(--color-button-bg)] !text-contrast'
: ''
route.path.startsWith('/discover/servers')
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: route.path.startsWith('/server/')
? '!bg-[var(--color-button-bg)] !text-contrast'
: ''
"
>
<ServerIcon aria-hidden="true" />
@@ -208,6 +202,7 @@
type="quiet"
:label="formatMessage(commonMessages.moreOptionsButton)"
hoverable
:icon-only="false"
:options="[
{
id: 'mods',
@@ -253,9 +248,8 @@
},
]"
:class="[
'!w-auto !rounded-xl !px-2.5',
isDiscovering
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-icon-selected)]'
: isDiscoveringSubpage
? '!bg-[var(--color-button-bg)] !text-contrast'
: '',
@@ -368,7 +362,7 @@
type="quiet"
:icon-only="false"
:label="formatMessage(messages.createNew)"
class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
class="btn-dropdown-animation"
:options="[
{
id: 'review-projects',
@@ -501,7 +495,7 @@
type="quiet"
:icon-only="false"
:label="formatMessage(messages.createNew)"
class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
class="btn-dropdown-animation"
:options="[
{
id: 'new-project',
@@ -614,7 +608,7 @@
<ButtonLink
v-tooltip="formatMessage(commonMessages.settingsLabel)"
to="/settings"
class="!w-9 !rounded-full !px-0"
icon-only
>
<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
</ButtonLink>
apps/frontend/src/pages/[type]/[project].vue
+11 -2
View File
@@ -146,7 +146,7 @@
color="brand"
size="xl"
:to="`${projectPath}/settings`"
class="!w-12 !rounded-full !px-0 !font-bold lg:!hidden"
class="lg:!hidden"
>
<SettingsIcon />
</ButtonLink>
@@ -156,7 +156,7 @@
color="brand"
size="xl"
:to="`${projectPath}/settings`"
class="!font-bold max-lg:!hidden"
class="max-lg:!hidden"
>
<SettingsIcon />
{{ formatMessage(messages.editProject) }}
@@ -498,12 +498,15 @@
<script setup>
import {
BulletListIcon,
ChartIcon,
ChevronRightIcon,
ClipboardCopyIcon,
DownloadIcon,
FolderSearchIcon,
HeartIcon,
ImagesIcon,
InfoIcon,
ListIcon,
MoreVerticalIcon,
PlayIcon,
@@ -512,6 +515,7 @@ import {
ScanEyeIcon,
ServerPlusIcon,
SettingsIcon,
VersionIcon,
XIcon,
} from '@modrinth/assets'
import { getMarginTarget, moderationSettings } from '@modrinth/moderation'
@@ -2007,15 +2011,18 @@ const navLinks = computed(() => {
return [
{
label: formatMessage(messages.descriptionTab),
icon: InfoIcon,
href: withInstallContextQuery(projectUrl),
},
{
label: formatMessage(messages.galleryTab),
icon: ImagesIcon,
href: withInstallContextQuery(`${projectUrl}/gallery`),
shown: galleryCount > 0 || !!currentMember.value,
},
{
label: formatMessage(messages.changelogTab),
icon: BulletListIcon,
href: withInstallContextQuery(`${projectUrl}/changelog`),
shown:
hasVersions.value && projectV3Loaded.value && projectV3.value?.minecraft_server == null,
@@ -2023,6 +2030,7 @@ const navLinks = computed(() => {
},
{
label: formatMessage(messages.versionsTab),
icon: VersionIcon,
href: withInstallContextQuery(`${projectUrl}/versions`),
shown:
(hasVersions.value || !!currentMember.value) &&
@@ -2033,6 +2041,7 @@ const navLinks = computed(() => {
},
{
label: formatMessage(messages.moderationTab),
icon: ScaleIcon,
href: withInstallContextQuery(`${projectUrl}/moderation`),
shown: !!currentMember.value,
},