New project cards (#5298)
* 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:
@@ -300,42 +300,48 @@
|
||||
)
|
||||
.slice()
|
||||
.sort((a, b) => b.downloads - a.downloads)"
|
||||
:id="project.id"
|
||||
:key="project.id"
|
||||
:type="project.project_type"
|
||||
:categories="project.categories"
|
||||
:created-at="project.published"
|
||||
:updated-at="project.updated"
|
||||
:description="project.description"
|
||||
:downloads="project.downloads ? project.downloads.toString() : '0'"
|
||||
:follows="project.followers ? project.followers.toString() : '0'"
|
||||
:featured-image="project.gallery.find((element) => element.featured)?.url"
|
||||
:link="`/${project.project_type}/${project.slug ?? project.id}`"
|
||||
:title="project.title"
|
||||
:icon-url="project.icon_url"
|
||||
:name="project.title"
|
||||
:client-side="project.client_side"
|
||||
:server-side="project.server_side"
|
||||
:banner="project.gallery.find((element) => element.featured)?.url"
|
||||
:summary="project.description"
|
||||
:date-updated="project.updated"
|
||||
:downloads="project.downloads ?? 0"
|
||||
:followers="project.followers ?? 0"
|
||||
:tags="project.categories"
|
||||
:environment="{
|
||||
clientSide: project.client_side,
|
||||
serverSide: project.server_side,
|
||||
}"
|
||||
:color="project.color"
|
||||
:show-updated-date="!canEdit && collection.id !== 'following'"
|
||||
:show-created-date="!canEdit && collection.id !== 'following'"
|
||||
:layout="
|
||||
cosmetics.searchDisplayMode.collection === 'grid' ||
|
||||
cosmetics.searchDisplayMode.collection === 'gallery'
|
||||
? 'grid'
|
||||
: 'list'
|
||||
"
|
||||
>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="iconified-button remove-btn"
|
||||
:disabled="removing"
|
||||
@click="() => removeProject(project)"
|
||||
>
|
||||
<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
|
||||
<XIcon v-else aria-hidden="true" />
|
||||
{{ formatMessage(messages.removeProjectButton) }}
|
||||
</button>
|
||||
<button
|
||||
v-if="collection.id === 'following'"
|
||||
class="iconified-button"
|
||||
@click="unfollowProject(project)"
|
||||
>
|
||||
<HeartMinusIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.unfollowProjectButton) }}
|
||||
</button>
|
||||
<template v-if="canEdit || collection.id === 'following'" #actions>
|
||||
<button
|
||||
v-if="canEdit"
|
||||
class="iconified-button remove-btn"
|
||||
:disabled="removing"
|
||||
@click="() => removeProject(project)"
|
||||
>
|
||||
<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
|
||||
<XIcon v-else aria-hidden="true" />
|
||||
{{ formatMessage(messages.removeProjectButton) }}
|
||||
</button>
|
||||
<button
|
||||
v-if="collection.id === 'following'"
|
||||
class="iconified-button"
|
||||
@click="unfollowProject(project)"
|
||||
>
|
||||
<HeartMinusIcon aria-hidden="true" />
|
||||
{{ formatMessage(messages.unfollowProjectButton) }}
|
||||
</button>
|
||||
</template>
|
||||
</ProjectCard>
|
||||
</div>
|
||||
<div v-else>
|
||||
@@ -395,6 +401,7 @@ import {
|
||||
normalizeChildren,
|
||||
NormalPage,
|
||||
OverflowMenu,
|
||||
ProjectCard,
|
||||
RadioButtons,
|
||||
SidebarCard,
|
||||
useRelativeTime,
|
||||
@@ -406,7 +413,6 @@ import dayjs from 'dayjs'
|
||||
|
||||
import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
|
||||
import NavTabs from '~/components/ui/NavTabs.vue'
|
||||
import ProjectCard from '~/components/ui/ProjectCard.vue'
|
||||
import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
|
||||
|
||||
const { handleError } = injectNotificationManager()
|
||||
|
||||
Reference in New Issue
Block a user