change workshop table to events

This commit is contained in:
2024-05-07 15:00:32 +10:00
parent 391b17c1e7
commit 8f8d12065d
16 changed files with 244 additions and 205 deletions

View File

@@ -20,7 +20,7 @@
<div class="hidden sm:ml-6 sm:block mr-4">
<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>
<a href="{{ route('event.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>
</div>
</div>
<div class="ml-3">
@@ -37,7 +37,7 @@
</div>
<div x-show="open" @click.away="open=false" x-cloak class="absolute w-full right-0 sm:right-5 sm:top-9 z-50 sm:mt-2 sm:w-48 origin-top-right sm:rounded-md bg-white py-3 px-2 shadow-lg border-t sm:ring-1 ring-black ring-opacity-25 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a href="{{ route('post.index') }}" class="sm:hidden block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-regular fa-newspaper w-4 mr-2"></i>Blog</a>
<a href="{{ route('workshop.index') }}" class="sm:hidden block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-bullhorn w-4 mr-2"></i>Workshops</a>
<a href="{{ route('event.index') }}" class="sm:hidden block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-bullhorn w-4 mr-2"></i>Workshops</a>
<div class="sm:hidden border-t border-gray-200 my-2"></div>
@if(auth()->guest())
<a href="{{ route('register') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-pen-to-square w-4 mr-2"></i>Register</a>
@@ -49,7 +49,7 @@
<a href="{{ route('admin.media.index') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-photo-film w-4 mr-2"></i>Media</a>
<a href="{{ route('admin.post.index') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-regular fa-newspaper w-4 mr-2"></i>Posts</a>
<a href="{{ route('admin.user.index') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-users w-4 mr-2"></i>Users</a>
<a href="{{ route('admin.workshop.index') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-bullhorn w-4 mr-2"></i>Workshops</a>
<a href="{{ route('admin.event.index') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-regular fa-calendar w-4 mr-2"></i>Events</a>
<div class="border-t border-gray-200 my-2"></div>
@endif
<a href="{{ route('account.show') }}" class="block px-4 py-2 text-sm text-gray-700 rounded transition hover:bg-sky-600 hover:text-white" role="menuitem" tabindex="-1"><i class="fa-solid fa-user-pen w-4 mr-2"></i>Account</a>

View File

@@ -1,45 +1,45 @@
@props(['workshop'])
@props(['event'])
@php
$statusClass = $workshop->status;
$statusTitle = $workshop->status;
$statusClass = $event->status;
$statusTitle = $event->status;
if($workshop->status === 'scheduled') {
if($event->status === 'scheduled') {
$statusClass = 'soon';
$statusTitle = 'Open soon';
}
@endphp
<a href="{{ route('workshop.show', $workshop) }}" class="flex flex-col bg-white border rounded-lg overflow-hidden hover:shadow-lg hover:scale-[101%] transition-all relative {{ $attributes->get('class') }}">
<a href="{{ route('event.show', $event) }}" class="flex flex-col bg-white border rounded-lg overflow-hidden hover:shadow-lg hover:scale-[101%] transition-all relative {{ $attributes->get('class') }}">
<div class="shadow border rounded px-3 py-2 absolute top-2 left-2 flex flex-col justify-center items-center bg-white">
<div class="text-gray-600 font-bold leading-none">{{ $workshop->starts_at->format('j') }}</div>
<div class="text-gray-600 text-xs uppercase">{{ $workshop->starts_at->format('M') }}</div>
<div class="text-gray-600 font-bold leading-none">{{ $event->starts_at->format('j') }}</div>
<div class="text-gray-600 text-xs uppercase">{{ $event->starts_at->format('M') }}</div>
</div>
<div class="border border-white border-opacity-50 absolute flex items-center justify-center top-5 -right-9 bg-gray-500 w-36 text-sm text-white font-bold uppercase py-1 rotate-45 h-8 sm-banner-{{ strtolower($statusClass) }}">{{ $statusTitle }}</div>
<img src="{{ $workshop->hero?->url }}?md" alt="{{ $workshop->title }}" class="w-full h-64 object-cover object-center">
<img src="{{ $event->hero?->url }}?md" alt="{{ $event->title }}" class="w-full h-64 object-cover object-center">
<div class="flex-grow p-4 flex flex-col">
<h2 class="flex-grow {{ strlen($workshop->title) > 25 ? 'text-lg' : 'text-xl' }} font-bold mb-2">{{ $workshop->title }}</h2>
<h2 class="flex-grow {{ strlen($event->title) > 25 ? 'text-lg' : 'text-xl' }} font-bold mb-2">{{ $event->title }}</h2>
<div class="text-gray-600 text-sm mb-1 flex gap-2">
<div class="w-6 flex items-center justify-center">
<i class="fa-regular fa-calendar"></i>
</div>{{ $workshop->starts_at->format('j/m/Y @ g:i a') }}
</div>{{ $event->starts_at->format('j/m/Y @ g:i a') }}
</div>
<div class="text-gray-600 text-sm mb-1 flex gap-2">
<div class="w-6 flex items-center justify-center">
<i class="fa-solid fa-location-dot"></i>
</div>{{ $workshop->location->name }}
</div>{{ $event->location->name }}
</div>
@if($workshop->ages)
@if($event->ages)
<div class="text-gray-600 text-sm mb-1 flex gap-2">
<div class="w-6 flex items-center justify-center">
<i class="fa-regular fa-face-smile"></i>
</div>{{ isset($workshop->ages) && $workshop->ages !== '' ? 'Ages ' . $workshop->ages : 'All ages' }}
</div>{{ isset($event->ages) && $event->ages !== '' ? 'Ages ' . $event->ages : 'All ages' }}
</div>
@endif
<div class="text-gray-600 text-sm mb-1 flex gap-2">
<div class="w-6 flex items-center justify-center">
<i class="fa-solid fa-dollar-sign"></i>
</div>{{ isset($workshop->price) && $workshop->price !== '' && $workshop->price !== '0' ? $workshop->price : 'Free' }}
</div>{{ isset($event->price) && $event->price !== '' && $event->price !== '0' ? $event->price : 'Free' }}
</div>
</div>
</a>