mirror of
https://github.com/modrinth/code.git
synced 2026-08-27 10:04:52 +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.
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user