STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions 2 Packages Projects Releases 3 Wiki Activity

updated search and added past workshop page

Browse Source
This commit is contained in:
James Collins
2024-09-27 13:33:50 +10:00
parent 5cbebd8840
commit b20c79b679
9 changed files with 139 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/views/components/mast.blade.php
View File

@@ -1,5 +1,8 @@
<x-container class="bg-primary-color-light text-white py-10">
<h1 class="font-bold text-4xl">{{ $title ?? $slot }}</h1>
@if(isset($description))
<div class="text-lg">{{ $description }}</div>
@endif
@if(isset($backRoute) && isset($backTitle))
<a href="{{ route($backRoute) }}" class="text-lg hover:text-gray-300"><i class="fa-solid fa-angle-left mr-3"></i>{{ $backTitle }}</a>
@endif

23
resources/views/components/navbar.blade.php
View File

@@ -1,4 +1,11 @@
<nav class="shadow bg-white">
<nav class="shadow bg-white" x-data="{showSearch:false}" x-init="
document.addEventListener('keydown', (event) => {
if ((event.metaKey || event.ctrlKey) && event.key === 'f') {
event.preventDefault();
$data.showSearch = true;
}
})
">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8 relative" x-data="{open:false}">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
@@ -21,6 +28,11 @@
<div class="flex space-x-2">
<a href="{{ route('post.index') }}" class="text-gray-900 hover:text-sky-500 px-3 py-2 text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5" aria-current="page">Blog</a>
<a href="{{ route('workshop.index') }}" class="text-gray-900 hover:text-sky-500 px-3 py-2 text-sm font-medium transition duration-300 ease-in-out transform hover:-translate-y-0.5">Workshops</a>
<button type="button" class="text-gray-900 hover:text-sky-500 text-sm font-medium transition duration-300 ease-in-out" @click.prevent="showSearch=true">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>
<div class="ml-3">
@@ -57,4 +69,13 @@
@endif
</div>
</div>
<div class="fixed inset-0 z-10 flex items-center justify-center" x-cloak x-show="showSearch" x-on:click="showSearch=false" x-on:keydown.escape.window="showSearch=false" x-init="$watch('showSearch', value => { if(value) { $nextTick(() => document.getElementsByName('q')[0].focus()) } })">
<div class="absolute inset-0 backdrop-blur-sm bg-opacity-40 bg-black"></div>
<div class="relative w-full mx-8 max-w-2xl bg-gray-50 p-2 rounded-lg shadow-lg" x-on:click.stop>
<form action="{{ route('search.index') }}" method="GET">
<x-ui.search type="text" name="q" label="Search..." />
</form>
</div>
</div>
</nav>

2
resources/views/components/ui/search.blade.php
View File

@@ -5,7 +5,7 @@
@endphp
<form method="GET" action="{{ url()->current() }}" class="{{ $attributes->get('class') }}">
<div class="flex relative" x-data="{search:'{{request()->get('search')}}'}">
<div class="flex relative" x-data="{search:'{{request()->get('q')}}'}">
<input class="{{ $classes }}" autocomplete="off" placeholder="{{ $label }}" x-model="search" type="{{ $type }}" name="{{ $name }}" />
<x-ui.button type="submit" class="rounded-l-none px-6"><i class="fa-solid fa-magnifying-glass"></i></x-ui.button>
<i x-show="search" cloak class="absolute z-10 top-1/2 right-[4.5rem] transform -translate-y-1/2 text-gray-300 hover:text-gray-400 cursor-pointer fa-solid fa-circle-xmark" x-data x-on:click="search='';$nextTick(()=>{if('{{request()->get('search')}}'!==''){$el.closest('form').submit();}})"></i>