fix: vert scroll bug

This commit is contained in:
Rico van Zelst
2023-11-09 09:08:00 +01:00
parent 850564c096
commit 225cab967d
2 changed files with 18 additions and 8 deletions

View File

@@ -42,12 +42,12 @@
@vite('resources/css/app.css')
@vite('resources/js/app.js')
@vite('resources/js/vert-scroll.js')
</head>
<body class="antialiased bg-stone-900 dark scroll-smooth">
<x-navbar/>
<x-champions.grid_info :champion="$champion"/>
@vite('resources/js/vert-scroll.js')
</body>
</html>

View File

@@ -116,13 +116,23 @@
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
@foreach($champion->skins as $key => $skin)
<div class="flex flex-col ">
<a href="/skin/{{$skin->slug}}">
<img
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70"
alt="{{$champion->name}} {{$skin->name}} Splash Art"
@if($key < 6) loading="eager" @else loading="lazy" @endif
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
<p class="text-center text-neutral-100 text-sm mt-1.5">{{$skin->skin_name}}</p>
</a>
<div>
<p class="align-bottom text-center text-neutral-100 text-sm mt-1.5 items-center">
<a href="/skin/{{$skin->slug}}" class="hover:text-orange-400">
{{$skin->skin_name}}
<x-iconsax-bul-arrow-right class="inline-block w-5"/>
</a>
</p>
</div>
</div>
@endforeach
</div>