add media stuff

This commit is contained in:
Benjamin Takats
2022-12-03 19:44:41 +01:00
parent dd206810d9
commit 43d33db0cb
16 changed files with 219 additions and 24 deletions

View File

@@ -1 +1 @@
<x-button amber>Anmelden</x-button>
<x-button amber wire:click="viewHistoryModal({{ $row->id }})">Anmelden</x-button>

View File

@@ -0,0 +1,5 @@
<div class="flex space-x-1">
@foreach($row->course->categories as $category)
<x-badge>{{ $category->name }}</x-badge>
@endforeach
</div>

View File

@@ -0,0 +1,56 @@
<x-jet-dialog-modal wire:model="viewingModal" maxWidth="screen" bg="bg-21gray">
<x-slot name="title">
<div class="text-gray-200">
{{ __('Registration') }}
</div>
</x-slot>
<x-slot name="content">
<div class="relative py-16">
<div class="absolute inset-x-0 top-0 hidden h-1/2 lg:block" aria-hidden="true"></div>
<div class="mx-auto max-w-7xl bg-indigo-600 lg:bg-transparent lg:px-8">
<div class="lg:grid lg:grid-cols-12">
<div class="relative z-10 lg:col-span-4 lg:col-start-1 lg:row-start-1 lg:bg-transparent lg:py-16">
<div class="absolute inset-x-0 h-1/2 lg:hidden" aria-hidden="true"></div>
<div class="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0 space-y-2">
<div class="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
<img class="rounded-3xl object-cover object-center shadow-2xl"
src="{{ $currentModal?->course->getFirstMediaUrl('logo') }}"
alt="{{ $currentModal?->course->name }}">
</div>
@foreach($currentModal?->course->getMedia('images') ?? [] as $image)
<div class="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
<img class="rounded-3xl object-cover object-center shadow-2xl"
src="{{ $image->getUrl() }}"
alt="{{ $currentModal?->course->name }}">
</div>
@endforeach
</div>
</div>
<div
class="relative bg-amber-600 py-4 lg:col-span-10 lg:col-start-3 lg:row-start-1 lg:grid lg:grid-cols-10 lg:items-center lg:rounded-3xl">
<div
class="relative mx-auto max-w-md space-y-6 py-12 px-4 sm:max-w-3xl sm:py-16 sm:px-6 lg:col-span-6 lg:col-start-4 lg:max-w-none lg:p-0">
<h2 class="text-3xl font-bold tracking-tight text-white"
id="join-heading">{{ $currentModal?->course->name }}</h2>
<a class="block w-full rounded-md border border-transparent bg-white py-3 px-5 text-center text-base font-medium text-amber-500 shadow-md hover:bg-gray-50 sm:inline-block sm:w-auto"
href="{{ $currentModal?->link }}" target="_blank">Link zur Anmeldung</a>
<x-markdown>
{{ $currentModal?->course->description }}
</x-markdown>
<a class="block w-full rounded-md border border-transparent bg-white py-3 px-5 text-center text-base font-medium text-amber-500 shadow-md hover:bg-gray-50 sm:inline-block sm:w-auto"
href="{{ $currentModal?->link }}" target="_blank">Link zur Anmeldung</a>
</div>
</div>
</div>
</div>
</div>
</x-slot>
<x-slot name="footer">
<x-jet-secondary-button wire:click="resetModal" wire:loading.attr="disabled">
@lang('Done')
</x-jet-secondary-button>
</x-slot>
</x-jet-dialog-modal>

View File

@@ -1,6 +1,6 @@
@props(['id' => null, 'maxWidth' => null])
@props(['id' => null, 'maxWidth' => null, 'bg' => 'bg-white'])
<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
<x-jet-modal :id="$id" :maxWidth="$maxWidth" :bg="$bg" {{ $attributes }}>
<div class="px-6 py-4">
<div class="text-lg">
{{ $title }}
@@ -11,7 +11,7 @@
</div>
</div>
<div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
<div class="flex flex-row justify-end px-6 py-4 {{ $bg }} text-right">
{{ $footer }}
</div>
</x-jet-modal>

View File

@@ -1,4 +1,4 @@
@props(['id', 'maxWidth'])
@props(['id', 'maxWidth', 'bg'])
@php
$id = $id ?? md5($attributes->wire('model'));
@@ -9,6 +9,7 @@ $maxWidth = [
'lg' => 'sm:max-w-lg',
'xl' => 'sm:max-w-xl',
'2xl' => 'sm:max-w-2xl',
'screen' => 'sm:max-w-screen-lg',
][$maxWidth ?? '2xl'];
@endphp
@@ -53,10 +54,10 @@ $maxWidth = [
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
<div class="absolute inset-0 {{ $bg }} opacity-75"></div>
</div>
<div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
<div x-show="show" class="mb-6 {{ $bg }} rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"