You've already forked pages
forked from didirus/AstralRinth
c39bb78e38
* Start of app redesign * format * continue progress * Content page nearly done * Fix recursion issues with content page * Fix update all alignment * Discover page progress * Settings progress * Removed unlocked-size hack that breaks web * Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues * Ads + run prettier * Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor * fix ads not hiding when plus log in * rev lockfile changes/conflicts * Fix sign in page * Add generated * (mostly) Data driven search * Fix search mobile issue * profile fixes * Project versions page, fix typescript on UI lib and misc fixes * Remove unused gallery component * Fix linkfunction err * Search filter controls at top, localization for locked filters * Fix provided filter names * Fix navigating from instance browse to main browse * Friends frontend (#2995) * Friends system frontend * (almost) finish frontend * finish friends, fix lint * Fix lint --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> * Refresh macOS app icon * Update web search UI more * Fix link opens * Fix frontend build --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
86 lines
2.8 KiB
Vue
86 lines
2.8 KiB
Vue
<template>
|
|
<div class="button-base p-4 bg-bg-raised rounded-xl flex gap-3 group">
|
|
<div class="icon">
|
|
<Avatar :src="project.icon_url" size="96px" class="search-icon" />
|
|
</div>
|
|
<div class="flex flex-col gap-2 overflow-hidden">
|
|
<div class="gap-2 overflow-hidden no-wrap text-ellipsis">
|
|
<span class="text-lg font-extrabold text-contrast m-0 leading-none">{{
|
|
project.title
|
|
}}</span>
|
|
<span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
|
|
</div>
|
|
<div class="m-0 line-clamp-2">
|
|
{{ project.description }}
|
|
</div>
|
|
<div class="mt-auto flex items-center gap-1 no-wrap">
|
|
<TagsIcon class="h-4 w-4 shrink-0" />
|
|
<div
|
|
v-for="tag in categories"
|
|
:key="tag"
|
|
class="text-sm font-semibold text-secondary flex gap-1 px-[0.375rem] py-0.5 bg-button-bg rounded-full"
|
|
>
|
|
{{ formatCategory(tag) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2 items-end shrink-0 ml-auto">
|
|
<div class="flex items-center gap-2">
|
|
<DownloadIcon class="shrink-0" />
|
|
<span>
|
|
{{ formatNumber(project.downloads) }}
|
|
<span class="text-secondary">downloads</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<HeartIcon class="shrink-0" />
|
|
<span>
|
|
{{ formatNumber(project.follows ?? project.followers) }}
|
|
<span class="text-secondary">followers</span>
|
|
</span>
|
|
</div>
|
|
<div class="mt-auto relative">
|
|
<div
|
|
:class="{
|
|
'group-hover:-translate-y-3 group-hover:opacity-0 group-focus-within:opacity-0 group-hover:scale-95 group-focus-within:scale-95 transition-all':
|
|
$slots.actions,
|
|
}"
|
|
class="flex items-center gap-2"
|
|
>
|
|
<HistoryIcon class="shrink-0" />
|
|
<span>
|
|
<span class="text-secondary">Updated</span>
|
|
{{ dayjs(project.date_modified ?? project.updated).fromNow() }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="opacity-0 scale-95 translate-y-3 group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 group-focus-within:opacity-100 group-focus-within:scale-100 absolute bottom-0 right-0 transition-all w-fit"
|
|
>
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { TagsIcon, DownloadIcon, HeartIcon, HistoryIcon } from '@modrinth/assets'
|
|
import Avatar from '../base/Avatar.vue'
|
|
import { formatNumber, formatCategory } from '@modrinth/utils'
|
|
import dayjs from 'dayjs'
|
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
|
|
|
dayjs.extend(relativeTime)
|
|
|
|
defineProps({
|
|
project: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
categories: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
</script>
|