mirror of
https://github.com/mmahdium/TBW.git
synced 2025-11-04 04:28:13 +01:00
Added type badge to the mediacard
This commit is contained in:
@@ -39,79 +39,96 @@ 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">
|
||||
<button
|
||||
v-motion-fade-visible-once
|
||||
v-if="!alreadyAdded"
|
||||
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"
|
||||
@click="emit('add-media', props.media)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
<!-- 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"
|
||||
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"
|
||||
@click="emit('add-media', props.media)"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</button>
|
||||
<button
|
||||
v-motion-fade-visible-once
|
||||
v-else
|
||||
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"
|
||||
@click="emit('remove-media', props.media.Id)"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
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>
|
||||
</button>
|
||||
<button
|
||||
v-motion-fade-visible-once
|
||||
v-else
|
||||
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"
|
||||
@click="emit('remove-media', props.media.Id)"
|
||||
>
|
||||
<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>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user