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

New project cards (#5298)

Browse Source 
* New project card

* no shadow on icons

* Remove updated label

* reduce tag count to 5

* improve envs

* fix: project card bottom row not growing

* move actions in grid mode

* focus changes + new project list component

* Allow more tags in grid mode, deprioritize non-loader tags

* fix prod deploy robots.txt

* remove unused id

* App cards

* prepr

* publish date + fix router links

* fix author hover underline in firefox

* perf: preload on search item hover

* remove unused filter

* remove option for old grid view

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Prospector
2026-02-07 11:18:59 -08:00
committed by GitHub
parent b6c22d6ca6
commit b005c1f522
46 changed files with 1343 additions and 1759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
packages/ui/src/stories/base/ProjectCard.stories.ts
View File

@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import ProjectCard from '../../components/base/ProjectCard.vue'
import ProjectCard from '../../components/project/card/ProjectCard.vue'
const meta = {
title: 'Base/ProjectCard',
@@ -18,22 +18,21 @@ type Story = StoryObj<typeof meta>
export const Default: Story = {
args: {
id: 'example-mod',
type: 'mod',
name: 'Example Mod',
author: 'ModAuthor',
description:
link: '/mod/example-mod',
layout: 'grid',
title: 'Example Mod',
author: { name: 'Prospector', link: 'https://modrinth.com/user/Prospector' },
summary:
'An example mod that demonstrates the ProjectCard component with a detailed description.',
iconUrl: 'https://cdn.modrinth.com/data/AANobbMI/icon.png',
downloads: '1234567',
follows: '12345',
createdAt: '2023-01-15T00:00:00Z',
updatedAt: '2024-01-15T00:00:00Z',
categories: ['adventure', 'decoration'],
projectTypeDisplay: 'Mod',
projectTypeUrl: 'mod',
clientSide: 'required',
serverSide: 'optional',
downloads: 1234567,
followers: 12345,
dateUpdated: '2024-01-15T00:00:00Z',
tags: ['adventure', 'decoration'],
environment: {
clientSide: 'required',
serverSide: 'optional',
},
},
}
@@ -43,59 +42,50 @@ export const AllTypes: Story = {
template: `
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<ProjectCard
id="example-mod"
type="mod"
name="Example Mod"
author="ModAuthor"
description="A wonderful mod that adds new features to the game."
downloads="1000000"
follows="50000"
createdAt="2023-01-15T00:00:00Z"
:categories="['technology', 'magic']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
clientSide="required"
serverSide="optional"
link="/mod/example-mod"
layout="grid"
title="Example Mod"
:author="{ name: 'ModAuthor', link: '/user/ModAuthor' }"
summary="A wonderful mod that adds new features to the game."
:downloads="1000000"
:followers="50000"
date-updated="2023-01-15T00:00:00Z"
:tags="['technology', 'magic']"
:environment="{ clientSide: 'required', serverSide: 'optional' }"
/>
<ProjectCard
id="example-plugin"
type="plugin"
name="Example Plugin"
author="PluginDev"
description="A server plugin for managing permissions."
downloads="500000"
follows="25000"
createdAt="2023-06-01T00:00:00Z"
:categories="['utility']"
projectTypeDisplay="Plugin"
projectTypeUrl="plugin"
serverSide="required"
link="/plugin/example-plugin"
layout="grid"
title="Example Plugin"
:author="{ name: 'PluginDev', link: '/user/PluginDev' }"
summary="A server plugin for managing permissions."
:downloads="500000"
:followers="25000"
date-updated="2023-06-01T00:00:00Z"
:tags="['utility']"
:environment="{ clientSide: 'unsupported', serverSide: 'required' }"
/>
<ProjectCard
id="example-modpack"
type="modpack"
name="Example Modpack"
author="PackCreator"
description="A curated collection of mods for the best experience."
downloads="250000"
follows="10000"
createdAt="2023-03-20T00:00:00Z"
:categories="['adventure']"
projectTypeDisplay="Modpack"
projectTypeUrl="modpack"
link="/modpack/example-modpack"
layout="grid"
title="Example Modpack"
:author="{ name: 'PackCreator', link: '/user/PackCreator' }"
summary="A curated collection of mods for the best experience."
:downloads="250000"
:followers="10000"
date-updated="2023-03-20T00:00:00Z"
:tags="['adventure']"
/>
<ProjectCard
id="example-resourcepack"
type="resourcepack"
name="HD Textures"
author="ArtistName"
description="High definition textures for a better visual experience."
downloads="750000"
follows="30000"
createdAt="2022-12-01T00:00:00Z"
:categories="['realistic']"
projectTypeDisplay="Resource Pack"
projectTypeUrl="resourcepack"
link="/resourcepack/example-resourcepack"
layout="grid"
title="HD Textures"
:author="{ name: 'ArtistName', link: '/user/ArtistName' }"
summary="High definition textures for a better visual experience."
:downloads="750000"
:followers="30000"
date-updated="2022-12-01T00:00:00Z"
:tags="['realistic']"
/>
</div>
`,
@@ -108,31 +98,27 @@ export const WithStatus: Story = {
template: `
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<ProjectCard
id="draft-mod"
type="mod"
name="Draft Project"
author="Developer"
description="This project is still in draft mode."
downloads="0"
follows="0"
createdAt="2024-01-01T00:00:00Z"
:categories="['utility']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
link="/mod/draft-mod"
layout="grid"
title="Draft Project"
:author="{ name: 'Developer', link: '/user/Developer' }"
summary="This project is still in draft mode."
:downloads="0"
:followers="0"
date-updated="2024-01-01T00:00:00Z"
:tags="['utility']"
status="draft"
/>
<ProjectCard
id="pending-mod"
type="mod"
name="Pending Review"
author="Developer"
description="This project is pending review."
downloads="0"
follows="0"
createdAt="2024-01-01T00:00:00Z"
:categories="['utility']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
link="/mod/pending-mod"
layout="grid"
title="Pending Review"
:author="{ name: 'Developer', link: '/user/Developer' }"
summary="This project is pending review."
:downloads="0"
:followers="0"
date-updated="2024-01-01T00:00:00Z"
:tags="['utility']"
status="processing"
/>
</div>
@@ -150,19 +136,16 @@ export const DisplayModes: StoryObj = {
<h3 class="text-lg font-bold mb-4">Grid Mode</h3>
<div class="display-mode--grid">
<ProjectCard
id="grid-mod"
type="mod"
name="Example Mod"
author="ModAuthor"
description="A wonderful mod that adds new features to the game."
downloads="1000000"
follows="50000"
createdAt="2023-01-15T00:00:00Z"
:categories="['technology', 'magic']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
clientSide="required"
serverSide="optional"
link="/mod/grid-mod"
layout="grid"
title="Example Mod"
:author="{ name: 'ModAuthor', link: '/user/ModAuthor' }"
summary="A wonderful mod that adds new features to the game."
:downloads="1000000"
:followers="50000"
date-updated="2023-01-15T00:00:00Z"
:tags="['technology', 'magic']"
:environment="{ clientSide: 'required', serverSide: 'optional' }"
/>
</div>
</div>
@@ -170,40 +153,34 @@ export const DisplayModes: StoryObj = {
<h3 class="text-lg font-bold mb-4">List Mode</h3>
<div class="display-mode--list">
<ProjectCard
id="list-mod"
type="mod"
name="Example Mod"
author="ModAuthor"
description="A wonderful mod that adds new features to the game."
downloads="1000000"
follows="50000"
createdAt="2023-01-15T00:00:00Z"
:categories="['technology', 'magic']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
clientSide="required"
serverSide="optional"
link="/mod/list-mod"
layout="list"
title="Example Mod"
:author="{ name: 'ModAuthor', link: '/user/ModAuthor' }"
summary="A wonderful mod that adds new features to the game."
:downloads="1000000"
:followers="50000"
date-updated="2023-01-15T00:00:00Z"
:tags="['technology', 'magic']"
:environment="{ clientSide: 'required', serverSide: 'optional' }"
/>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Gallery Mode</h3>
<div class="display-mode--gallery">
<h3 class="text-lg font-bold mb-4">Grid with Banner</h3>
<div class="display-mode--grid">
<ProjectCard
id="gallery-mod"
type="mod"
name="Example Mod"
author="ModAuthor"
description="A wonderful mod that adds new features to the game."
downloads="1000000"
follows="50000"
createdAt="2023-01-15T00:00:00Z"
:categories="['technology', 'magic']"
projectTypeDisplay="Mod"
projectTypeUrl="mod"
clientSide="required"
serverSide="optional"
featuredImage="https://cdn.modrinth.com/data/AANobbMI/images/be1cc1abc9cd9c2f52bb6a39be0b4b05af24d813.png"
link="/mod/gallery-mod"
layout="grid"
title="Example Mod"
:author="{ name: 'ModAuthor', link: '/user/ModAuthor' }"
summary="A wonderful mod that adds new features to the game."
:downloads="1000000"
:followers="50000"
date-updated="2023-01-15T00:00:00Z"
:tags="['technology', 'magic']"
:environment="{ clientSide: 'required', serverSide: 'optional' }"
banner="https://cdn.modrinth.com/data/AANobbMI/images/be1cc1abc9cd9c2f52bb6a39be0b4b05af24d813.png"
/>
</div>
</div>