mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat(home): update upcoming and latest skins display
- Updated the query in HomeController@index to filter upcoming skins based on release date. - Updated the query in HomeController@index to filter latest skins based on release date. - Added links to champion details page for each champion in list_all.blade.php. - Added links to skin details page for each skin in recent_skins.blade.php and upcoming_skins.blade.php.
This commit is contained in:
Rico van Zelst
@@ -5,39 +5,42 @@
|
||||
?>
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<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">
|
||||
Champions</h1>
|
||||
<div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
|
||||
<x-champions.lane-selector class="text-center"/>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 ">
|
||||
<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 ">
|
||||
|
||||
@foreach($champions as $key => $champion)
|
||||
<div
|
||||
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
|
||||
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 @foreach($roles[$key]->roles as $lane) POS-{{$lane}}@endforeach">
|
||||
<div
|
||||
class="mx-4 mt-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
|
||||
class="mx-4 mt-4 overflow-hidden border-2 h-52 rounded-2xl bg-clip-border border-orange-400/40">
|
||||
<a href="/champion/{{$champion->slug}}">
|
||||
<img @if($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=380&output=webp&q=65&il"
|
||||
class="object-cover w-full h-full"
|
||||
alt="{{ $champion->name }} Splash Art"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="block text-base antialiased font-medium text-gray-100">
|
||||
<a href="/champion/{{$champion->slug}}">
|
||||
{{ $champion->name }}
|
||||
</a>
|
||||
</p>
|
||||
<span class="text-xs text-stone-300">{{ $champion->title }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mt-2">
|
||||
<p class="text-gray-300 text-sm flex">
|
||||
<p class="flex text-sm text-gray-300">
|
||||
@foreach($roles[$key]->roles as $lane)
|
||||
<span class="sr-only">{{$lane}}</span>
|
||||
|
||||
@@ -46,12 +49,12 @@
|
||||
@if($key < 8) loading="auto" @else loading="lazy"
|
||||
@endif src="{{getRoleIcon($lane)}}"
|
||||
alt="{{$lane}} Icon"
|
||||
class="w-7 h-7 mr-1">
|
||||
class="mr-1 w-7 h-7">
|
||||
</p>
|
||||
@endforeach
|
||||
|
||||
<div class="w-full flex justify-end items-end justify-items-end ">
|
||||
<p class="text-right text-2xl md:text-lg text-orange-300 hover:text-orange-400">
|
||||
<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...]">
|
||||
<x-iconsax-bul-arrow-right class="w-8 transition-colors"/>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@php use Carbon\Carbon; @endphp
|
||||
<?php
|
||||
/** @var App\Models\ChampionSkin $skin */ ?>
|
||||
/** @var App\Models\ChampionSkin $skin */
|
||||
?>
|
||||
|
||||
<section class="text-white bg-stone-900">
|
||||
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
|
||||
@@ -18,14 +19,18 @@
|
||||
@foreach ($latestSkins as $skin)
|
||||
@if ($loop->index < 6)
|
||||
<div
|
||||
class="p-8 transition bg-stone-800/40 border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
class="p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
|
||||
alt="{{ $skin->skin_name }} Splash Art">
|
||||
<a href="{{ route('skins.show', $skin->slug) }}">
|
||||
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
|
||||
alt="{{ $skin->skin_name }} Splash Art">
|
||||
</a>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2>
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a
|
||||
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a>
|
||||
</h2>
|
||||
<h3 class=" text-stone-200">Released
|
||||
{{ Carbon::parse($skin->release_date)->diffForHumans([
|
||||
'parts' => 2,
|
||||
@@ -33,28 +38,28 @@
|
||||
]) }}
|
||||
</h3>
|
||||
|
||||
@foreach($skin->associated_skinline as $skinline)
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
<span
|
||||
class="my-2 bg-orange-100 text-orange-800 text-xs font-medium
|
||||
mr-2 px-2.5 py-0.5 rounded
|
||||
border border-orange-300
|
||||
">
|
||||
{{$skinline}}</span>
|
||||
{{ $skinline }}</span>
|
||||
@endforeach
|
||||
|
||||
<p class="flex text-sm text-stone-300">
|
||||
@if ($skin->rp_price == '99999')
|
||||
Not Available for RP
|
||||
@else
|
||||
<x-icon-RiotPoints class="text-yellow-400 w-4 mr-1"/>
|
||||
<x-icon-RiotPoints class="w-4 mr-1 text-yellow-400" />
|
||||
{{ $skin->rp_price }} RP
|
||||
@endif
|
||||
</p>
|
||||
|
||||
@if ($skin->loot_eligible)
|
||||
<p class="flex mt-1 text-sm italic text-stone-300 items-center">
|
||||
<x-icon-loot class="text-yellow-200 w-4 mr-1"/>
|
||||
<p class="flex items-center mt-1 text-sm italic text-stone-300">
|
||||
<x-icon-loot class="w-4 mr-1 text-yellow-200" />
|
||||
Can be obtained from loot
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
@php use Carbon\Carbon; @endphp
|
||||
<?php
|
||||
/** @var App\Models\ChampionSkin $skin */ ?>
|
||||
/** @var App\Models\ChampionSkin $skin */
|
||||
?>
|
||||
|
||||
<section class="text-white bg-stone-900">
|
||||
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-12 sm:px-6 lg:py-16 lg:px-8">
|
||||
@@ -11,31 +12,37 @@
|
||||
|
||||
<p class="mt-4 text-stone-300">
|
||||
Check out upcoming skins in League of Legends. <br>
|
||||
<span class="text-sm text-stone-400">Data is sourced from the <a class="underline decoration-1 decoration-orange-400/50 hover:decoration-orange-400 transition-all duration-700" href="https://leagueoflegends.fandom.com/wiki/League_of_Legends_Wiki" target="_blank">LoL Wiki</a>, ran by volunteers.</span><br>
|
||||
<span class="text-sm text-stone-400">Data is sourced from the <a
|
||||
class="underline transition-all duration-700 decoration-1 decoration-orange-400/50 hover:decoration-orange-400"
|
||||
href="https://leagueoflegends.fandom.com/wiki/League_of_Legends_Wiki" target="_blank">LoL
|
||||
Wiki</a>, ran by volunteers.</span><br>
|
||||
<span class="text-sm text-stone-400">We cannot guarantee its real-time accuracy.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 mt-8 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
|
||||
@foreach ($upcomingSkins as $skin)
|
||||
<div
|
||||
class="p-8 bg-stone-800/40 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
class="p-8 transition border shadow-xl bg-stone-800/40 border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
|
||||
alt="{{ $skin->skin_name }} Splash Art">
|
||||
<a href="{{ route('skins.show', $skin->slug) }}">
|
||||
<img loading="lazy" class="border-2 border-orange-400/40 rounded-xl"
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=720&output=jpg&q=90&il"
|
||||
alt="{{ $skin->skin_name }} Splash Art">
|
||||
</a>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2>
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a
|
||||
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2>
|
||||
|
||||
<div class="my-1 ">
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
@foreach($skin->associated_skinline as $skinline)
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span
|
||||
class="bg-orange-100 text-orange-800 text-xs font-medium
|
||||
@if(!$loop->last) mr-2 @endif px-2.5 rounded
|
||||
@if (!$loop->last) mr-2 @endif px-2.5 rounded
|
||||
border border-orange-300
|
||||
">
|
||||
{{$skinline}}</span>
|
||||
{{ $skinline }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@@ -43,14 +50,14 @@
|
||||
@if ($skin->rp_price == '99999')
|
||||
Not Available for RP
|
||||
@else
|
||||
<x-icon-RiotPoints class="text-yellow-400 w-4 mr-1"/>
|
||||
<x-icon-RiotPoints class="w-4 mr-1 text-yellow-400" />
|
||||
{{ $skin->rp_price }} RP
|
||||
@endif
|
||||
</p>
|
||||
|
||||
@if ($skin->loot_eligible)
|
||||
<p class="flex mt-1 text-sm italic text-stone-300 items-center">
|
||||
<x-icon-loot class="text-yellow-200 w-4 mr-1"/>
|
||||
<p class="flex items-center mt-1 text-sm italic text-stone-300">
|
||||
<x-icon-loot class="w-4 mr-1 text-yellow-200" />
|
||||
Can be obtained from loot
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@@ -1,61 +1,61 @@
|
||||
<?php
|
||||
/** @var App\Models\ChampionSkin $skin */ ?>
|
||||
/** @var App\Models\ChampionSkin $skin */
|
||||
?>
|
||||
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<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 Skins</h1>
|
||||
<x-skins.searchbar/>
|
||||
<x-skins.searchbar />
|
||||
|
||||
<div class="flex justify-center items-center mx-auto max-w-screen-xl mt-2.5">
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 ">
|
||||
<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 ">
|
||||
|
||||
@foreach($skins as $key => $skin)
|
||||
@foreach ($skins as $key => $skin)
|
||||
<div
|
||||
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
|
||||
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
class="flex flex-col text-gray-700 border shadow-md champ-card bg-stone-800/40 rounded-2xl bg-clip-border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10">
|
||||
|
||||
@if($skin->associated_skinline != null)
|
||||
<div class="px-2 flex justify-center">
|
||||
@foreach($skin->associated_skinline as $skinline)
|
||||
@if ($skin->associated_skinline != null)
|
||||
<div class="flex justify-center px-2">
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
<span
|
||||
class="m-2 bg-orange-100 text-orange-800 text-xs font-medium
|
||||
mr-2 px-2.5 py-0.5 rounded
|
||||
border border-orange-300
|
||||
">
|
||||
{{$skinline}}</span>
|
||||
{{ $skinline }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
<div
|
||||
class="mx-4 overflow-hidden h-52 rounded-2xl bg-clip-border border-2 border-orange-400/40">
|
||||
<img @if($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=540&output=webp&q=70&il"
|
||||
class="object-cover w-full h-full"
|
||||
alt="{{ $skin->skin_name }} Splash Art"
|
||||
/>
|
||||
<div class="mx-4 overflow-hidden border-2 h-52 rounded-2xl bg-clip-border border-orange-400/40">
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<img @if ($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=540&output=webp&q=70&il"
|
||||
class="object-cover w-full h-full" alt="{{ $skin->skin_name }} Splash Art" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="block text-base antialiased font-medium text-gray-100">
|
||||
{{ $skin->skin_name }}
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
{{ $skin->skin_name }}
|
||||
</a>
|
||||
</p>
|
||||
<span class="text-xs font-bold {{ $rarityColor[$skin->rarity] }}">{{$skin->rarity}}</span>
|
||||
<span
|
||||
class="text-xs font-bold {{ $rarityColor[$skin->rarity] }}">{{ $skin->rarity }}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-2 px-4 flex justify-center items-end text-white text-2xl md:text-lg mt-auto">
|
||||
<p class="font-medium text-sm hover:text-orange-400 "><a
|
||||
href="/skin/{{$skin->slug}}">More details
|
||||
<x-iconsax-bul-arrow-circle-right class="inline-block w-6"/>
|
||||
<div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
|
||||
<p class="text-sm font-medium hover:text-orange-400 "><a href="/skin/{{ $skin->slug }}">More
|
||||
details
|
||||
<x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user