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

feat(home): update upcoming and latest skins display

Browse Source 
- 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
2024-02-16 01:41:06 +01:00
parent 17ccf554f1
commit a48ea6e42f
5 changed files with 78 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/views/components/home/upcoming_skins.blade.php
View File

@@ -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