mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2025-11-04 04:28:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added type badge to the mediacard

Browse Source
This commit is contained in:
Mohammad Mahdi
2025-11-03 13:37:06 +03:30
parent 66ab88c924
commit 2bd1783abb
1 changed files with 63 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/MediaCard.vue
View File

@@ -39,79 +39,96 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
</router-link> </router-link>
<!-- Radial progress placed on the right edge, centered on the seam between poster and body --> <!-- Radial progress placed on the right edge, centered on the seam between poster and body -->
<div class="absolute left-3 bottom-0 z-20 translate-y-1/2" aria-hidden="true"> <div class="absolute right-3 bottom-0 z-20 translate-y-1/2" aria-hidden="true">
<ScoreRing :VoteAverage="props.media.VoteAverage" /> <ScoreRing :VoteAverage="props.media.VoteAverage" />
</div> </div>
</div> </div>
<!-- Body: add top padding to ensure title sits below the ring seam --> <!-- Body -->
<div class="card-body p-4 flex flex-col pt-6"> <div class="card-body p-4 flex flex-col pt-6">
<router-link <router-link
:to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }" :to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
class="block" class="block"
> >
<h2 <h2
class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent wrap-break-word" class="card-title text-base font-semibold bg-linear-to-r from-gray-700 to-gray-500 bg-clip-text text-transparent break-words"
> >
{{ props.media.Title }} {{ props.media.Title }}
</h2> </h2>
<time <time
class="text-sm text-gray-400" class="text-sm text-gray-400"
:datetime="new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate).toISOString()" :datetime="
new Date(
props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate,
).toISOString()
"
> >
{{ {{
new Intl.DateTimeFormat('default', { new Intl.DateTimeFormat('default', {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
}).format(new Date(props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate)) }).format(
new Date(
props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate,
),
)
}} }}
</time> </time>
</router-link> </router-link>
<div class="card-actions justify-end mt-auto"> <!-- Actions row -->
<button <div class="card-actions flex items-center justify-between mt-auto">
v-motion-fade-visible-once <!-- Type badge -->
v-if="!alreadyAdded" <span class="badge badge-outline text-xs font-medium px-2 py-1">
class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-gray-100 to-gray-200 border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition" {{ props.media.MediaType === 'movie' ? 'Movie' : 'Show' }}
@click="emit('add-media', props.media)" </span>
>
<svg <!-- Bookmark buttons -->
xmlns="http://www.w3.org/2000/svg" <div class="flex gap-2">
fill="none" <button
viewBox="0 0 24 24" v-motion-fade-visible-once
stroke-width="1.5" v-if="!alreadyAdded"
stroke="currentColor" class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-gray-100 to-gray-200 border-gray-300 text-gray-700 hover:from-gray-200 hover:to-gray-300 hover:text-gray-900 transition"
class="size-6" @click="emit('add-media', props.media)"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" viewBox="0 0 24 24"
/> stroke-width="1.5"
</svg> stroke="currentColor"
</button> class="size-6"
<button >
v-motion-fade-visible-once <path
v-else stroke-linecap="round"
class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition" stroke-linejoin="round"
@click="emit('remove-media', props.media.Id)" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
> />
<svg </svg>
xmlns="http://www.w3.org/2000/svg" </button>
fill="none" <button
viewBox="0 0 24 24" v-motion-fade-visible-once
stroke-width="1.5" v-else
stroke="currentColor" class="btn btn-circle btn-md px-1.5 bg-linear-to-r from-red-50 to-red-100 border border-red-200 text-red-600 hover:from-red-100 hover:to-red-200 hover:text-red-700 transition"
class="size-6" @click="emit('remove-media', props.media.Id)"
> >
<path <svg
stroke-linecap="round" xmlns="http://www.w3.org/2000/svg"
stroke-linejoin="round" fill="none"
d="m3 3 1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 0 1 1.743-1.342 48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664 19.5 19.5" viewBox="0 0 24 24"
/> stroke-width="1.5"
</svg> stroke="currentColor"
</button> class="size-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m3 3 1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 0 1 1.743-1.342 48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664 19.5 19.5"
/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>