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

Sort Tailwind classes

Browse Source
This commit is contained in:
Shift
2024-03-18 17:55:31 +00:00
parent 5560ec3081
commit 2541825a1d
21 changed files with 60 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,19 @@
<section class="max-w-screen-xl mx-auto mt-12">
<p class="sr-only">Heimerdinger Presents:</p>
<h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
CHAMPION DETAILS</h3>
<h1
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
{{$champion->name}}</h1>
<h2
class="text-sm md:text-lg font-bold text-center text-transparent uppercase
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
class="text-sm md:text-lg font-bold text-center text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
{{$champion->title}}</h2>
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
<div class="w-screen grid grid-cols-1 md-grid-cols-2 lg:grid-cols-3 gap-5">
<div
class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2 ">
class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2">
<div class="aspect-w-16 aspect-h-9 glow-shadow absolute inset-0 rounded-2xl"
style="--splash-color: {{$champion->splash_color}}"></div>
<div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-2xl relative">
@@ -29,8 +26,7 @@
</div>
<div
class="rounded-2xl border border-3 border-white/10
lg:col-start-3 shadow-md transition-all duration-700"
class="rounded-2xl border border-3 border-white/10 lg:col-start-3 shadow-md transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm">
@@ -60,7 +56,7 @@
<span class="font-bold">Riot Points Cost:</span>
<x-icon-RiotPoints class="inline-block w-4"/> {{$champion->price_rp}} RP
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Roles:</span> @foreach($champion->roles as $role)
<span
class="inline-block lowercase capitalize-first">{{$role}}
@@ -69,32 +65,31 @@
@endif</span>
@endforeach
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Attack Type:</span> <span
class="inline-block lowercase capitalize-first">{{$champion->attack_type}}</span>
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Damage Type:</span> {{$champion->adaptive_type}}
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Resource Type:</span> {{$champion->resource_type}}
</li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
<span class="font-bold">Champion ID:</span> <span
class="font-mono font-medium">{{$champion->champion_id}}</span>
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Release Date:</span> {{$champion->release_date}}
</li>
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
<span class="font-bold">Release Patch:</span> Patch {{$champion->release_patch}}
</li>
</ul>
</div>
<div class="rounded-2xl border border-3 border-white/10 shadow-md
shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
<div class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
<div class="p-4">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
@@ -106,8 +101,7 @@
</div>
<div
class="rounded-2xl border border-3 border-white/10 shadow-md
shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
<div class="p-4">
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
@@ -115,14 +109,13 @@
<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">
@foreach($champion->skins as $key => $skin)
<div class="group flex flex-col ">
<div class="group flex flex-col">
<a href="/skin/{{$skin->slug}}">
<img
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70&il"
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">
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">
</a>
<div>

4
resources/views/components/champions/list_all.blade.php
View File

@@ -12,7 +12,7 @@
</div>
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 ">
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
@foreach($champions as $key => $champion)
<div
@@ -53,7 +53,7 @@
</p>
@endforeach
<div class="flex items-end justify-end w-full justify-items-end ">
<div class="flex items-end justify-end w-full justify-items-end">
<p class="text-2xl text-right text-orange-300 md:text-lg hover:text-orange-400">
<a href="/champion/{{$champion->slug}}"
aria-label="[Detailed {{$champion->name}} info...]">