From 32d813eefca4bbd61c64a799e9448704efcfc486 Mon Sep 17 00:00:00 2001
From: Benjamin Takats <mail@benjamintakats.de>
Date: Mon, 16 Jan 2023 16:03:12 +0100
Subject: [PATCH] max-w

---
 .../livewire/meetup/landing-page.blade.php    | 183 +++++++-------
 .../school/lecturer-landing-page.blade.php    | 224 +++++++++---------
 2 files changed, 210 insertions(+), 197 deletions(-)

diff --git a/resources/views/livewire/meetup/landing-page.blade.php b/resources/views/livewire/meetup/landing-page.blade.php
index edd27dff..ce9d0092 100644
--- a/resources/views/livewire/meetup/landing-page.blade.php
+++ b/resources/views/livewire/meetup/landing-page.blade.php
@@ -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">&minus;</span>
-                                            <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</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">&minus;</span>
+                                                <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</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/>
diff --git a/resources/views/livewire/school/lecturer-landing-page.blade.php b/resources/views/livewire/school/lecturer-landing-page.blade.php
index fe3c138c..8cb87ebe 100644
--- a/resources/views/livewire/school/lecturer-landing-page.blade.php
+++ b/resources/views/livewire/school/lecturer-landing-page.blade.php
@@ -22,33 +22,36 @@
 
         </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">
-                    {{ __('Courses') }}
-                </h2>
-                <p class="text-gray-400 text-lg sm:text-xl leading-normal">
-                    {{ __('All courses of :name', ['name' => $lecturer->name]) }}
-                </p>
-            </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($courseEvents as $courseEvent)
-                @php
-                    $activeClass = $activeEvent === $courseEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
-                @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="{
+            <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">
+                        {{ __('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">
+                @foreach($courseEvents as $courseEvent)
+                    @php
+                        $activeClass = $activeEvent === $courseEvent->id ? 'bg-gradient-to-r from-amber-800 via-amber-600 to-amber-500' : 'bg-amber-500';
+                    @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,
                                         get expanded() {
                                             return this.active === this.id
@@ -57,94 +60,96 @@
                                             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">&minus;</span>
-                                            <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span>
-                                        </button>
-                                    </h2>
-                                    <div x-show="expanded" x-collapse>
-                                        <div class="px-6 pb-4 text-left">{!! nl2br($courseEvent->course->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">&minus;</span>
+                                                <span x-show="!expanded" aria-hidden="true" class="ml-4">&plus;</span>
+                                            </button>
+                                        </h2>
+                                        <div x-show="expanded" x-collapse>
+                                            <div
+                                                class="px-6 pb-4 text-left">{!! nl2br($courseEvent->course->description) !!}</div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
                                 <dd class="mt-3 flex flex-col space-y-1">
-                                @foreach($courseEvent->course->tags as $tag)
-                                    <span
-                                        class="rounded-full bg-21gray px-2 py-1 text-xs font-medium text-gray-200">{{ $tag->name }}</span>
-                                @endforeach
-                            </dd>
-                        </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="{{ $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">
-                                    <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>
-                                </a>
+                                    @foreach($courseEvent->course->tags as $tag)
+                                        <span
+                                            class="rounded-full bg-21gray px-2 py-1 text-xs font-medium text-gray-200">{{ $tag->name }}</span>
+                                    @endforeach
+                                </dd>
+                            </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="{{ $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">
+                                        <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>
+                                    </a>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </li>
-            @endforeach
-        </ul>
+                    </li>
+                @endforeach
+            </ul>
 
-        <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>
-                <p class="text-gray-400 text-lg sm:text-xl leading-normal">
-                    {{ __('Here you can see all events of :name.', ['name' => $lecturer->name]) }}
-                </p>
-            </div>
-        </section>
+            <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>
+                    <p class="text-gray-400 text-lg sm:text-xl leading-normal">
+                        {{ __('Here you can see all events of :name.', ['name' => $lecturer->name]) }}
+                    </p>
+                </div>
+            </section>
 
-        <div class="w-full">
+            <div class="w-full">
 
-            @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) }};
@@ -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 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/>