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

Improve image loading animation and aspect ratio

Browse Source
This commit is contained in:
mahdium
2025-11-03 22:14:21 +03:30
parent d7283b4d10
commit 184b0f66da
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ImageWithFallback.vue
+2 -1
View File
@@ -23,7 +23,7 @@ const imageSource = computed(() => {
</script> </script>
<template> <template>
<figure class="overflow-hidden flex items-center justify-center bg-gray-50"> <figure class="overflow-hidden flex items-center justify-center bg-gray-50 aspect-2/3">
<span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span> <span v-if="!loaded" class="loading loading-ring loading-lg text-primary"></span>
<div v-else-if="imageLoadFailed" class="flex items-center justify-center"> <div v-else-if="imageLoadFailed" class="flex items-center justify-center">
@@ -44,6 +44,7 @@ const imageSource = computed(() => {
</div> </div>
<img <img
v-motion-fade-visible-once
v-show="loaded && !imageLoadFailed" v-show="loaded && !imageLoadFailed"
:src="imageSource" :src="imageSource"
:alt="props.alt" :alt="props.alt"
src/components/MediaCard.vue
+3 -1
View File
@@ -36,7 +36,9 @@ const alreadyAdded = computed(() => store.mediaList.some((media) => media.Id ===
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 --> <!-- 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> <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 -->