mahdium/TBW
1
0
Fork 0
mirror of https://github.com/mmahdium/TBW.git synced 2026-08-14 16:22:48 +03:30
Code Issues Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
mahdium
2025-11-03 15:09:58 +03:30
parent 2bd1783abb
commit 68d001837a
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MediaCard.vue
+23 -14
View File
@@ -24,11 +24,10 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300" class="card relative w-full h-full overflow-hidden bg-white/70 backdrop-blur-md border border-gray-200/60 shadow-xs hover:shadow-xl transition-all duration-300"
v-motion-fade-visible-once v-motion-fade-visible-once
> >
<!-- Poster wrapper with fixed aspect -->
<div class="relative w-full"> <div class="relative w-full">
<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 w-full aspect-2/3 overflow-hidden bg-gray-100" class="block w-full aspect-2/3 overflow-hidden bg-gray-100 relative"
> >
<ImageWithFallback <ImageWithFallback
:src="props.media.PosterPath" :src="props.media.PosterPath"
@@ -36,6 +35,8 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
size="w300" size="w300"
class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105" class="w-full h-full object-cover transform transition-transform duration-500 hover:scale-105"
/> />
<!-- Glassy gradient shadow overlay -->
<div class="absolute bottom-0 left-0 right-0 h-16 bg-linear-to-t from-white/40 via-white/20 to-transparent backdrop-blur-[0.5px] pointer-events-none"></div>
</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 -->
@@ -58,21 +59,29 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
<time <time
class="text-sm text-gray-400" class="text-sm text-gray-400"
:datetime=" :datetime="
new Date( props.media.ReleaseDate === '' && props.media.FirstAirDate === ''
props.media.ReleaseDate === '' ? props.media.FirstAirDate : props.media.ReleaseDate, ? 'unknown'
).toISOString() : new Date(
props.media.ReleaseDate === ''
? props.media.FirstAirDate
: props.media.ReleaseDate,
).toISOString()
" "
> >
{{ {{
new Intl.DateTimeFormat('default', { props.media.ReleaseDate === '' && props.media.FirstAirDate === ''
year: 'numeric', ? 'unknown'
month: 'long', : new Intl.DateTimeFormat('default', {
day: 'numeric', year: 'numeric',
}).format( month: 'long',
new Date( day: 'numeric',
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>