MrSphay/Modrinth-plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

proj card fixes

Browse Source
This commit is contained in:
Prospector
2026-02-07 12:05:59 -08:00
parent a978873bff
commit 428efde36d
7 changed files with 178 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/frontend/src/pages/collection/[id].vue
View File

@@ -285,9 +285,9 @@
]"
/>
<div
<ProjectCardList
v-if="projects && projects?.length > 0"
:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
:layout="cosmetics.searchDisplayMode.collection"
>
<ProjectCard
v-for="project in (route.params.projectType !== undefined
@@ -343,7 +343,7 @@
</button>
</template>
</ProjectCard>
</div>
</ProjectCardList>
<div v-else>
<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
<EmptyIllustration class="h-[120px] w-auto" />
@@ -402,6 +402,7 @@ import {
NormalPage,
OverflowMenu,
ProjectCard,
ProjectCardList,
RadioButtons,
SidebarCard,
useRelativeTime,

86
apps/frontend/src/pages/organization/[id].vue
View File

@@ -186,50 +186,47 @@
<div v-if="navLinks.length > 2" class="mb-4 max-w-full overflow-x-auto">
<NavTabs :links="navLinks" />
</div>
<template v-if="projects && projects.length > 0">
<div class="project-list display-mode--list">
<ProjectCard
v-for="project in (route.params.projectType !== undefined
? (projects ?? []).filter((x) =>
x.project_types.includes(
typeof route.params.projectType === 'string'
? route.params.projectType.slice(0, route.params.projectType.length - 1)
: route.params.projectType[0]?.slice(
0,
route.params.projectType[0].length - 1,
) || '',
),
)
: (projects ?? [])
)
.slice()
.sort((a, b) => b.downloads - a.downloads)"
:key="project.id"
:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
:title="project.name"
:icon-url="project.icon_url"
:banner="project.gallery.find((element) => element.featured)?.url"
:summary="project.summary"
:date-updated="project.updated"
:downloads="project.downloads"
:followers="project.followers"
:tags="project.categories"
:environment="{
clientSide: project.client_side,
serverSide: project.server_side,
}"
:status="
auth.user &&
(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
? (project.status as ProjectStatus)
: undefined
"
:color="project.color"
layout="list"
/>
</div>
</template>
<ProjectCardList v-if="projects && projects.length > 0">
<ProjectCard
v-for="project in (route.params.projectType !== undefined
? (projects ?? []).filter((x) =>
x.project_types.includes(
typeof route.params.projectType === 'string'
? route.params.projectType.slice(0, route.params.projectType.length - 1)
: route.params.projectType[0]?.slice(
0,
route.params.projectType[0].length - 1,
) || '',
),
)
: (projects ?? [])
)
.slice()
.sort((a, b) => b.downloads - a.downloads)"
:key="project.id"
:link="`/${project.project_types[0] ?? 'project'}/${project.slug || project.id}`"
:title="project.name"
:icon-url="project.icon_url"
:banner="project.gallery.find((element) => element.featured)?.url"
:summary="project.summary"
:date-updated="project.updated"
:downloads="project.downloads"
:followers="project.followers"
:tags="project.categories"
:environment="{
clientSide: project.client_side,
serverSide: project.server_side,
}"
:status="
auth.user &&
(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
? (project.status as ProjectStatus)
: undefined
"
:color="project.color"
layout="list"
/>
</ProjectCardList>
<div v-else-if="true" class="error">
<UpToDate class="icon" />
<br />
@@ -267,6 +264,7 @@ import {
ContentPageHeader,
OverflowMenu,
ProjectCard,
ProjectCardList,
useVIntl,
} from '@modrinth/ui'
import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'

8
apps/frontend/src/pages/user/[id].vue
View File

@@ -286,9 +286,9 @@
<NavTabs :links="navLinks" />
</div>
<div v-if="projects.length > 0">
<div
<ProjectCardList
v-if="route.params.projectType !== 'collections'"
:class="'project-list display-mode--' + cosmetics.searchDisplayMode.user"
:layout="cosmetics.searchDisplayMode.user"
>
<ProjectCard
v-for="project in (route.params.projectType !== undefined
@@ -315,6 +315,7 @@
...project.additional_categories,
]"
:followers="project.followers"
:banner="project.gallery.find((element) => element.featured)?.url"
:color="project.color ?? undefined"
:environment="{
clientSide: project.client_side,
@@ -328,7 +329,7 @@
"
:status="project.status"
/>
</div>
</ProjectCardList>
</div>
<div
v-else-if="
@@ -499,6 +500,7 @@ import {
NewModal,
OverflowMenu,
ProjectCard,
ProjectCardList,
TagItem,
useRelativeTime,
useVIntl,

8
packages/ui/src/components/base/SmartClickable.vue
View File

@@ -1,7 +1,13 @@
<template>
<div class="smart-clickable" :class="{ 'smart-clickable--has-clickable': !!$slots.clickable }">
<slot name="clickable" />
<div v-bind="$attrs" class="smart-clickable__contents pointer-events-none">
<div
v-bind="$attrs"
class="smart-clickable__contents"
:class="{
'pointer-events-none': !!$slots.clickable,
}"
>
<slot />
</div>
</div>

