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

29
src/components/MediaCard.vue
View File

@@ -39,37 +39,53 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
</router-link>
<!-- 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" />
</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">
<router-link
:to="{ name: 'details', params: { type: props.media.MediaType, id: props.media.Id } }"
class="block"
>
<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 }}
</h2>
<time
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', {
year: 'numeric',
month: 'long',
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>
</router-link>
<div class="card-actions justify-end mt-auto">
<!-- Actions row -->
<div class="card-actions flex items-center justify-between mt-auto">
<!-- Type badge -->
<span class="badge badge-outline text-xs font-medium px-2 py-1">
{{ props.media.MediaType === 'movie' ? 'Movie' : 'Show' }}
</span>
<!-- Bookmark buttons -->
<div class="flex gap-2">
<button
v-motion-fade-visible-once
v-if="!alreadyAdded"
@@ -115,4 +131,5 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
</div>
</div>
</div>
</div>
</template>