mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-13 06:56:48 +00:00
lecturer landing pages added
This commit is contained in:
Benjamin Takats
@@ -1,7 +1,9 @@
|
||||
import './bootstrap';
|
||||
|
||||
import Alpine from 'alpinejs';
|
||||
import collapse from '@alpinejs/collapse'
|
||||
|
||||
window.Alpine = Alpine;
|
||||
|
||||
Alpine.plugin(collapse)
|
||||
Alpine.start();
|
||||
|
||||
@@ -622,5 +622,18 @@
|
||||
"nova-spatie-permissions::lang.display_names\": \"": "",
|
||||
"PlebArt": "",
|
||||
"Highscore Table": "Highscore-Tabelle",
|
||||
"Hall of fame of our honorable plebs": "Hall of fame unserer Plebs"
|
||||
"Hall of fame of our honorable plebs": "Hall of fame unserer Plebs",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"Back": "",
|
||||
"By lecturer": "Nach Dozent",
|
||||
"All courses of :name": "Alle Kurse von :name",
|
||||
"Here you can see all events of :name.": "Hier siehst du alle Kurs-Termine von :name.",
|
||||
"This is the introduction text that is shown on the landing page.": "Das ist der Text, der auf der Landing-Page des Dozenten.",
|
||||
"This is the subtitle on the landing page.": "Das ist der Untertitel auf der Landing-Page des Dozenten.",
|
||||
"Subtitle": "Untertitel auf der Landing-Page",
|
||||
"Intro": "Intro auf der Landing-Page"
|
||||
}
|
||||
|
||||
@@ -612,7 +612,20 @@
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": "",
|
||||
"PlebArt": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": ""
|
||||
"PlebArt": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of :name": "",
|
||||
"Here you can see all events of :name.": "",
|
||||
"This is the introduction text that is shown on the landing page.": "",
|
||||
"This is the subtitle on the landing page.": "",
|
||||
"Subtitle": "",
|
||||
"Intro": ""
|
||||
}
|
||||
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -610,5 +610,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -584,5 +584,17 @@
|
||||
"World map of meetups": "",
|
||||
"Dates for courses about Bitcoin.": "",
|
||||
"Lecturers in the surrounding area.": "",
|
||||
"Venues in the surrounding area.": ""
|
||||
"Venues in the surrounding area.": "",
|
||||
"Highscore Table": "",
|
||||
"Hall of fame of our honorable plebs": "",
|
||||
"Perimeter search bookcase :name (25km)": "",
|
||||
"Show landing page": "",
|
||||
"Orange pilled": "",
|
||||
"Points": "",
|
||||
"Changelog": "",
|
||||
"PlebArt": "",
|
||||
"Back": "",
|
||||
"By lecturer": "",
|
||||
"All courses of this lecturer": "",
|
||||
"Here you can see all events of this lecturer.": ""
|
||||
}
|
||||
@@ -12,15 +12,21 @@
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->library_items_count > 0)
|
||||
<x-button amber wire:click="lecturerSearch({{ $row->id }})">
|
||||
<x-button amber wire:click="lecturerSearch({{ $row->id }}, false)">
|
||||
<i class="fa fa-thin fa-book mr-2"></i>
|
||||
{{ __('Show content') }} ({{ $row->library_items_count }})
|
||||
</x-button>
|
||||
@endif
|
||||
@if($row->library_items_count < 1)
|
||||
<x-button outlined wire:click="lecturerSearch({{ $row->id }})">
|
||||
<x-button outlined wire:click="lecturerSearch({{ $row->id }}, false)">
|
||||
<i class="fa fa-thin fa-book mr-2"></i>
|
||||
{{ __('Show content') }} ({{ $row->library_items_count }})
|
||||
</x-button>
|
||||
@endif
|
||||
<x-button
|
||||
:href="route('school.landingPage.lecturer', ['country' => $country, 'lecturer' => $row->id])"
|
||||
amber>
|
||||
<i class="fa fa-thin fa-browser mr-2"></i>
|
||||
{{ __('Show landing page') }}
|
||||
</x-button>
|
||||
</div>
|
||||
|
||||
186
resources/views/livewire/school/lecturer-landing-page.blade.php
Normal file
186
resources/views/livewire/school/lecturer-landing-page.blade.php
Normal file
@@ -0,0 +1,186 @@
|
||||
<div class="bg-21gray flex flex-col h-screen justify-between">
|
||||
{{-- MAIN --}}
|
||||
<section class="w-full mb-12 mt-8">
|
||||
<div class="max-w-screen-2xl mx-auto px-2 sm:px-10 space-y-4 flex flex-col sm:flex-row">
|
||||
<div class="flex flex-col sm:flex-row sm:space-x-6">
|
||||
<div class="flex flex-col">
|
||||
<h1 class="mb-6 text-5xl font-extrabold leading-none tracking-normal text-gray-200 sm:text-6xl md:text-6xl lg:text-7xl md:tracking-tight">
|
||||
<span
|
||||
class="text-transparent bg-clip-text bg-gradient-to-r from-amber-400 via-amber-500 to-amber-200">{{ $lecturer->name }}</span><br
|
||||
class="lg:block hidden">
|
||||
{{ $lecturer->subtitle }}
|
||||
</h1>
|
||||
<div class="px-0 mb-6 text-lg text-gray-600 md:text-xl">
|
||||
{{ $lecturer->intro }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
<img class="max-h-64" src="{{ $lecturer->getFirstMediaUrl('avatar') }}" alt="Avatar">
|
||||
</div>
|
||||
</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">
|
||||
{{ __('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-cover flex-shrink-0 rounded"
|
||||
src="{{ $courseEvent->course->getFirstMediaUrl('logo') }}"
|
||||
alt="{{ $courseEvent->course->name }}">
|
||||
<h3 class="mt-6 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->from->asDate() }}</h3>
|
||||
<h3 class="mt-6 text-xl font-medium text-gray-900 truncate">{{ $courseEvent->venue->city->name }}</h3>
|
||||
<h3 class="mt-6 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
|
||||
},
|
||||
set expanded(value) {
|
||||
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($courseEvent->course->description) !!}</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="w-full">
|
||||
|
||||
@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>
|
||||
|
||||
<style>
|
||||
.calendar .calendar-header {
|
||||
background-color: #F7931A;
|
||||
color: white;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.calendar table.month th.month-title {
|
||||
color: #F7931A;
|
||||
}
|
||||
|
||||
.calendar table.month th.day-header {
|
||||
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: null,
|
||||
init() {
|
||||
let events = {{ Js::from($events) }};
|
||||
events = events.map(function(e){
|
||||
return {id: e.id, startDate: new Date(e.startDate), endDate: new Date(e.endDate), location: e.location, description: e.description}
|
||||
})
|
||||
|
||||
new Calendar(this.$refs.calendar, {
|
||||
style: 'background',
|
||||
language: '{{ $locale }}',
|
||||
startYear: {{ date('Y') }},
|
||||
dataSource: events,
|
||||
yearChanged: function(e) {
|
||||
@this.set('year', e.currentYear);
|
||||
},
|
||||
clickDay: function(e) {
|
||||
if(e.events.length > 0) {
|
||||
$wire.call('showEvent', e.events[0].id);
|
||||
document.getElementById('courseEventId_'+e.events[0].id).scrollIntoView();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
}"
|
||||
>
|
||||
<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>
|
||||
</section>
|
||||
{{-- FOOTER --}}
|
||||
<livewire:frontend.footer/>
|
||||
</div>
|
||||
Reference in New Issue
Block a user