This commit is contained in:
Benjamin Takats
2023-01-16 16:03:12 +01:00
parent 6dd898e6d2
commit 32d813eefc
2 changed files with 210 additions and 197 deletions

View File

@@ -52,29 +52,31 @@
</div> </div>
</div> </div>
<section class="h-auto px-10 py-16"> <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4">
<div class="max-w-3xl mx-auto space-y-4 sm:text-center">
<h2 class="text-4xl sm:text-5xl font-semibold text-white">
{{ __('Events') }}
</h2>
</div>
</section>
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"> <section class="h-auto px-10 py-16">
@foreach($meetupEvents as $meetupEvent) <div class="max-w-3xl mx-auto space-y-4 sm:text-center">
@php <h2 class="text-4xl sm:text-5xl font-semibold text-white">
$activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500'; {{ __('Events') }}
@endphp </h2>
<li id="courseEventId_{{ $meetupEvent->id }}" class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl"> </div>
<div class="flex flex-1 flex-col p-8"> </section>
{{--<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded"
src="{{ $meetupEvent->meetup->getFirstMediaUrl('logo') }}" <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
alt="{{ $meetupEvent->meetup->name }}">--}} @foreach($meetupEvents as $meetupEvent)
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->start->asDate() }}</h3> @php
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->location }}</h3> $activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
<dl class="mt-1 flex flex-grow flex-col justify-between"> @endphp
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4"> <li id="courseEventId_{{ $meetupEvent->id }}" class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl">
<div x-data="{ <div class="flex flex-1 flex-col p-8">
{{--<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded"
src="{{ $meetupEvent->meetup->getFirstMediaUrl('logo') }}"
alt="{{ $meetupEvent->meetup->name }}">--}}
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->start->asDate() }}</h3>
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $meetupEvent->location }}</h3>
<dl class="mt-1 flex flex-grow flex-col justify-between">
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4">
<div x-data="{
id: 1, id: 1,
get expanded() { get expanded() {
return this.active === this.id return this.active === this.id
@@ -83,77 +85,77 @@
this.active = value ? this.id : null this.active = value ? this.id : null
}, },
}" }"
role="region" class="rounded-lg bg-white shadow"> role="region" class="rounded-lg bg-white shadow">
<h2> <h2>
<button <button
x-on:click="expanded = !expanded" x-on:click="expanded = !expanded"
:aria-expanded="expanded" :aria-expanded="expanded"
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold" class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
> >
<span>{{ __('Description') }}</span> <span>{{ __('Description') }}</span>
<span x-show="expanded" aria-hidden="true" class="ml-4">&minus;</span> <span x-show="expanded" aria-hidden="true" class="ml-4">&minus;</span>
<span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span> <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span>
</button> </button>
</h2> </h2>
<div x-show="expanded" x-collapse> <div x-show="expanded" x-collapse>
<div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div> <div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div>
</div>
</div> </div>
</div> </div>
</div> </dl>
</dl> </div>
</div> <div>
<div> <div class="-mt-px flex divide-x divide-gray-200">
<div class="-mt-px flex divide-x divide-gray-200"> <div class="-ml-px flex w-0 flex-1">
<div class="-ml-px flex w-0 flex-1"> <a target="_blank" href="{{ $meetupEvent->link }}"
<a target="_blank" href="{{ $meetupEvent->link }}" class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500"> <i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i>
<i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i> <span class="ml-3 text-gray-100 text-2xl">{{ __('Link') }}</span>
<span class="ml-3 text-gray-100 text-2xl">{{ __('Link') }}</span> </a>
</a> </div>
</div> </div>
</div> </div>
</div> </li>
</li> @endforeach
@endforeach </ul>
</ul>
<div class="w-full mt-8"> <div class="w-full mt-8">
@php @php
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de'); $locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
@endphp @endphp
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/> href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script> <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script> <script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
<style> <style>
.calendar .calendar-header { .calendar .calendar-header {
background-color: #F7931A; background-color: #F7931A;
color: white; color: white;
border: 0; border: 0;
} }
.calendar table.month th.month-title { .calendar table.month th.month-title {
color: #F7931A; color: #F7931A;
} }
.calendar table.month th.day-header { .calendar table.month th.day-header {
color: #fff; color: #fff;
} }
.calendar table.month td.day .day-content { .calendar table.month td.day .day-content {
color: #fff; color: #fff;
} }
.calendar .calendar-header table th:hover { .calendar .calendar-header table th:hover {
background: #222; background: #222;
} }
</style> </style>
<div <div
wire:ignore wire:ignore
x-data="{ x-data="{
calendar: null, calendar: null,
init() { init() {
let events = {{ Js::from($events) }}; let events = {{ Js::from($events) }};
@@ -178,17 +180,20 @@
}); });
}, },
}" }"
> >
<div x-ref="calendar"></div> <div x-ref="calendar"></div>
</div>
<div class="p-4 w-full flex justify-end">
<x-button :href="route('welcome')" primary lg class="whitespace-nowrap">
<i class="fa fa-thin fa-arrow-left mr-2"></i>
{{ __('Back') }}
</x-button>
</div>
</div> </div>
<div class="p-4 w-full flex justify-end">
<x-button :href="route('welcome')" primary lg class="whitespace-nowrap">
<i class="fa fa-thin fa-arrow-left mr-2"></i>
{{ __('Back') }}
</x-button>
</div>
</div> </div>
</section> </section>
{{-- FOOTER --}} {{-- FOOTER --}}
<livewire:frontend.footer/> <livewire:frontend.footer/>

