Finish share button and added gallery buttons
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user