From eae85fa7b002cca6accc867c66ed25a601b97da4 Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Thu, 9 Nov 2023 19:44:29 +0100
Subject: [PATCH] feat: backup text if no lore

---
 .../views/components/home/features.blade.php  | 12 +++----
 .../components/home/recent_skins.blade.php    |  4 +--
 .../components/home/upcoming_skins.blade.php  |  2 +-
 .../components/skins/grid_info.blade.php      | 32 ++++++++++++++-----
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/resources/views/components/home/features.blade.php b/resources/views/components/home/features.blade.php
index 4d2c14e..12f9b5d 100644
--- a/resources/views/components/home/features.blade.php
+++ b/resources/views/components/home/features.blade.php
@@ -12,7 +12,7 @@
         </div>
 
         <div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3">
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="/champions">
 
                 <x-iconsax-bul-personalcard class="h-10 text-orange-400"/>
@@ -25,7 +25,7 @@
                 </p>
             </a>
 
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="/skins">
                 <x-iconsax-bul-paintbucket class="h-10 text-orange-400"/>
 
@@ -37,7 +37,7 @@
                 </p>
             </a>
 
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="#">
                 <x-iconsax-bul-3d-cube-scan class="h-10 text-orange-400"/>
 
@@ -49,7 +49,7 @@
                 </p>
             </a>
 
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="#">
                 <x-iconsax-bul-money-change class="h-10 text-orange-400"/>
 
@@ -61,7 +61,7 @@
                 </p>
             </a>
 
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="#">
                 <x-iconsax-bul-receipt-edit class="h-10 text-orange-400"/>
 
@@ -73,7 +73,7 @@
                 </p>
             </a>
 
-            <a class="block p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10"
+            <a class="block 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"
                href="#">
                 <x-iconsax-bul-message-question class="h-10 text-orange-400"/>
 
diff --git a/resources/views/components/home/recent_skins.blade.php b/resources/views/components/home/recent_skins.blade.php
index a01986e..72fd375 100644
--- a/resources/views/components/home/recent_skins.blade.php
+++ b/resources/views/components/home/recent_skins.blade.php
@@ -16,9 +16,9 @@
         </div>
         <div class="grid grid-cols-1 gap-4 mt-8 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
             @foreach ($latestSkins as $skin)
-                @if ($loop->index < 9)
+                @if ($loop->index < 6)
                     <div
-                        class="p-8 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
+                        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">
                         <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"
diff --git a/resources/views/components/home/upcoming_skins.blade.php b/resources/views/components/home/upcoming_skins.blade.php
index 745c664..2b91bb7 100644
--- a/resources/views/components/home/upcoming_skins.blade.php
+++ b/resources/views/components/home/upcoming_skins.blade.php
@@ -17,7 +17,7 @@
         <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 transition border shadow-xl border-stone-800 rounded-xl hover:border-orange-500/10 hover:shadow-orange-500/10">
+                    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">
                     <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"
diff --git a/resources/views/components/skins/grid_info.blade.php b/resources/views/components/skins/grid_info.blade.php
index dbea68c..4f9255a 100644
--- a/resources/views/components/skins/grid_info.blade.php
+++ b/resources/views/components/skins/grid_info.blade.php
@@ -13,16 +13,21 @@
     <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: {{$skin->splash_color}}"></div>
-                <img
-                    src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=880&output=webp&q=85&il"
-                    alt="{{$skin->skin_name}} Splash Art"
-                    class="w-full h-full object-cover transform scale-100 transition-transform duration-700 z-10 rounded-2xl"
-                >
+                <img src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=840&output=webp&q=70"
+                     alt="{{$skin->skin_name}} Splash Art"
+                     class="w-full h-full object-cover transform scale-100 transition-transform duration-700 z-10 rounded-2xl">
+
+                <div class="absolute bottom-0 left-0 p-4">
+                    <a href="{{ $skin->getSkinImageAttribute() }}" target="_blank"
+                       class="text-white text-base font-bold bg-black bg-opacity-50 p-2 rounded-xl">View in
+                        HD</a>
+                </div>
             </div>
 
+
             <div
                 class="rounded-2xl border border-3 border-white/10
                   lg:col-start-3 shadow-md transition-all duration-700"
@@ -31,7 +36,7 @@
                 <h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
                     {{$skin->skin_name}} Details</h4>
 
-                <ul class="ml-7 ">
+                <ul class="mx-5">
                     <li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center mt-4"
                         lang="en">
                         <span class="font-bold">RP Cost:</span>
@@ -126,7 +131,13 @@
                     <h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
                         {{$skin->name}} Lore</h4>
                     <p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
-                        {{$skin->lore}}
+                        @if($skin->lore)
+                            {{$skin->lore}}
+                        @else
+                            Heimerdinger has looked far and wide but could not find any lore for {{$skin->skin_name}}.
+                            But we're sure it's a great skin! The things we do know is that it was released on
+                            {{$skin->release_date}} and costs {{$skin->rp_price}} RP.
+                        @endif
                     </p>
                 </div>
 
@@ -140,6 +151,11 @@
                         {{$skin->name}} Chromas ({{count($skin->chromas)}}) </h4>
                     <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">
+                            @if(count($skin->chromas) < 1)
+                                <p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
+                                    Sadly there are no chromas for {{$skin->skin_name}} yet.
+                                </p>
+                            @endif
                             @foreach($skin->chromas as $key => $chroma)
                                 <div class="group flex flex-col ">
                                     <a href="/skin/{{$skin->slug}}">