Skip to content

Commit e4f76a5

Browse files
đź’„ Update early adopter card image positioning and loading placeholder styles
1 parent b0c2568 commit e4f76a5

File tree

2 files changed

+25
-17
lines changed

2 files changed

+25
-17
lines changed

‎resources/views/components/wall-of-love/early-adopter-card.blade.php‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,10 @@ class="group mt-3 inline-block break-inside-avoid overflow-hidden rounded-2xl te
1111
itemscope
1212
>
1313
<figure class="grid">
14-
{{-- Image --}}
15-
<img
16-
src="{{ $image }}"
17-
alt="{{ $title ? $name . ', ' . $title : $name }}"
18-
loading="lazy"
19-
decoding="async"
20-
itemprop="image"
21-
@class([
22-
'self-center justify-self-center object-cover brightness-80 transition duration-300 [grid-area:1/-1] group-hover:brightness-100',
23-
'aspect-[1/1.3] xl:aspect-[1/1.5]' => $featured,
24-
'aspect-square max-h-50 grayscale group-hover:grayscale-0 xl:max-h-none' => ! $featured,
25-
])
26-
/>
27-
2814
{{-- Name & Title --}}
2915
<figcaption
3016
@class([
31-
'relative z-0 w-full self-end justify-self-start truncate bg-gradient-to-t px-4 pt-13 pb-4 text-white [grid-area:1/-1]',
17+
'relative z-20 w-full self-end justify-self-start truncate bg-gradient-to-t px-4 pt-13 pb-4 text-white [grid-area:1/-1]',
3218
'from-blue-500 to-transparent' => $featured,
3319
'from-black to-transparent' => ! $featured,
3420
])
@@ -57,6 +43,28 @@ class="capitalize transition duration-300 ease-out will-change-transform group-h
5743
</div>
5844
</figcaption>
5945

46+
{{-- Image --}}
47+
<img
48+
src="{{ $image }}"
49+
alt="{{ $title ? $name . ', ' . $title : $name }}"
50+
height="187"
51+
width="187"
52+
loading="lazy"
53+
decoding="async"
54+
itemprop="image"
55+
@class([
56+
'relative z-10 self-center justify-self-center object-cover brightness-80 transition duration-300 [grid-area:1/-1] group-hover:brightness-100',
57+
'aspect-[1/1.3] xl:aspect-[1/1.5]' => $featured,
58+
'aspect-square max-h-50 grayscale group-hover:grayscale-0 xl:max-h-none' => ! $featured,
59+
])
60+
/>
61+
62+
{{-- Loading placeholder --}}
63+
<div
64+
class="relative z-0 size-full animate-pulse self-center justify-self-center bg-gray-300 [grid-area:1/-1] dark:bg-slate-900"
65+
aria-hidden="true"
66+
></div>
67+
6068
{{-- External link --}}
6169
@if ($url)
6270
<a
@@ -66,7 +74,7 @@ class="capitalize transition duration-300 ease-out will-change-transform group-h
6674
title="Visit {{ $name }}’s website"
6775
aria-label="Visit {{ $name }}’s website"
6876
itemprop="url"
69-
class="group/link mt-3 mr-3 flex items-center gap-2 self-start justify-self-end rounded-xl bg-white/70 px-3 py-1.5 opacity-0 backdrop-blur-sm transition duration-300 [grid-area:1/-1] group-hover:opacity-100 hover:bg-white/100 dark:bg-black/70 dark:hover:bg-black/100"
77+
class="group/link relative z-30 mt-3 mr-3 flex items-center gap-2 self-start justify-self-end rounded-xl bg-white/70 px-3 py-1.5 opacity-0 backdrop-blur-sm transition duration-300 [grid-area:1/-1] group-hover:opacity-100 hover:bg-white/100 dark:bg-black/70 dark:hover:bg-black/100"
7078
>
7179
<span class="text-sm">Visit</span>
7280
<x-icons.right-arrow

‎resources/views/wall-of-love.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ class="mx-auto mt-5 max-w-2xl text-center text-base/relaxed text-gray-600 sm:tex
204204
})
205205
}
206206
"
207-
class="relative z-10 mt-10 grid place-items-center 2xs:block 2xs:columns-[10rem] xl:columns-[13rem]"
207+
class="relative z-10 mt-10 grid place-items-center 2xs:block 2xs:columns-[10rem] xl:columns-[12rem]"
208208
>
209209
@foreach ($earlyAdopters as $adopter)
210210
<x-wall-of-love.early-adopter-card

0 commit comments

Comments
 (0)