Finish share button and added gallery buttons

This commit is contained in:
2026-07-02 11:40:38 +02:00
parent 9f7104fcf3
commit ca7799d1f3
6 changed files with 219 additions and 27 deletions

View File

@@ -7,9 +7,16 @@
{{ \Diglactic\Breadcrumbs\Breadcrumbs::render() }}
<article id="entry-container">
<div class="entry-header">
<div class="entry-cover">
<div class="entry-cover" x-data="{open: false}">
@if( $entry->main_image )
<img src="{{ Storage::url($entry->main_image) }}">
<img src="{{ Storage::url($entry->main_image) }}" @click="open = true;">
<div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
@keydown.escape.window="open = false" x-cloak>
<span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
<div class="gallery-modal-content" @click.stop>
<img src="{{ Storage::url($entry->main_image) }}">
</div>
</div>
@else
<div class="entry-cover-placeholder">
<i data-lucide="image" size="48"></i>
@@ -208,6 +215,7 @@
<i data-lucide="flag"></i> Report / Claim Ownership
</a>
@endauth
<x-share-rhpz-url :entry="$entry" />
</div>
</div>
</div>
@@ -240,25 +248,57 @@
</ul>
</div>
@endif
{{-- Gallery --}}
@if( $entry->gallery->isNotEmpty() )
<div x-data="{ open: false, currentImage: ''}" x-cloak>
<div x-data="{
images: [
@foreach( $entry->gallery as $galleryItem )
'{{ Storage::url($galleryItem->image) }}',
@endforeach
],
currentIndex: 0,
open: false,
get currentImage() { return this.images[this.currentIndex]; },
get hasPrev() { return this.currentIndex > 0; },
get hasNext() { return this.currentIndex < this.images.length - 1; },
openAt(index) { this.currentIndex = index; this.open = true; },
prev() { if (this.hasPrev) this.currentIndex--; },
next() { if (this.hasNext) this.currentIndex++; }
}" x-cloak>
<x-entry-section-title label="Gallery" icon="images"/>
<div class="entry-gallery">
@foreach( $entry->gallery as $galleryItem )
<div class="entry-gallery-item"
@click="currentImage = '{{ Storage::url($galleryItem->image) }}'; open = true; "><img
src="{{ Storage::url($galleryItem->image) }}"></div>
<div class="entry-gallery-item" @click="openAt({{ $loop->index }})">
<img src="{{ Storage::url($galleryItem->image) }}">
</div>
@endforeach
</div>
<div class="gallery-modal" x-show="open" x-transition.opacity.duration.300ms @click="open = false"
@keydown.escape.window="open = false">
@keydown.escape.window="open = false"
@keydown.arrow-left.window="prev()"
@keydown.arrow-right.window="next()"
x-cloak>
<span class="gallery-modal-close" @click="open = false;"><i data-lucide="x"></i></span>
<span class="gallery-modal-arrow gallery-modal-arrow-prev" x-show="hasPrev" @click.stop="prev()">
<i data-lucide="chevron-left"></i>
</span>
<div class="gallery-modal-content" @click.stop>
<img :src="currentImage">
</div>
<span class="gallery-modal-arrow gallery-modal-arrow-next" x-show="hasNext" @click.stop="next()">
<i data-lucide="chevron-right"></i>
</span>
</div>
</div>
@endif
{{-- End gallery --}}
@if( $entry->relevant_link )
<x-entry-section-title label="Relevant Link" icon="link"/>
<div class="entry-description">