STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions 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>

8
resources/views/post/index.blade.php
View File

@@ -2,15 +2,9 @@
<x-slot name="title">Blog</x-slot>
<x-mast>Blog</x-mast>
<section class="bg-gray-100">
<x-container class="pt-4">
<form method="GET" action="{{ request()->url() }}">
<x-ui.search name="search" label="Search" value="{{ request()->get('search') }}" />
</form>
</x-container>
@if($posts->isEmpty())
<x-container class="mt-8">
<x-none-found item="posts" search="{{ request()->get('search') }}" />
<x-none-found item="posts" />
</x-container>
@else
<x-container class="mt-4" inner-class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">

40
resources/views/search.blade.php Normal file
View File

@@ -0,0 +1,40 @@
<x-layout>
<x-mast title="Search" description='Results for "{{ $search }}"' />
<x-container>
<section class="bg-gray-100">
<h2 class="text-2xl font-bold my-6">Posts</h2>
@if($posts->isEmpty())
<x-container class="mt-8">
<x-none-found item="posts" search="{{ request()->get('search') }}" />
</x-container>
@else
<x-container class="mt-4" inner-class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
@foreach ($posts as $post)
<x-panel-post :post="$post" />
@endforeach
</x-container>
<x-container>
{{ $posts->appends(request()->except('post'))->links('', ['pageName' => 'post']) }}
</x-container>
@endif
</section>
<section class="bg-gray-100">
<h2 class="text-2xl font-bold my-6">Workshops</h2>
@if($workshops->isEmpty())
<x-container class="mt-8">
<x-none-found item="workshops" search="{{ request()->get('search') }}" />
</x-container>
@else
<x-container class="mt-4" inner-class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
@foreach ($workshops as $workshop)
<x-panel-workshop :workshop="$workshop" />
@endforeach
</x-container>
<x-container>
{{ $workshops->appends(request()->except('workshop'))->links('', ['pageName' => 'workshop']) }}
</x-container>
@endif
</section>
</x-container>
</x-layout>

12
resources/views/workshop/index.blade.php
View File

@@ -5,19 +5,9 @@
['title' => 'Past', 'route' => route('workshop.past.index')],
]"/>
<section class="bg-gray-100">
<x-container class="my-4">
<x-ui.search class="md:hidden" name="search" label="Search" value="{{ request()->get('search') }}" />
<form class="hidden md:flex gap-4" method="GET" action="{{ request()->url() }}">
<x-ui.input no-label class="my-0 flex-1" type="text" name="search" label="Keywords" value="{{ request()->get('search') }}"/>
<x-ui.input no-label class="my-0 flex-1" type="text" name="location" label="Location" value="{{ request()->get('location') }}"/>
<x-ui.input no-label class="my-0 flex-1" type="text" name="date" label="Date Range" value="{{ request()->get('date') }}"/>
<x-ui.button type="submit"><i class="fa-solid fa-magnifying-glass"></i></x-ui.button>
</form>
</x-container>
@if($workshops->isEmpty())
<x-container class="mt-8">
<x-none-found item="workshops" search="{{ request()->get('search') }}" />
<x-none-found item="workshops" />
</x-container>
@else
<x-container class="mt-4" inner-class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">