2
packages/ui/src/components/project/ProjectCardList.vue
View File

@@ -23,6 +23,6 @@ withDefaults(
<style scoped lang="scss">
.grid-project-list {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
</style>

227
packages/ui/src/components/project/card/ProjectCard.vue
View File

@@ -1,123 +1,52 @@
<template>
<div class="w-full" @mouseenter="$emit('hover')">
<SmartClickable class="w-full project-card-container">
<template v-if="link" #clickable>
<AutoLink
:to="link"
class="rounded-xl no-outline no-click-animation custom-focus-indicator"
></AutoLink>
</template>
<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
<div
:style="{ '--_project-color': cssColor }"
class="relative bg-project-gradient overflow-clip aspect-[2/1] w-full border-0 border-b-[1px] border-solid border-surface-4"
>
<img
v-if="banner"
:src="banner"
alt=""
class="absolute w-full h-full inset-0 object-cover object-center"
/>
<img
v-else
src="https://cdn-raw.modrinth.com/landing-new/landing.webp"
alt=""
class="absolute w-full h-full inset-0 object-cover object-center placeholder-banner scale-[200%]"
/>
</div>
<div class="p-4 flex flex-col gap-3 grow">
<div class="flex gap-3">
<Avatar :src="iconUrl" size="96px" class="project-card__icon" no-shadow />
<div class="flex flex-col gap-2 w-full">
<div class="grid grid-cols-[1fr_auto] gap-4">
<div class="flex flex-col gap-1">
<div class="flex gap-2 items-center">
<ProjectCardTitle :title="title" compact />
<ProjectCardAuthor v-if="author" :author="author" />
</div>
<div class="m-0 font-normal line-clamp-2">
{{ summary }}
</div>
<SmartClickable class="w-full project-card-container">
<template v-if="link" #clickable>
<AutoLink
:to="link"
class="rounded-xl no-outline no-click-animation custom-focus-indicator"
@mouseenter="$emit('hover')"
></AutoLink>
</template>
<div v-if="layout === 'grid'" :class="[baseCardStyle, 'flex flex-col']">
<div
:style="{ '--_project-color': cssColor }"
class="relative bg-project-gradient overflow-clip aspect-[2/1] w-full border-0 border-b-[1px] border-solid border-surface-4"
>
<img
v-if="banner"
:src="banner"
alt=""
class="absolute w-full h-full inset-0 object-cover object-center"
/>
<img
v-else
src="https://cdn-raw.modrinth.com/landing-new/landing.webp"
alt=""
class="absolute w-full h-full inset-0 object-cover object-center placeholder-banner scale-[200%]"
/>
</div>
<div class="p-4 flex flex-col gap-3 grow">
<div class="flex gap-3">
<Avatar :src="iconUrl" size="96px" class="project-card__icon" no-shadow />
<div class="flex flex-col gap-2 w-full">
<div class="grid grid-cols-[1fr_auto] gap-4">
<div class="flex flex-col gap-1">
<div class="flex gap-2 items-center">
<ProjectCardTitle :title="title" compact />
<ProjectCardAuthor v-if="author" :author="author" />
</div>
<div class="m-0 font-normal line-clamp-2">
{{ summary }}
</div>
</div>
</div>
</div>
<div class="flex gap-2 shrink-0 empty:hidden smart-clickable:allow-pointer-events">
<slot name="actions" />
</div>
<div class="mt-auto flex flex-col gap-3 flex-wrap overflow-hidden justify-between grow">
<div class="flex items-center gap-1 flex-wrap overflow-hidden">
<ProjectCardEnvironment
v-if="environment"
:client-side="environment.clientSide"
:server-side="environment.serverSide"
/>
<ProjectCardTags
v-if="tags"
:tags="tags"
:exclude-loaders="excludeLoaders"
:deprioritized-tags="deprioritizedTags"
:max-tags="6 + (!!environment ? 0 : 1)"
/>
</div>
<div
v-if="downloads !== undefined || followers !== undefined"
class="flex items-center gap-3 justify-between flex-wrap"
>
<div class="flex items-center gap-3 no-wrap flex-wrap">
<ProjectCardStats :downloads="downloads" :followers="followers" />
</div>
<ProjectCardDate
v-if="date && autoDisplayDate"
:type="autoDisplayDate"
:date="date"
/>
</div>
</div>
</div>
</div>
<div
v-else
:class="[
baseCardStyle,
'p-4 grid grid-project-card-list gap-x-3 gap-y-2',
{ 'has-actions': !!$slots.actions },
]"
>
<Avatar
:src="iconUrl"
size="100px"
class="project-card__icon grid-project-card-list__icon"
no-shadow
/>
<div class="flex flex-col gap-2 grid-project-card-list__info">
<div class="flex gap-2 items-center">
<ProjectCardTitle :title="title" />
<ProjectCardAuthor v-if="author" :author="author" />
<ProjectStatusBadge v-if="status" :status="status" />
</div>
<div class="project-card-summary m-0 font-normal line-clamp-2">
{{ summary }}
</div>
</div>
<div
v-if="!!$slots.actions"
class="flex gap-1 shrink-0 ml-auto empty:hidden smart-clickable:allow-pointer-events grid-project-card-list__actions"
>
<div class="flex gap-2 shrink-0 empty:hidden smart-clickable:allow-pointer-events">
<slot name="actions" />
</div>
<div
class="flex flex-col gap-3 items-end shrink-0 ml-auto empty:hidden grid-project-card-list__stats"
:class="{ 'mt-3': !!$slots.actions }"
>
<div class="flex items-center gap-3">
<ProjectCardStats :downloads="downloads" :followers="followers" />
</div>
<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
</div>
<div class="mt-auto flex items-center gap-3 grid-project-card-list__tags">
<div class="flex items-center gap-1 flex-wrap">
<div class="mt-auto flex flex-col gap-3 flex-wrap overflow-hidden justify-between grow">
<div class="flex items-center gap-1 flex-wrap overflow-hidden">
<ProjectCardEnvironment
v-if="environment"
:client-side="environment.clientSide"
@@ -126,16 +55,82 @@
<ProjectCardTags
v-if="tags"
:tags="tags"
:extra-tags="extraTags"
:exclude-loaders="excludeLoaders"
:deprioritized-tags="deprioritizedTags"
:max-tags="(!!$slots.actions ? 4 : 5) + (!!environment ? 0 : 1)"
:max-tags="6 + (!!environment ? 0 : 1)"
/>
</div>
<div
v-if="downloads !== undefined || followers !== undefined"
class="flex items-center gap-3 justify-between flex-wrap"
>
<div class="flex items-center gap-3 no-wrap flex-wrap">
<ProjectCardStats :downloads="downloads" :followers="followers" />
</div>
<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
</div>
</div>
</div>
</SmartClickable>
</div>
</div>
<div
v-else
:class="[
baseCardStyle,
'p-4 grid grid-project-card-list gap-x-3 gap-y-2',
{ 'has-actions': !!$slots.actions },
]"
>
<Avatar
:src="iconUrl"
size="100px"
class="project-card__icon grid-project-card-list__icon"
no-shadow
/>
<div class="flex flex-col gap-2 grid-project-card-list__info">
<div class="flex gap-2 items-center">
<ProjectCardTitle :title="title" />
<ProjectCardAuthor v-if="author" :author="author" />
<ProjectStatusBadge v-if="status" :status="status" />
</div>
<div class="project-card-summary m-0 font-normal line-clamp-2">
{{ summary }}
</div>
</div>
<div
v-if="!!$slots.actions"
class="flex gap-1 shrink-0 ml-auto empty:hidden smart-clickable:allow-pointer-events grid-project-card-list__actions"
>
<slot name="actions" />
</div>
<div
class="flex flex-col gap-3 items-end shrink-0 ml-auto empty:hidden grid-project-card-list__stats"
:class="{ 'mt-3': !!$slots.actions }"
>
<div class="flex items-center gap-3">
<ProjectCardStats :downloads="downloads" :followers="followers" />
</div>
<ProjectCardDate v-if="date && autoDisplayDate" :type="autoDisplayDate" :date="date" />
</div>
<div class="mt-auto flex items-center gap-3 grid-project-card-list__tags">
<div class="flex items-center gap-1 flex-wrap">
<ProjectCardEnvironment
v-if="environment"
:client-side="environment.clientSide"
:server-side="environment.serverSide"
/>
<ProjectCardTags
v-if="tags"
:tags="tags"
:extra-tags="extraTags"
:exclude-loaders="excludeLoaders"
:deprioritized-tags="deprioritizedTags"
:max-tags="(!!$slots.actions ? 4 : 5) + (!!environment ? 0 : 1)"
/>
</div>
</div>
</div>
</SmartClickable>
</template>
<script setup lang="ts">

8
packages/utils/changelog.ts
View File

@@ -20,6 +20,14 @@ const VERSIONS: VersionEntry[] = [
// - Adjusted pop-up design to include a border.
// - Updated translations.`,
// },
{
date: `2026-02-07T12:10:00-08:00`,
product: 'web',
body: `## Improvements
- Fixed grid project lists displaying too narrow sometimes.
- Fixed grid project list on user profiles not displaying project banners.
- Fixed grid project list cards not matching the height of their neighbor.`,
},
{
date: `2026-02-07T11:45:00-08:00`,
product: 'web',