lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

fix(app): only show gradient overlay on real images, not SVG fallbacks

Browse Source 
The from-black/60 gradient overlay was making SVG text fallbacks appear
completely black. Now the gradient only renders when there's an actual
image, letting the designed SVG fallbacks show through properly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-04 20:31:11 +00:00
co-authored by Claude Opus 4.6
parent 6a1ce2e185
commit 799ca131d9
7 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/content/BookGrid.vue
+1 -1
View File
@@ -66,7 +66,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(book)})` }" :style="{ backgroundImage: `url(${fallbackFor(book)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="coverSrc(book)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 leading-tight truncate"> <p class="text-xs font-semibold text-white/90 leading-tight truncate">
packages/app/src/components/content/FilmGrid.vue
+1 -1
View File
@@ -66,7 +66,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(film)})` }" :style="{ backgroundImage: `url(${fallbackFor(film)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="coverSrc(film)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 leading-tight truncate"> <p class="text-xs font-semibold text-white/90 leading-tight truncate">
packages/app/src/components/content/NewsGrid.vue
+1 -1
View File
@@ -52,7 +52,7 @@
class="absolute inset-0 bg-cover bg-center" class="absolute inset-0 bg-cover bg-center"
:style="{ backgroundImage: `url(${newsFallback(article)})` }" :style="{ backgroundImage: `url(${newsFallback(article)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" /> <div v-if="isSafeImgUrl(article.imgSrc) && !failedImgs.has(article.url)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent pointer-events-none" />
</div> </div>
<div <div
packages/app/src/components/content/PlaceGrid.vue
+1 -1
View File
@@ -59,7 +59,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(place)})` }" :style="{ backgroundImage: `url(${fallbackFor(place)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="place.photoUrl && !failedPhotos.has(place.id)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 truncate">{{ place.name }}</p> <p class="text-xs font-semibold text-white/90 truncate">{{ place.name }}</p>
<p class="text-xs text-white/40 truncate mt-0.5">{{ place.cuisine || place.category }}</p> <p class="text-xs text-white/40 truncate mt-0.5">{{ place.cuisine || place.category }}</p>
packages/app/src/components/content/PodcastGrid.vue
+1 -1
View File
@@ -66,7 +66,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(podcast)})` }" :style="{ backgroundImage: `url(${fallbackFor(podcast)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="coverSrc(podcast)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 leading-tight truncate"> <p class="text-xs font-semibold text-white/90 leading-tight truncate">
packages/app/src/components/content/SongGrid.vue
+1 -1
View File
@@ -77,7 +77,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(song)})` }" :style="{ backgroundImage: `url(${fallbackFor(song)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="coverSrc(song)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 leading-tight truncate"> <p class="text-xs font-semibold text-white/90 leading-tight truncate">
packages/app/src/components/content/TVSeriesGrid.vue
+1 -1
View File
@@ -66,7 +66,7 @@
class="w-full h-full bg-cover bg-center" class="w-full h-full bg-cover bg-center"
:style="{ backgroundImage: `url(${fallbackFor(s)})` }" :style="{ backgroundImage: `url(${fallbackFor(s)})` }"
/> />
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" /> <div v-if="coverSrc(s)" class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none" />
<div class="absolute bottom-0 left-0 right-0 p-2"> <div class="absolute bottom-0 left-0 right-0 p-2">
<p class="text-xs font-semibold text-white/90 leading-tight truncate"> <p class="text-xs font-semibold text-white/90 leading-tight truncate">