mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 10:10:48 +01:00
feat: icon list + search functionality
This commit is contained in:
Rico van Zelst
@@ -6,14 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>Heimerdinger.LoL • Champions</title>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>{{$champion->name}} • Heimerdinger.LoL</title>
|
||||
|
||||
50
resources/views/components/icons/list_all.blade.php
Normal file
50
resources/views/components/icons/list_all.blade.php
Normal file
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
/** @var App\Models\SummonerIcon $icon */ ?>
|
||||
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<h2
|
||||
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">
|
||||
Summoner Icons</h2>
|
||||
|
||||
<x-icons.searchbar/>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-12">
|
||||
|
||||
@foreach($icons as $key => $icon)
|
||||
<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 items-center">
|
||||
<div
|
||||
class="mx-4 overflow-hidden h-24 w-24 rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3">
|
||||
<img @if($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
|
||||
class="object-cover w-full h-full "
|
||||
alt="{{ $icon->title }} Icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="block text-sm antialiased font-medium text-gray-100 text-center">
|
||||
{{ $icon->title }}
|
||||
</p>
|
||||
|
||||
</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="/icon/{{$icon->slug}}">More details
|
||||
<x-iconsax-bul-arrow-circle-right class="inline-block w-6"/>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
{{ $icons->links() }}
|
||||
</section>
|
||||
25
resources/views/components/icons/searchbar.blade.php
Normal file
25
resources/views/components/icons/searchbar.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
<div class="flex items-center justify-center mt-8 ">
|
||||
<form action="{{ route('icons.index') }}" method="GET" class="flex" id="searchForm">
|
||||
<div class="relative">
|
||||
<input type="text" name="filter[title]" placeholder="Search by icon title"
|
||||
value="{{ request('filter.title') }}"
|
||||
class="border border-transparent focus:border-transparent focus:ring-0 border-stone-700 rounded-l px-4 py-2 bg-stone-800 text-white ring-orange-500 pr-10">
|
||||
@if(request('filter.title'))
|
||||
<button type="button" onclick="clearSearchAndSubmit()"
|
||||
class="absolute inset-y-0 right-0 flex items-center px-3 bg-stone-800 text-white cursor-pointer">
|
||||
<x-iconsax-lin-clipboard-close class="w-6 text-white"/>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-4 py-2 rounded-r focus:outline-none ring-orange-500">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
function clearSearchAndSubmit() {
|
||||
document.querySelector('input[name="filter[title]"]').value = '';
|
||||
document.getElementById('searchForm').submit();
|
||||
}
|
||||
</script>
|
||||
@@ -14,7 +14,8 @@
|
||||
<span class="flex items-center justify-center">
|
||||
View
|
||||
champion
|
||||
info <x-iconsax-bul-arrow-square-right class="w-5"/>
|
||||
info
|
||||
<x-iconsax-bul-arrow-square-right class="w-5"/>
|
||||
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>Heimerdinger.LoL • Home</title>
|
||||
@@ -40,7 +40,7 @@
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
|
||||
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
|
||||
|
||||
54
resources/views/icons/index.blade.php
Normal file
54
resources/views/icons/index.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>Heimerdinger.LoL • Icons</title>
|
||||
<meta name="description"
|
||||
content="Explore all LoL icons on Heimerdinger.LoL. Find detailed information on popular summoner icons such as Debonair Rose, Omen of the Cursed Revenant, Lil' Sprout, Dominion Retirement and more!">
|
||||
|
||||
<!-- OpenGraph -->
|
||||
<meta property="og:site_name" content="Heimerdinger.LoL">
|
||||
<meta property="og:title" content="Heimerdinger.LoL • Icons">
|
||||
<meta property="og:description"
|
||||
content="Explore all LoL icons on Heimerdinger.LoL. Find detailed information on popular summoner icons such as Debonair Rose, Omen of the Cursed Revenant, Lil' Sprout, Dominion Retirement and more!">
|
||||
<meta property="og:locale" content="en">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="{{asset('img/og_image.png')}}">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:domain" content="heimerdinger.lol">
|
||||
<meta property="twitter:title" content="Heimerdinger.LoL • Icons">
|
||||
<meta property="twitter:description"
|
||||
content="Explore all LoL icons on Heimerdinger.LoL. Find detailed information on popular summoner icons such as Debonair Rose, Omen of the Cursed Revenant, Lil' Sprout, Dominion Retirement and more!">
|
||||
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
|
||||
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
|
||||
<body class="antialiased bg-stone-900 dark scroll-smooth">
|
||||
<x-navbar/>
|
||||
<x-icons.list_all :icons="$icons"/>
|
||||
<x-footer/>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -6,14 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>Heimerdinger.LoL • Skins</title>
|
||||
|
||||
@@ -6,14 +6,14 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/icons/favicon.ico">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/img/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
|
||||
<link rel="shortcut icon" href="/img/icons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ff7c47">
|
||||
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
||||
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ff7c47">
|
||||
|
||||
<title>{{$skin->skin_name}} • Heimerdinger.LoL</title>
|
||||
|
||||
Reference in New Issue
Block a user