Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 18:20:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: vert scroll bug

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/champions/show.blade.php
View File

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

24
resources/views/components/champions/grid_info.blade.php
View File

@@ -115,14 +115,24 @@
<div id="skinsElement" class="overflow-x-scroll mt-2.5"> <div id="skinsElement" class="overflow-x-scroll mt-2.5">
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5"> <div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
@foreach($champion->skins as $key => $skin) @foreach($champion->skins as $key => $skin)
<div class="flex flex-col"> <div class="flex flex-col ">
<img <a href="/skin/{{$skin->slug}}">
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70" <img
alt="{{$champion->name}} {{$skin->name}} Splash Art" src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70"
@if($key < 6) loading="eager" @else loading="lazy" @endif alt="{{$champion->name}} {{$skin->name}} Splash Art"
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 @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"> 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> </div>
@endforeach @endforeach
</div> </div>