mirror of
https://github.com/Einundzwanzig-Podcast/einundzwanzig-portal.git
synced 2025-12-13 06:56:48 +00:00
library with grid
This commit is contained in:
Benjamin Takats
@@ -678,7 +678,7 @@
|
||||
"Main image caption": "Hauptbildunterschrift",
|
||||
"Time to read": "Zeit zum Lesen",
|
||||
"How many minutes to read?": "Wie viele Minuten zum Lesen?",
|
||||
"Read": "Lesedauer",
|
||||
"Read": "Lesen",
|
||||
"News": "",
|
||||
"Dezentral News": "",
|
||||
"min read": "Minuten Lesedauer",
|
||||
|
||||
@@ -43,7 +43,58 @@
|
||||
<livewire:library.search-by-tag-component/>
|
||||
<div class="my-12">
|
||||
|
||||
<livewire:tables.library-item-table :currentTab="$currentTab"/>
|
||||
<div class="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
|
||||
|
||||
@foreach($libraryItems as $libraryItem)
|
||||
<div wire:key="library_item_{{ $libraryItem->id }}"
|
||||
class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-sm">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
|
||||
<img class="h-48 w-full object-cover"
|
||||
src="https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
|
||||
alt="{{ $libraryItem->name }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col justify-between bg-21gray p-6">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-amber-600">
|
||||
<div
|
||||
class="text-amber-500">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
|
||||
</p>
|
||||
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
|
||||
class="mt-2 block">
|
||||
<p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
|
||||
<p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>
|
||||
<span class="sr-only text-gray-200">{{ $libraryItem->lecturer->name }}</span>
|
||||
<img class="h-10 w-10 rounded-full"
|
||||
src="{{ $libraryItem->lecturer->getFirstMediaUrl('avatar') }}"
|
||||
alt="{{ $libraryItem->lecturer->name }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-200">
|
||||
<div class="text-gray-200">{{ $libraryItem->lecturer->name }}</div>
|
||||
</p>
|
||||
<div class="flex space-x-1 text-sm text-gray-400">
|
||||
<time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time>
|
||||
@if($libraryItem->read_time)
|
||||
<span aria-hidden="true">·</span>
|
||||
<span>{{ $libraryItem->read_time }} {{ __('min read') }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
style="font-size: 128%; background-position: 0px center; list-style: outside;"
|
||||
>
|
||||
@php
|
||||
$isActive = collect($library_items)->pluck('tag')->collapse()->contains($tag->name);
|
||||
$isActive = in_array($tag->id, $filters['tag'] ?? [], false);
|
||||
$activeClass = $isActive ? 'text-amber-500 bg-amber-500' : 'bg-blue-50 text-white hover:text-amber-500';
|
||||
@endphp
|
||||
<a
|
||||
class="{{ $activeClass }} flex relative flex-col flex-shrink-0 justify-between py-1 px-3 w-full h-20 border-0 border-solid duration-300 ease-in-out cursor-pointer bg-opacity-[0.07]"
|
||||
href="{{ route(request()->route()->getName(), ['country' => $country, 'library_items' => ['filters' => ['tag' => [$tag->id]]]]) }}"
|
||||
href="{{ route(request()->route()->getName(), ['country' => $country, 'filters' => ['tag' => [$tag->id]]]) }}"
|
||||
>
|
||||
<div
|
||||
class="flex flex-1 items-center p-0 m-0 text-center align-baseline border-0 border-solid"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
@foreach($libraryItems as $libraryItem)
|
||||
<div wire:key="library_item_{{ $libraryItem->id }}"
|
||||
class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-lg">
|
||||
class="flex flex-col overflow-hidden rounded-lg shadow-[#F7931A] shadow-sm">
|
||||
<div class="flex-shrink-0">
|
||||
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}">
|
||||
<img class="h-48 w-full object-cover"
|
||||
@@ -20,30 +20,30 @@
|
||||
alt="{{ $libraryItem->name }}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col justify-between bg-white p-6">
|
||||
<div class="flex flex-1 flex-col justify-between bg-21gray p-6">
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-indigo-600">
|
||||
<p class="text-sm font-medium text-amber-600">
|
||||
<div
|
||||
class="">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
|
||||
class="text-amber-500">{{ $libraryItem->tags->pluck('name')->join(', ') }}</div>
|
||||
</p>
|
||||
<a href="{{ route('article.view', ['libraryItem' => $libraryItem]) }}"
|
||||
class="mt-2 block">
|
||||
<p class="text-xl font-semibold text-gray-900">{{ $libraryItem->name }}</p>
|
||||
<p class="mt-3 text-base text-gray-500">{{ $libraryItem->excerpt }}</p>
|
||||
<p class="text-xl font-semibold text-gray-200">{{ $libraryItem->name }}</p>
|
||||
<p class="mt-3 text-base text-gray-300">{{ $libraryItem->excerpt }}</p>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-6 flex items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div>
|
||||
<span class="sr-only">{{ $libraryItem->lecturer->name }}</span>
|
||||
<span class="sr-only text-gray-200">{{ $libraryItem->lecturer->name }}</span>
|
||||
<img class="h-10 w-10 rounded-full"
|
||||
src="{{ $libraryItem->lecturer->getFirstMediaUrl('avatar') }}"
|
||||
alt="{{ $libraryItem->lecturer->name }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<div class="">{{ $libraryItem->lecturer->name }}</div>
|
||||
<p class="text-sm font-medium text-gray-200">
|
||||
<div class="text-gray-200">{{ $libraryItem->lecturer->name }}</div>
|
||||
</p>
|
||||
<div class="flex space-x-1 text-sm text-gray-500">
|
||||
<time datetime="2020-03-16">{{ $libraryItem->created_at->asDateTime() }}</time>
|
||||
|
||||
@@ -2,10 +2,17 @@
|
||||
<div class="bg-21gray">
|
||||
<div class="mx-auto max-w-7xl py-4 px-6 lg:px-8 overflow-hidden">
|
||||
<div class="flex items-center justify-end">
|
||||
<x-button lg :href="route('article.overview')">
|
||||
<i class="fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back to overview') }}
|
||||
</x-button>
|
||||
@if($libraryItem->type === 'markdown_article')
|
||||
<x-button lg :href="route('article.overview')">
|
||||
<i class="fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back to overview') }}
|
||||
</x-button>
|
||||
@else
|
||||
<x-button lg :href="route('library.table.libraryItems', ['country' => 'de'])">
|
||||
<i class="fa-thin fa-arrow-left"></i>
|
||||
{{ __('Back to overview') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -55,9 +62,53 @@
|
||||
</div>
|
||||
<div
|
||||
class="prose prose-invert mx-auto mt-5 text-gray-100 lg:col-start-1 lg:row-start-1 lg:max-w-none">
|
||||
<x-markdown>
|
||||
{!! $libraryItem->value !!}
|
||||
</x-markdown>
|
||||
<div class="flex flex-col space-y-1">
|
||||
@if(str($libraryItem->value)->contains('http'))
|
||||
<x-button lg amber :href="$libraryItem->value" target="_blank">
|
||||
<i class="fa fa-thin fa-book-open mr-2"></i>
|
||||
{{ __('Open') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($libraryItem->type === 'downloadable_file')
|
||||
<x-button lg amber :href="$row->getFirstMediaUrl('single_file')" target="_blank">
|
||||
<i class="fa fa-thin fa-download mr-2"></i>
|
||||
{{ __('Download') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($libraryItem->type === 'podcast_episode')
|
||||
<x-button lg amber :href="$libraryItem->episode->data['enclosureUrl']" target="_blank">
|
||||
<i class="fa fa-thin fa-headphones mr-2"></i>
|
||||
{{ __('Listen') }}
|
||||
</x-button>
|
||||
@endif
|
||||
@if($libraryItem->type !== 'markdown_article')
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ url()->route('library.table.libraryItems', ['country' => 'de', 'table' => ['filters' => ['id' => $libraryItem->id]]]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Share url copied!') }}',icon:'success'});"
|
||||
lg black>
|
||||
<i class="fa fa-thin fa-copy mr-2"></i>
|
||||
{{ __('Share link') }}
|
||||
</x-button>
|
||||
@else
|
||||
<x-button
|
||||
x-data="{
|
||||
textToCopy: '{{ url()->route('library.table.libraryItems', ['country' => 'de', 'table' => ['filters' => ['id' => $libraryItem->id]]]) }}',
|
||||
}"
|
||||
@click.prevent="window.navigator.clipboard.writeText(textToCopy);window.$wireui.notify({title:'{{ __('Share url copied!') }}',icon:'success'});"
|
||||
xs black>
|
||||
<i class="fa fa-thin fa-copy mr-2"></i>
|
||||
{{ __('Share link') }}
|
||||
</x-button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($libraryItem->type === 'markdown_article')
|
||||
<x-markdown>
|
||||
{!! $libraryItem->value !!}
|
||||
</x-markdown>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user