mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-11 06:46:47 +00:00
max-w
This commit is contained in:
Benjamin Takats
@@ -52,29 +52,31 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="h-auto px-10 py-16">
|
||||
<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>
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4">
|
||||
|
||||
<ul role="list" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
||||
@foreach($meetupEvents as $meetupEvent)
|
||||
@php
|
||||
$activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
|
||||
@endphp
|
||||
<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 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="{
|
||||
<section class="h-auto px-10 py-16">
|
||||
<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">
|
||||
@foreach($meetupEvents as $meetupEvent)
|
||||
@php
|
||||
$activeClass = $activeEvent === $meetupEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
|
||||
@endphp
|
||||
<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 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,
|
||||
get expanded() {
|
||||
return this.active === this.id
|
||||
@@ -83,77 +85,77 @@
|
||||
this.active = value ? this.id : null
|
||||
},
|
||||
}"
|
||||
role="region" class="rounded-lg bg-white shadow">
|
||||
<h2>
|
||||
<button
|
||||
x-on:click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
|
||||
>
|
||||
<span>{{ __('Description') }}</span>
|
||||
<span x-show="expanded" aria-hidden="true" class="ml-4">−</span>
|
||||
<span x-show="!expanded" aria-hidden="true" class="ml-4">+</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div x-show="expanded" x-collapse>
|
||||
<div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div>
|
||||
role="region" class="rounded-lg bg-white shadow">
|
||||
<h2>
|
||||
<button
|
||||
x-on:click="expanded = !expanded"
|
||||
:aria-expanded="expanded"
|
||||
class="flex w-full items-center justify-between px-6 py-4 text-xl font-bold"
|
||||
>
|
||||
<span>{{ __('Description') }}</span>
|
||||
<span x-show="expanded" aria-hidden="true" class="ml-4">−</span>
|
||||
<span x-show="!expanded" aria-hidden="true" class="ml-4">+</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div x-show="expanded" x-collapse>
|
||||
<div class="px-6 pb-4 text-left">{!! nl2br($meetupEvent->description) !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<div class="-mt-px flex divide-x divide-gray-200">
|
||||
<div class="-ml-px flex w-0 flex-1">
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</dl>
|
||||
</div>
|
||||
<div>
|
||||
<div class="-mt-px flex divide-x divide-gray-200">
|
||||
<div class="-ml-px flex w-0 flex-1">
|
||||
<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">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
<div class="w-full mt-8">
|
||||
<div class="w-full mt-8">
|
||||
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
@php
|
||||
$locale = \Illuminate\Support\Facades\Cookie::get('lang', 'de');
|
||||
@endphp
|
||||
|
||||
<link rel="stylesheet" type="text/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/locales/js-year-calendar.{{ $locale }}.js"></script>
|
||||
<link rel="stylesheet" type="text/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/locales/js-year-calendar.{{ $locale }}.js"></script>
|
||||
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
.calendar table.month th.day-header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
.calendar table.month td.day .day-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
.calendar .calendar-header table th:hover {
|
||||
background: #222;
|
||||
}
|
||||
</style>
|
||||
<div
|
||||
wire:ignore
|
||||
x-data="{
|
||||
calendar: null,
|
||||
init() {
|
||||
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 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>
|
||||
|
||||
</section>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
|
||||
Reference in New Issue
Block a user