mirror of
https://github.com/modrinth/code.git
synced 2026-08-24 16:44:51 +00:00
fix: remove legacy button classes (#7011)
* fix: remove legacy button-group class for tailwind (conflicts) * fix: delete legacy button classes from scss * fix: fmt
This commit is contained in:
Calum H.
@@ -93,7 +93,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
:where(button:not([data-button]), .button, .iconified-button) {
|
||||
:where(button:not([data-button])) {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@@ -118,7 +118,6 @@
|
||||
gap: var(--spacing-card-sm);
|
||||
margin-bottom: calc(var(--spacing-card-sm) + var(--spacing-card-md));
|
||||
|
||||
.iconified-button,
|
||||
.input-group {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -250,185 +249,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.button-base {
|
||||
@extend .button-animation;
|
||||
font-weight: 500;
|
||||
outline: 2px solid transparent;
|
||||
|
||||
&:focus-visible:not(&:disabled),
|
||||
&:hover:not(&:disabled) {
|
||||
cursor: pointer;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
|
||||
&:active:not(&:disabled) {
|
||||
filter: brightness(0.8);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&[disabled='true'] {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
:not(tr).button-transparent {
|
||||
@extend .button-base;
|
||||
background-color: transparent;
|
||||
border-radius: var(--size-rounded-sm);
|
||||
|
||||
&:focus-visible:not(&:disabled),
|
||||
&:hover:not(&:disabled),
|
||||
&:active:not(&:disabled) {
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
&.brand-button {
|
||||
color: var(--color-brand);
|
||||
}
|
||||
|
||||
&.danger-button {
|
||||
color: var(--color-red);
|
||||
}
|
||||
}
|
||||
|
||||
tr.button-transparent {
|
||||
@extend .button-animation;
|
||||
background-color: transparent;
|
||||
border-radius: var(--size-rounded-sm);
|
||||
|
||||
&:focus-visible:not(&:disabled) > *,
|
||||
&:hover:not(&:disabled) > * {
|
||||
cursor: pointer;
|
||||
filter: brightness(0.85);
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
&:active:not(&:disabled) > * {
|
||||
filter: brightness(0.8);
|
||||
background-color: var(--color-raised-bg);
|
||||
}
|
||||
|
||||
&:disabled > *,
|
||||
&[disabled='true'] > * {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(50%);
|
||||
opacity: 0.5;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.button-color-base {
|
||||
box-sizing: border-box;
|
||||
--text-color: var(--color-button-text);
|
||||
--background-color: var(--color-button-bg);
|
||||
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
box-shadow:
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
border-radius: var(--size-rounded-sm);
|
||||
}
|
||||
|
||||
.iconified-button {
|
||||
@extend .button-base;
|
||||
@extend .button-color-base;
|
||||
|
||||
display: flex;
|
||||
padding: var(--spacing-card-sm) var(--spacing-card-bg);
|
||||
margin: 0;
|
||||
font-size: var(--font-size-nm);
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
transition:
|
||||
opacity 0.5s ease-in-out,
|
||||
filter 0.2s ease-in-out,
|
||||
scale 0.05s ease-in-out,
|
||||
outline 0.2s ease-in-out;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0 0.5rem;
|
||||
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.transparent {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.square-button {
|
||||
@extend .button-base;
|
||||
|
||||
--text-color: var(--color-button-text);
|
||||
--background-color: var(--color-button-bg);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.25rem;
|
||||
width: 2.25rem;
|
||||
border-radius: var(--size-rounded-sm);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
box-shadow:
|
||||
var(--shadow-inset-sm),
|
||||
0 0 0 0 transparent;
|
||||
|
||||
svg {
|
||||
min-width: 1.25rem;
|
||||
max-width: 1.25rem;
|
||||
min-height: 1.25rem;
|
||||
max-height: 1.25rem;
|
||||
}
|
||||
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.raised-button {
|
||||
--background-color: var(--color-raised-bg);
|
||||
box-shadow: var(--shadow-inset-sm), var(--shadow-raised);
|
||||
}
|
||||
|
||||
.danger-button {
|
||||
--background-color: var(--color-red);
|
||||
--text-color: var(--color-brand-inverted);
|
||||
}
|
||||
|
||||
.moderation-button {
|
||||
--background-color: var(--color-orange);
|
||||
--text-color: var(--color-brand-inverted);
|
||||
}
|
||||
|
||||
.brand-button {
|
||||
--background-color: var(--color-brand);
|
||||
--text-color: var(--color-brand-inverted);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
grid-gap: var(--spacing-card-sm);
|
||||
flex-wrap: wrap;
|
||||
margin-top: var(--spacing-card-md);
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -501,7 +321,6 @@ textarea.known-error {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.button-animation,
|
||||
button {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
@@ -475,18 +475,6 @@ input {
|
||||
outline: 2px solid transparent !important;
|
||||
}
|
||||
|
||||
.button-animation {
|
||||
transition:
|
||||
opacity 0.5s ease-in-out,
|
||||
filter 0.2s ease-in-out,
|
||||
transform 0.05s ease-in-out,
|
||||
outline-width 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.button-transparent {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.qc-cmp2-close-tooltip {
|
||||
background-color: transparent;
|
||||
color: hsl(145, 78%, 28%);
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
<template>
|
||||
<div class="chips">
|
||||
<button
|
||||
v-for="item in items"
|
||||
:key="item"
|
||||
class="iconified-button"
|
||||
:class="{ selected: selected === item, capitalize: capitalize }"
|
||||
@click="toggleItem(item)"
|
||||
>
|
||||
<CheckIcon v-if="selected === item" />
|
||||
<span>{{ formatLabel(item) }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CheckIcon } from '@modrinth/assets'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CheckIcon,
|
||||
},
|
||||
props: {
|
||||
modelValue: {
|
||||
required: true,
|
||||
type: String,
|
||||
},
|
||||
items: {
|
||||
required: true,
|
||||
type: Array,
|
||||
},
|
||||
neverEmpty: {
|
||||
default: true,
|
||||
type: Boolean,
|
||||
},
|
||||
formatLabel: {
|
||||
default: (x) => x,
|
||||
type: Function,
|
||||
},
|
||||
capitalize: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
computed: {
|
||||
selected: {
|
||||
get() {
|
||||
return this.modelValue
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:modelValue', value)
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
if (this.items.length > 0 && this.neverEmpty) {
|
||||
this.selected = this.items[0]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleItem(item) {
|
||||
if (this.selected === item && !this.neverEmpty) {
|
||||
this.selected = null
|
||||
} else {
|
||||
this.selected = item
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chips {
|
||||
display: flex;
|
||||
grid-gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.iconified-button {
|
||||
&.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0.25rem solid var(--color-focus-ring);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--color-button-text-active);
|
||||
background-color: var(--color-brand-highlight);
|
||||
box-shadow:
|
||||
inset 0 0 0 transparent,
|
||||
0 0 0 2px var(--color-brand);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
ToggleRightIcon,
|
||||
TwitterIcon,
|
||||
} from '@modrinth/assets'
|
||||
import { ButtonLink } from '@modrinth/ui'
|
||||
import { Button, ButtonLink } from '@modrinth/ui'
|
||||
import {
|
||||
AutoLink,
|
||||
defineMessage,
|
||||
@@ -266,11 +266,17 @@ function developerModeIncrement() {
|
||||
:aria-label="formatMessage(messages.modrinthInformation)"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<TextLogo
|
||||
aria-hidden="true"
|
||||
class="text-logo button-base h-6 w-auto text-contrast lg:h-8"
|
||||
<Button
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
aria-label="Modrinth"
|
||||
class="!h-auto !p-0"
|
||||
@click="developerModeIncrement()"
|
||||
/>
|
||||
>
|
||||
<span class="inline-flex">
|
||||
<TextLogo aria-hidden="true" class="text-logo h-6 w-auto text-contrast lg:h-8" />
|
||||
</span>
|
||||
</Button>
|
||||
<ButtonLink
|
||||
v-if="flags.developerMode"
|
||||
v-tooltip="formatMessage(commonSettingsMessages.featureFlags)"
|
||||
|
||||
@@ -17,10 +17,12 @@
|
||||
{{ item.label }}
|
||||
</div>
|
||||
|
||||
<NuxtLink
|
||||
<ButtonLink
|
||||
v-else-if="item.link ?? item.to"
|
||||
type="quiet"
|
||||
interaction="surface"
|
||||
:to="(item.link ?? item.to) as string"
|
||||
class="nav-item inline-flex w-full cursor-pointer items-center gap-2 rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
|
||||
class="nav-item !h-auto !w-full !justify-start !rounded-xl !px-4 !py-2.5 text-left leading-tight"
|
||||
:class="{ 'is-active': isActive(item as NavStackLinkItem) }"
|
||||
>
|
||||
<component
|
||||
@@ -37,12 +39,14 @@
|
||||
{{ String(item.badge) }}
|
||||
</span>
|
||||
<span v-if="item.chevron" class="ml-auto"><ChevronRightIcon /></span>
|
||||
</NuxtLink>
|
||||
</ButtonLink>
|
||||
|
||||
<button
|
||||
<Button
|
||||
v-else-if="item.action"
|
||||
class="nav-item inline-flex w-full cursor-pointer items-center gap-2 text-nowrap rounded-xl border-none bg-transparent px-4 py-2.5 text-left text-base font-semibold leading-tight text-button-text transition-all hover:bg-button-bg hover:text-contrast active:scale-[0.97]"
|
||||
:class="{ 'danger-button': item.danger }"
|
||||
type="quiet"
|
||||
interaction="surface"
|
||||
:color="item.danger ? 'red' : undefined"
|
||||
class="nav-item !h-auto !w-full !justify-start !rounded-xl !px-4 !py-2.5 text-left leading-tight"
|
||||
@click="item.action"
|
||||
>
|
||||
<component
|
||||
@@ -58,7 +62,7 @@
|
||||
>
|
||||
{{ String(item.badge) }}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<span v-else>You frog. 🐸</span>
|
||||
</li>
|
||||
@@ -69,6 +73,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ChevronRightIcon } from '@modrinth/assets'
|
||||
import { Button, ButtonLink } from '@modrinth/ui'
|
||||
import { type Component, computed, useSlots } from 'vue'
|
||||
|
||||
type NavStackBaseItem = {
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<nav
|
||||
ref="scrollContainer"
|
||||
class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
>
|
||||
<button
|
||||
v-for="(option, index) in options"
|
||||
:key="`option-group-${index}`"
|
||||
ref="optionButtons"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
|
||||
:class="{
|
||||
'text-button-textSelected': modelValue === option,
|
||||
'text-primary': modelValue !== option,
|
||||
}"
|
||||
@click="setOption(option)"
|
||||
>
|
||||
<slot :option="option" :selected="modelValue === option" />
|
||||
</button>
|
||||
<div
|
||||
class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
|
||||
:style="{
|
||||
left: sliderLeftPx,
|
||||
top: sliderTopPx,
|
||||
right: sliderRightPx,
|
||||
bottom: sliderBottomPx,
|
||||
opacity: initialized ? 1 : 0,
|
||||
}"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" generic="T">
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const modelValue = defineModel<T>({ required: true })
|
||||
|
||||
const props = defineProps<{
|
||||
options: T[]
|
||||
}>()
|
||||
|
||||
const scrollContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const sliderLeft = ref(4)
|
||||
const sliderTop = ref(4)
|
||||
const sliderRight = ref(4)
|
||||
const sliderBottom = ref(4)
|
||||
|
||||
const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
|
||||
const sliderTopPx = computed(() => `${sliderTop.value}px`)
|
||||
const sliderRightPx = computed(() => `${sliderRight.value}px`)
|
||||
const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
|
||||
|
||||
const optionButtons = ref()
|
||||
|
||||
const initialized = ref(false)
|
||||
|
||||
function setOption(option: T) {
|
||||
modelValue.value = option
|
||||
}
|
||||
|
||||
watch(modelValue, () => {
|
||||
startAnimation(props.options.indexOf(modelValue.value))
|
||||
})
|
||||
|
||||
function startAnimation(index: number) {
|
||||
const el = optionButtons.value[index]
|
||||
|
||||
if (!el || !el.offsetParent) return
|
||||
|
||||
const newValues = {
|
||||
left: el.offsetLeft,
|
||||
top: el.offsetTop,
|
||||
right: el.offsetParent.offsetWidth - el.offsetLeft - el.offsetWidth,
|
||||
bottom: el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight,
|
||||
}
|
||||
|
||||
if (sliderLeft.value === 4 && sliderRight.value === 4) {
|
||||
sliderLeft.value = newValues.left
|
||||
sliderRight.value = newValues.right
|
||||
sliderTop.value = newValues.top
|
||||
sliderBottom.value = newValues.bottom
|
||||
} else {
|
||||
const delay = 200
|
||||
|
||||
if (newValues.left < sliderLeft.value) {
|
||||
sliderLeft.value = newValues.left
|
||||
setTimeout(() => {
|
||||
sliderRight.value = newValues.right
|
||||
}, delay)
|
||||
} else {
|
||||
sliderRight.value = newValues.right
|
||||
setTimeout(() => {
|
||||
sliderLeft.value = newValues.left
|
||||
}, delay)
|
||||
}
|
||||
|
||||
if (newValues.top < sliderTop.value) {
|
||||
sliderTop.value = newValues.top
|
||||
setTimeout(() => {
|
||||
sliderBottom.value = newValues.bottom
|
||||
}, delay)
|
||||
} else {
|
||||
sliderBottom.value = newValues.bottom
|
||||
setTimeout(() => {
|
||||
sliderTop.value = newValues.top
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
initialized.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
startAnimation(props.options.indexOf(modelValue.value))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navtabs-transition {
|
||||
transition:
|
||||
all 150ms cubic-bezier(0.4, 0, 0.2, 1),
|
||||
opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
|
||||
}
|
||||
|
||||
.card-shadow {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
</style>
|
||||
@@ -6,7 +6,7 @@
|
||||
</p>
|
||||
<p v-else>{{ getFormattedMessage(messages.invitationNoRole) }}</p>
|
||||
<div class="input-group">
|
||||
<Button type="colored" color="brand" class="brand-button" @click="acceptInvite()">
|
||||
<Button type="colored" color="brand" @click="acceptInvite()">
|
||||
<CheckIcon />
|
||||
{{ getFormattedMessage(commonMessages.acceptButton) }}
|
||||
</Button>
|
||||
|
||||
@@ -275,7 +275,6 @@
|
||||
{{ formatMessage(messages.actionApprove) }}
|
||||
</Button>
|
||||
<SplitButton
|
||||
class="!m-0 !inline-flex !flex-nowrap !justify-start !gap-0"
|
||||
type="colored"
|
||||
color="red"
|
||||
:menu-label="formatMessage(commonMessages.moreOptionsButton)"
|
||||
|
||||
@@ -629,14 +629,14 @@
|
||||
@focusout="isBrowseMenuOpen = false"
|
||||
>
|
||||
<div class="links cascade-links">
|
||||
<NuxtLink
|
||||
<ButtonLink
|
||||
v-for="navRoute in navRoutes"
|
||||
:key="navRoute.href"
|
||||
:to="navRoute.href"
|
||||
class="iconified-button"
|
||||
class="!h-auto !whitespace-normal"
|
||||
>
|
||||
{{ navRoute.label }}
|
||||
</NuxtLink>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -646,10 +646,10 @@
|
||||
@focusout="isMobileMenuOpen = false"
|
||||
>
|
||||
<div class="account-container">
|
||||
<NuxtLink
|
||||
<ButtonLink
|
||||
v-if="auth.user"
|
||||
:to="`/user/${auth.user.username}`"
|
||||
class="iconified-button account-button"
|
||||
class="account-button !h-auto !whitespace-normal"
|
||||
>
|
||||
<Avatar
|
||||
:src="auth.user.avatar_url"
|
||||
@@ -662,66 +662,85 @@
|
||||
<div>@{{ auth.user.username }}</div>
|
||||
<div>{{ formatMessage(commonMessages.visitYourProfile) }}</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<nuxt-link v-else class="iconified-button brand-button" :to="signInRouteObj">
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
v-else
|
||||
type="colored"
|
||||
color="brand"
|
||||
:to="signInRouteObj"
|
||||
class="!h-auto !whitespace-normal"
|
||||
>
|
||||
<LogInIcon aria-hidden="true" /> {{ formatMessage(commonMessages.signInButton) }}
|
||||
</nuxt-link>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<div class="links">
|
||||
<template v-if="auth.user">
|
||||
<button class="iconified-button danger-button" @click="logoutUser()">
|
||||
<Button
|
||||
type="colored"
|
||||
color="red"
|
||||
class="!h-auto !whitespace-normal"
|
||||
@click="logoutUser()"
|
||||
>
|
||||
<LogOutIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonMessages.signOutButton) }}
|
||||
</button>
|
||||
<button class="iconified-button" @click="$refs.modal_creation.show()">
|
||||
</Button>
|
||||
<Button class="!h-auto !whitespace-normal" @click="$refs.modal_creation.show()">
|
||||
<PlusIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonMessages.createAProjectButton) }}
|
||||
</button>
|
||||
<NuxtLink class="iconified-button" to="/dashboard/collections">
|
||||
</Button>
|
||||
<ButtonLink class="!h-auto !whitespace-normal" to="/dashboard/collections">
|
||||
<LibraryIcon class="icon" />
|
||||
{{ formatMessage(commonMessages.collectionsLabel) }}
|
||||
</NuxtLink>
|
||||
<NuxtLink class="iconified-button" to="/hosting/manage">
|
||||
</ButtonLink>
|
||||
<ButtonLink class="!h-auto !whitespace-normal" to="/hosting/manage">
|
||||
<ServerIcon class="icon" />
|
||||
{{ formatMessage(commonMessages.serversLabel) }}
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
v-if="auth.user.role === 'moderator' || auth.user.role === 'admin'"
|
||||
class="iconified-button"
|
||||
class="!h-auto !whitespace-normal"
|
||||
to="/moderation"
|
||||
>
|
||||
<ScaleIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonMessages.moderationLabel) }}
|
||||
</NuxtLink>
|
||||
<NuxtLink v-if="flags.developerMode" class="iconified-button" to="/settings/flags">
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
v-if="flags.developerMode"
|
||||
class="!h-auto !whitespace-normal"
|
||||
to="/settings/flags"
|
||||
>
|
||||
<ToggleRightIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonSettingsMessages.featureFlags) }}
|
||||
</NuxtLink>
|
||||
</ButtonLink>
|
||||
</template>
|
||||
<NuxtLink class="iconified-button" to="/settings">
|
||||
<ButtonLink class="!h-auto !whitespace-normal" to="/settings">
|
||||
<SettingsIcon aria-hidden="true" />
|
||||
{{ formatMessage(commonMessages.settingsLabel) }}
|
||||
</NuxtLink>
|
||||
<button class="iconified-button" @click="changeTheme">
|
||||
</ButtonLink>
|
||||
<Button class="!h-auto !whitespace-normal" @click="changeTheme">
|
||||
<MoonIcon v-if="$theme.active === 'light'" class="icon" />
|
||||
<SunIcon v-else class="icon" />
|
||||
<span class="dropdown-item__text">
|
||||
{{ formatMessage(messages.changeTheme) }}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-navbar" :class="{ expanded: isBrowseMenuOpen || isMobileMenuOpen }">
|
||||
<NuxtLink
|
||||
<ButtonLink
|
||||
to="/"
|
||||
class="tab button-animation"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="tab !h-auto !rounded-none !px-0"
|
||||
:title="formatMessage(navMenuMessages.home)"
|
||||
:aria-label="formatMessage(navMenuMessages.home)"
|
||||
>
|
||||
<HomeIcon aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="tab button-animation"
|
||||
</ButtonLink>
|
||||
<Button
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="tab !h-auto !rounded-none !px-0"
|
||||
:class="{ 'router-link-exact-active': isBrowseMenuOpen }"
|
||||
:title="formatMessage(navMenuMessages.search)"
|
||||
:aria-label="formatMessage(navMenuMessages.search)"
|
||||
@@ -734,11 +753,13 @@
|
||||
<SearchIcon aria-hidden="true" class="smaller" />
|
||||
{{ formatMessage(navMenuMessages.search) }}
|
||||
</template>
|
||||
</button>
|
||||
</Button>
|
||||
<template v-if="auth.user">
|
||||
<NuxtLink
|
||||
<ButtonLink
|
||||
to="/dashboard/notifications"
|
||||
class="tab button-animation"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="tab !h-auto !rounded-none !px-0"
|
||||
:aria-label="formatMessage(commonMessages.notificationsLabel)"
|
||||
:class="{
|
||||
'no-active': isMobileMenuOpen || isBrowseMenuOpen,
|
||||
@@ -752,18 +773,22 @@
|
||||
"
|
||||
>
|
||||
<BellIcon aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
</ButtonLink>
|
||||
<ButtonLink
|
||||
to="/dashboard"
|
||||
class="tab button-animation"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="tab !h-auto !rounded-none !px-0"
|
||||
:aria-label="formatMessage(commonMessages.dashboardLabel)"
|
||||
:title="formatMessage(commonMessages.dashboardLabel)"
|
||||
>
|
||||
<ChartIcon aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</ButtonLink>
|
||||
</template>
|
||||
<button
|
||||
class="tab button-animation"
|
||||
<Button
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="tab !h-auto !rounded-none !px-0"
|
||||
:title="formatMessage(messages.toggleMenu)"
|
||||
:aria-label="
|
||||
isMobileMenuOpen ? formatMessage(messages.closeMenu) : formatMessage(messages.openMenu)
|
||||
@@ -784,7 +809,7 @@
|
||||
circle
|
||||
/>
|
||||
</template>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="min-h-[calc(100vh-4.5rem-310.59px)]">
|
||||
@@ -842,6 +867,7 @@ import {
|
||||
} from '@modrinth/assets'
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonLink,
|
||||
commonMessages,
|
||||
commonProjectTypeCategoryMessages,
|
||||
|
||||
@@ -368,8 +368,4 @@ function getVersionLoaders(version) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-button {
|
||||
color: var(--color-accent-contrast);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<StarIcon fill="currentColor" aria-hidden="true" />
|
||||
Unset as banner
|
||||
</Button>
|
||||
<div class="button-group">
|
||||
<div class="mt-3 flex flex-wrap justify-end gap-2">
|
||||
<Button type="outlined" @click="modalEditItem?.hide()">
|
||||
<XIcon aria-hidden="true" />
|
||||
Cancel
|
||||
|
||||
@@ -86,7 +86,7 @@
|
||||
<StarIcon fill="currentColor" aria-hidden="true" />
|
||||
Unset as banner
|
||||
</Button>
|
||||
<div class="button-group">
|
||||
<div class="mt-3 flex flex-wrap justify-end gap-2">
|
||||
<Button type="outlined" @click="modal_edit_item.hide()">
|
||||
<XIcon aria-hidden="true" />
|
||||
Cancel
|
||||
|
||||
@@ -740,8 +740,4 @@ svg {
|
||||
color: var(--color-orange);
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -104,7 +104,7 @@
|
||||
:disabled="!hasPermission"
|
||||
/>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="mt-3 flex flex-wrap justify-start gap-2">
|
||||
<Button
|
||||
type="colored"
|
||||
color="brand"
|
||||
@@ -272,7 +272,7 @@
|
||||
@update:model-value="updateDonationLinks"
|
||||
/>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<div class="mt-3 flex flex-wrap justify-start gap-2">
|
||||
<Button type="colored" color="brand" :disabled="!hasChanges" @click="saveChanges()">
|
||||
<SaveIcon />
|
||||
Save changes
|
||||
@@ -560,8 +560,4 @@ function checkDifference(newLink, existingLink) {
|
||||
max-width: 26rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -270,9 +270,11 @@
|
||||
</nuxt-link>
|
||||
. You may override them below.
|
||||
</p>
|
||||
<nuxt-link
|
||||
<ButtonLink
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
:to="`/organization/${organization.slug}`"
|
||||
class="universal-card button-base recessed org"
|
||||
class="universal-card recessed org !h-auto !w-full !shrink !items-stretch !justify-start !whitespace-normal !p-[var(--spacing-card-bg)]"
|
||||
>
|
||||
<Avatar :src="organization.icon_url" :alt="organization.name" size="md" />
|
||||
<div class="details">
|
||||
@@ -294,7 +296,7 @@
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
<p v-else>
|
||||
This project is not managed by an organization. If you are the member of any organizations,
|
||||
@@ -562,6 +564,7 @@ import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
ButtonLink,
|
||||
Card,
|
||||
Checkbox,
|
||||
Combobox,
|
||||
|
||||
@@ -434,11 +434,6 @@ const toggleFeaturedCategory = (category: Category) => {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.category-list {
|
||||
column-count: 4;
|
||||
column-gap: var(--spacing-card-lg);
|
||||
|
||||
@@ -166,7 +166,7 @@
|
||||
v-if="
|
||||
subscription.metadata?.type === 'pyro' || subscription.metadata?.type === 'medal'
|
||||
"
|
||||
:to="`/hosting/manage/${subscription.metadata.id}`"
|
||||
:href="`/hosting/manage/${subscription.metadata.id}`"
|
||||
target="_blank"
|
||||
class="w-fit"
|
||||
>
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
Avatar,
|
||||
Badge,
|
||||
Button,
|
||||
ButtonLink,
|
||||
Checkbox,
|
||||
commonMessages,
|
||||
defineMessages,
|
||||
@@ -546,7 +547,7 @@ useSeoMeta({
|
||||
<h2 class="main-subheader">
|
||||
{{ formatMessage(messages.description) }}
|
||||
</h2>
|
||||
<div class="button-group">
|
||||
<div class="mx-auto flex w-fit flex-wrap justify-center gap-2 [mask-image:none]">
|
||||
<Button v-if="os" type="colored" color="brand" size="xl" @click="handleDownload">
|
||||
<LinuxIcon v-if="os === 'Linux'" />
|
||||
<WindowsIcon v-else-if="os === 'Windows'" />
|
||||
@@ -745,10 +746,12 @@ useSeoMeta({
|
||||
<div class="projects-showcase">
|
||||
<div v-for="(row, index) in rows" :key="index" class="row">
|
||||
<div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
|
||||
<nuxt-link
|
||||
<ButtonLink
|
||||
v-for="project in row"
|
||||
:key="project.id"
|
||||
class="project button-animation gradient-border"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="project gradient-border !h-auto !shrink !items-stretch !justify-start !whitespace-normal !p-4 !font-normal !leading-normal"
|
||||
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
|
||||
>
|
||||
<Avatar :src="project.icon_url!" alt="" size="sm" />
|
||||
@@ -760,7 +763,7 @@ useSeoMeta({
|
||||
{{ project.description }}
|
||||
</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1228,13 +1231,6 @@ useSeoMeta({
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
justify-content: center;
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 65rem;
|
||||
|
||||
@@ -13,11 +13,13 @@
|
||||
</div>
|
||||
<template v-if="orgs?.length > 0">
|
||||
<div class="orgs-grid">
|
||||
<nuxt-link
|
||||
<ButtonLink
|
||||
v-for="org in sortedOrgs"
|
||||
:key="org.id"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
:to="`/organization/${org.slug}`"
|
||||
class="universal-card button-base recessed org"
|
||||
class="universal-card recessed org !h-auto !w-full !shrink !items-stretch !justify-start !whitespace-normal !p-[var(--spacing-card-bg)]"
|
||||
:class="{ 'is-disabled': onlyAcceptedMembers(org.members).length === 0 }"
|
||||
>
|
||||
<Avatar :src="org.icon_url" :alt="org.name" class="icon" />
|
||||
@@ -41,7 +43,7 @@
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else> {{ formatMessage(messages.makeOrganization) }} </template>
|
||||
@@ -51,7 +53,14 @@
|
||||
|
||||
<script setup>
|
||||
import { PlusIcon, UsersIcon } from '@modrinth/assets'
|
||||
import { Avatar, Button, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
ButtonLink,
|
||||
defineMessages,
|
||||
injectModrinthClient,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
|
||||
import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
|
||||
|
||||
@@ -643,6 +643,7 @@ import {
|
||||
IntlFormatted,
|
||||
LoaderIcon,
|
||||
ModrinthServersPurchaseModal,
|
||||
OptionGroup,
|
||||
useFormatPrice,
|
||||
useVIntl,
|
||||
} from '@modrinth/ui'
|
||||
@@ -650,7 +651,6 @@ import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import OptionGroup from '~/components/ui/OptionGroup.vue'
|
||||
import MedalPlanPromotion from '~/components/ui/servers/marketing/MedalPlanPromotion.vue'
|
||||
import ServerPlanSelector from '~/components/ui/servers/marketing/ServerPlanSelector.vue'
|
||||
import { products } from '~/generated/state.json'
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<h2>
|
||||
{{ formatMessage(messages.discoverHeading) }}
|
||||
</h2>
|
||||
<div class="button-group">
|
||||
<div class="mx-auto mb-20 flex w-fit flex-wrap justify-center gap-5">
|
||||
<ButtonLink type="colored" color="brand" size="xl" to="/discover/mods">
|
||||
<CompassIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.discoverMods) }}
|
||||
@@ -50,10 +50,12 @@
|
||||
<div v-if="rows" class="projects-showcase">
|
||||
<div v-for="(row, index) in rows" :key="index" class="row">
|
||||
<div v-for="n in 2" :key="n" class="row__content" :class="{ offset: index % 2 }">
|
||||
<nuxt-link
|
||||
<ButtonLink
|
||||
v-for="project in row"
|
||||
:key="project.id"
|
||||
class="project button-animation"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="project !h-auto !shrink !items-stretch !justify-start !whitespace-normal !p-4 !font-normal !leading-normal"
|
||||
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}`"
|
||||
>
|
||||
<Avatar :src="project.icon_url" :alt="project.title" size="sm" loading="lazy" />
|
||||
@@ -65,7 +67,7 @@
|
||||
{{ project.description }}
|
||||
</span>
|
||||
</div>
|
||||
</nuxt-link>
|
||||
</ButtonLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -738,13 +740,6 @@ const creatorFeatureMessages = defineMessages({
|
||||
color: var(--landing-color-subheading);
|
||||
max-width: 50rem;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
width: fit-content;
|
||||
gap: 1.25rem;
|
||||
margin: 0 auto 5rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.users-section-outer {
|
||||
|
||||
@@ -43,13 +43,17 @@
|
||||
</div>
|
||||
<div class="project-list-layouts">
|
||||
<button
|
||||
class="preview-radio button-base"
|
||||
type="button"
|
||||
class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
|
||||
:class="{
|
||||
selected: cosmetics.searchDisplayMode[projectType.id] === 'list',
|
||||
'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
|
||||
cosmetics.searchDisplayMode[projectType.id] === 'list',
|
||||
}"
|
||||
@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'list')"
|
||||
>
|
||||
<div class="preview">
|
||||
<div
|
||||
class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
|
||||
>
|
||||
<div class="layout-list-mode">
|
||||
<div class="example-card card"></div>
|
||||
<div class="example-card card"></div>
|
||||
@@ -57,25 +61,30 @@
|
||||
<div class="example-card card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div
|
||||
class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
|
||||
>
|
||||
<RadioButtonCheckedIcon
|
||||
v-if="cosmetics.searchDisplayMode[projectType.id] === 'list'"
|
||||
class="radio shrink-0"
|
||||
class="radio mr-2 shrink-0"
|
||||
/>
|
||||
<RadioButtonIcon v-else class="radio shrink-0" />
|
||||
<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
|
||||
{{ formatMessage(layoutMode.rows) }}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="preview-radio button-base"
|
||||
type="button"
|
||||
class="flex !w-full cursor-pointer flex-col overflow-hidden rounded-[var(--radius-md)] border border-solid border-divider bg-button-bg p-0 text-left text-primary outline-2 outline-transparent transition-[filter,transform] hover:brightness-[0.85] focus-visible:ring-4 focus-visible:ring-brand-shadow active:scale-[0.97] active:brightness-[0.8] [&_.example-card]:m-0 [&_.example-card]:min-h-0 [&_.example-card]:border-2 [&_.example-card]:border-solid [&_.example-card]:border-transparent [&_.example-card]:p-4 [&_.example-card]:outline-2 [&_.example-card]:outline-transparent"
|
||||
:class="{
|
||||
selected:
|
||||
'!text-contrast [&_.example-card]:!border-brand [&_.example-card]:!bg-brand-highlight [&_.radio]:text-brand':
|
||||
cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
|
||||
cosmetics.searchDisplayMode[projectType.id] === 'grid',
|
||||
}"
|
||||
@click="() => (cosmetics.searchDisplayMode[projectType.id] = 'grid')"
|
||||
>
|
||||
<div class="preview">
|
||||
<div
|
||||
class="preview flex w-full items-center justify-center bg-bg p-6 outline-2 outline-transparent"
|
||||
>
|
||||
<div class="layout-gallery-mode">
|
||||
<div class="example-card card"></div>
|
||||
<div class="example-card card"></div>
|
||||
@@ -83,15 +92,17 @@
|
||||
<div class="example-card card"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">
|
||||
<div
|
||||
class="label flex grow items-center px-[var(--gap-lg)] py-[var(--gap-md)] text-left"
|
||||
>
|
||||
<RadioButtonCheckedIcon
|
||||
v-if="
|
||||
cosmetics.searchDisplayMode[projectType.id] === 'gallery' ||
|
||||
cosmetics.searchDisplayMode[projectType.id] === 'grid'
|
||||
"
|
||||
class="radio shrink-0"
|
||||
class="radio mr-2 shrink-0"
|
||||
/>
|
||||
<RadioButtonIcon v-else class="radio shrink-0" />
|
||||
<RadioButtonIcon v-else class="radio mr-2 shrink-0" />
|
||||
{{ formatMessage(layoutMode.grid) }}
|
||||
</div>
|
||||
</button>
|
||||
@@ -487,20 +498,5 @@ const listTypes = computed(() => {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
|
||||
gap: var(--gap-lg);
|
||||
|
||||
.preview-radio .example-card {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.preview-radio.selected .example-card {
|
||||
border-color: var(--color-brand);
|
||||
background-color: var(--color-brand-highlight);
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,19 +3,21 @@
|
||||
ref="scrollContainer"
|
||||
class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
|
||||
>
|
||||
<button
|
||||
<Button
|
||||
v-for="(option, index) in options"
|
||||
:key="`option-group-${index}`"
|
||||
ref="optionButtons"
|
||||
class="button-animation z-[1] flex flex-row items-center gap-2 rounded-full bg-transparent px-4 py-2 font-semibold"
|
||||
type="quiet"
|
||||
interaction="none"
|
||||
class="z-[1] !h-auto !gap-2 !rounded-full !px-4 !py-2"
|
||||
:class="{
|
||||
'text-button-textSelected': modelValue === option,
|
||||
'text-primary': modelValue !== option,
|
||||
'!text-brand': modelValue === option,
|
||||
'!text-primary': modelValue !== option,
|
||||
}"
|
||||
@click="setOption(option)"
|
||||
>
|
||||
<slot :option="option" :selected="modelValue === option" />
|
||||
</button>
|
||||
</Button>
|
||||
<div
|
||||
class="navtabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full bg-button-bgSelected p-1"
|
||||
:style="{
|
||||
@@ -33,6 +35,8 @@
|
||||
<script setup lang="ts" generic="T">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
|
||||
import Button from './buttons/Button.vue'
|
||||
|
||||
const modelValue = defineModel<T>({ required: true })
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -64,7 +68,7 @@ watch(modelValue, () => {
|
||||
})
|
||||
|
||||
function startAnimation(index: number) {
|
||||
const el = optionButtons.value[index]
|
||||
const el = optionButtons.value[index]?.element
|
||||
|
||||
if (!el || !el.offsetParent) return
|
||||
|
||||
|
||||
Reference in New Issue
Block a user