Skip to content

Commit c6d9050

Browse files
Villagers654Villagers654
committed
Try to fit the image sizes better
1 parent 581e0f5 commit c6d9050

1 file changed

Lines changed: 28 additions & 14 deletions

File tree

‎frontend/src/components/ads/AdUnit.tsx‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,22 +60,35 @@ export const AdUnit: React.FC<AdUnitProps> = ({ className, variant }) => {
6060
if (variant === 'sticky-banner') {
6161
if (!ad || !ad.imageUrl) return null;
6262
return (
63-
<div className={`fixed bottom-4 left-4 right-4 z-50 flex justify-center pointer-events-none animate-in slide-in-from-bottom-10 duration-700 ${className}`}>
64-
<div className="relative pointer-events-auto bg-white dark:bg-slate-900 rounded-xl shadow-2xl border border-slate-200 dark:border-white/10 p-1 max-w-4xl w-full">
63+
<div className={`fixed bottom-6 left-0 right-0 z-50 flex justify-center pointer-events-none animate-in slide-in-from-bottom-10 duration-700 px-4 ${className}`}>
64+
<div className="relative pointer-events-auto shadow-2xl rounded-xl group transition-transform hover:-translate-y-1">
6565
<button
6666
onClick={() => setIsDismissed(true)}
67-
className="absolute -top-3 -right-3 p-1.5 bg-white dark:bg-slate-800 text-slate-500 hover:text-red-500 rounded-full shadow-md border border-slate-200 dark:border-white/10 transition-colors z-20"
67+
className="absolute -top-2 -right-2 p-1 bg-white dark:bg-slate-800 text-slate-400 hover:text-white hover:bg-red-500 rounded-full shadow-md border border-slate-200 dark:border-white/10 transition-all z-20 opacity-0 group-hover:opacity-100"
68+
title="Dismiss"
6869
>
69-
<X className="w-4 h-4" />
70+
<X className="w-3 h-3" />
7071
</button>
71-
<a href={ad.linkUrl} target="_blank" rel="nofollow noreferrer" onClick={handleClick} className="block relative rounded-lg overflow-hidden group">
72-
<img src={ad.imageUrl} alt={ad.title} className="w-full h-20 md:h-24 object-cover" />
73-
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 backdrop-blur rounded text-[10px] font-bold text-white/90 uppercase tracking-wider">Ad</div>
74-
<div className="absolute inset-0 flex items-end p-4 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
75-
<span className="text-white font-bold text-sm flex items-center gap-2">
76-
Visit {ad.title} <ExternalLink className="w-3 h-3" />
72+
73+
<a href={ad.linkUrl} target="_blank" rel="nofollow noreferrer" onClick={handleClick} className="block relative rounded-xl overflow-hidden">
74+
{/* Auto width, constrained height to prevent blocking view */}
75+
<img
76+
src={ad.imageUrl}
77+
alt={ad.title}
78+
className="h-auto max-h-[100px] w-auto max-w-full object-contain bg-slate-900"
79+
/>
80+
81+
{/* Minimal Hover Overlay */}
82+
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center backdrop-blur-[2px]">
83+
<span className="text-white font-bold text-sm flex items-center gap-2 px-4 py-2 bg-white/10 rounded-full border border-white/20">
84+
Visit Site <ExternalLink className="w-3 h-3" />
7785
</span>
7886
</div>
87+
88+
{/* Tiny Badge */}
89+
<div className="absolute bottom-1 right-1 px-1 py-0.5 bg-black/40 rounded text-[8px] font-bold text-white/50 uppercase">
90+
Ad
91+
</div>
7992
</a>
8093
</div>
8194
</div>
@@ -95,8 +108,9 @@ export const AdUnit: React.FC<AdUnitProps> = ({ className, variant }) => {
95108
if (variant === 'banner') {
96109
return (
97110
<a href={ad.linkUrl} target="_blank" rel="nofollow noreferrer" onClick={handleClick} className={`block w-full rounded-xl overflow-hidden group relative ${className}`}>
98-
<img src={ad.imageUrl} alt={ad.title} className="w-full h-auto object-cover max-h-[150px]" />
99-
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 backdrop-blur rounded text-[10px] font-bold text-white/90 uppercase tracking-wider shadow-sm">Ad</div>
111+
{/* Removed max-h to allow image to dictate height fully */}
112+
<img src={ad.imageUrl} alt={ad.title} className="w-full h-auto object-contain bg-slate-950/20" />
113+
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 backdrop-blur rounded text-[10px] font-bold text-white/80 uppercase">Ad</div>
100114
</a>
101115
);
102116
}
@@ -123,8 +137,8 @@ export const AdUnit: React.FC<AdUnitProps> = ({ className, variant }) => {
123137
return (
124138
<a href={ad.linkUrl} target="_blank" rel="nofollow noreferrer" onClick={handleClick} className={`block rounded-xl overflow-hidden group relative border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 hover:shadow-md transition-all ${className}`}>
125139
<div className="relative w-full">
126-
<img src={ad.imageUrl} alt={ad.title} className="w-full h-auto object-cover block" />
127-
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 backdrop-blur rounded text-[10px] font-bold text-white/90 uppercase tracking-wider">Ad</div>
140+
<img src={ad.imageUrl} alt={ad.title} className="w-full h-auto object-contain block" />
141+
<div className="absolute top-2 right-2 px-1.5 py-0.5 bg-black/60 backdrop-blur rounded text-[10px] font-bold text-white/80 uppercase">Ad</div>
128142
</div>
129143
<div className="p-3 border-t border-slate-100 dark:border-white/5 flex justify-between items-center">
130144
<h4 className="text-sm font-bold text-slate-900 dark:text-white group-hover:text-modtale-accent truncate max-w-[80%]">{ad.title}</h4>

0 commit comments

Comments
 (0)