View File

@@ -22,33 +22,36 @@
</div> </div>
<section class="h-auto px-10 py-16"> <div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4">
<div class="max-w-3xl mx-auto space-y-4 sm:text-center">
<h2 class="text-4xl sm:text-5xl font-semibold text-white">
{{ __('Courses') }}
</h2>
<p class="text-gray-400 text-lg sm:text-xl leading-normal">
{{ __('All courses of :name', ['name' => $lecturer->name]) }}
</p>
</div>
</section>
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"> <section class="h-auto px-10 py-16">
@foreach($courseEvents as $courseEvent) <div class="max-w-3xl mx-auto space-y-4 sm:text-center">
@php <h2 class="text-4xl sm:text-5xl font-semibold text-white">
$activeClass = $activeEvent === $courseEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500'; {{ __('Courses') }}
@endphp </h2>
<li id="courseEventId_{{ $courseEvent->id }}" class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl"> <p class="text-gray-400 text-lg sm:text-xl leading-normal">
<div class="flex flex-1 flex-col p-8"> {{ __('All courses of :name', ['name' => $lecturer->name]) }}
<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded" </p>
src="{{ $courseEvent->venue->getFirstMediaUrl('images') }}" </div>
alt="{{ $courseEvent->course->name }}"> </section>
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->from->asDate() }}</h3>
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->venue->city->name }}</h3> <ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->venue->name }}</h3> @foreach($courseEvents as $courseEvent)
<dl class="mt-1 flex flex-grow flex-col justify-between"> @php
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4"> $activeClass = $activeEvent === $courseEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
<div x-data="{ @endphp
<li id="courseEventId_{{ $courseEvent->id }}"
class="{{ $activeClass }} col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg text-center shadow-2xl">
<div class="flex flex-1 flex-col p-8">
<img class="mx-auto h-32 w-32 object-contain flex-shrink-0 rounded"
src="{{ $courseEvent->venue->getFirstMediaUrl('images') }}"
alt="{{ $courseEvent->course->name }}">
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->from->asDate() }}</h3>
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->venue->city->name }}</h3>
<h3 class="mt-1 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->venue->name }}</h3>
<dl class="mt-1 flex flex-grow flex-col justify-between">
<div x-data="{ active: 2 }" class="mx-auto max-w-3xl w-full space-y-4">
<div x-data="{
id: 1, id: 1,
get expanded() { get expanded() {
return this.active === this.id return this.active === this.id
@@ -57,94 +60,96 @@
this.active = value ? this.id : null this.active = value ? this.id : null
}, },
}" }"
role="region" class="rounded-lg bg-white shadow"> role="region" class="rounded-lg bg-white shadow">
<h2> <h2>
<button <button
x-on:click="expanded = !expanded" x-on:click="expanded = !expanded"
:aria-expanded="expanded" :aria-expanded="expanded"
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold" class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
> >
<span>{{ __('Description') }}</span> <span>{{ __('Description') }}</span>
<span x-show="expanded" aria-hidden="true" class="ml-4">&minus;</span> <span x-show="expanded" aria-hidden="true" class="ml-4">&minus;</span>
<span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span> <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span>
</button> </button>
</h2> </h2>
<div x-show="expanded" x-collapse> <div x-show="expanded" x-collapse>
<div class="px-6 pb-4 text-left">{!! nl2br($courseEvent->course->description) !!}</div> <div
class="px-6 pb-4 text-left">{!! nl2br($courseEvent->course->description) !!}</div>
</div>
</div> </div>
</div> </div>
</div>
<dd class="mt-3 flex flex-col space-y-1"> <dd class="mt-3 flex flex-col space-y-1">
@foreach($courseEvent->course->tags as $tag) @foreach($courseEvent->course->tags as $tag)
<span <span
class="rounded-full bg-21gray px-2 py-1 text-xs font-medium text-gray-200">{{ $tag->name }}</span> class="rounded-full bg-21gray px-2 py-1 text-xs font-medium text-gray-200">{{ $tag->name }}</span>
@endforeach @endforeach
</dd> </dd>
</dl> </dl>
</div> </div>
<div> <div>
<div class="-mt-px flex divide-x divide-gray-200"> <div class="-mt-px flex divide-x divide-gray-200">
<div class="-ml-px flex w-0 flex-1"> <div class="-ml-px flex w-0 flex-1">
<a target="_blank" href="{{ $courseEvent->link }}" <a target="_blank" href="{{ $courseEvent->link }}"
class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500"> class="relative inline-flex w-0 flex-1 items-center justify-center rounded-br-lg border border-transparent py-4 text-sm font-medium text-gray-700 hover:text-gray-500">
<i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i> <i class="text-gray-100 text-2xl fa-thin fa-right-to-bracket"></i>
<span class="ml-3 text-gray-100 text-2xl">{{ __('Register') }}</span> <span class="ml-3 text-gray-100 text-2xl">{{ __('Register') }}</span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </li>
</li> @endforeach
@endforeach </ul>
</ul>
<section class="h-auto px-10 py-16"> <section class="h-auto px-10 py-16">
<div class="max-w-3xl mx-auto space-y-4 sm:text-center"> <div class="max-w-3xl mx-auto space-y-4 sm:text-center">
<h2 class="text-4xl sm:text-5xl font-semibold text-white"> <h2 class="text-4xl sm:text-5xl font-semibold text-white">
{{ __('Events') }} {{ __('Events') }}
</h2> </h2>
<p class="text-gray-400 text-lg sm:text-xl leading-normal"> <p class="text-gray-400 text-lg sm:text-xl leading-normal">
{{ __('Here you can see all events of :name.', ['name' => $lecturer->name]) }} {{ __('Here you can see all events of :name.', ['name' => $lecturer->name]) }}
</p> </p>
</div> </div>
</section> </section>
<div class="w-full"> <div class="w-full">
@php @php
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de'); $locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
@endphp @endphp
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/> href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css"/>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script> <script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script> <script
src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.{{ $locale }}.js"></script>
<style> <style>
.calendar .calendar-header { .calendar .calendar-header {
background-color: #F7931A; background-color: #F7931A;
color: white; color: white;
border: 0; border: 0;
} }
.calendar table.month th.month-title { .calendar table.month th.month-title {
color: #F7931A; color: #F7931A;
} }
.calendar table.month th.day-header { .calendar table.month th.day-header {
color: #fff; color: #fff;
} }
.calendar table.month td.day .day-content { .calendar table.month td.day .day-content {
color: #fff; color: #fff;
} }
.calendar .calendar-header table th:hover { .calendar .calendar-header table th:hover {
background: #222; background: #222;
} }
</style> </style>
<div <div
wire:ignore wire:ignore
x-data="{ x-data="{
calendar: null, calendar: null,
init() { init() {
let events = {{ Js::from($events) }}; let events = {{ Js::from($events) }};
@@ -169,17 +174,20 @@
}); });
}, },
}" }"
> >
<div x-ref="calendar"></div> <div x-ref="calendar"></div>
</div>
<div class="p-4 w-full flex justify-end">
<x-button :href="route('welcome')" primary lg class="whitespace-nowrap">
<i class="fa fa-thin fa-arrow-left mr-2"></i>
{{ __('Back') }}
</x-button>
</div>
</div> </div>
<div class="p-4 w-full flex justify-end">
<x-button :href="route('welcome')" primary lg class="whitespace-nowrap">
<i class="fa fa-thin fa-arrow-left mr-2"></i>
{{ __('Back') }}
</x-button>
</div>
</div> </div>
</section> </section>
{{-- FOOTER --}} {{-- FOOTER --}}
<livewire:frontend.footer/> <livewire:frontend.footer/>