w33b/hstream
1
0
Fork 1
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Update hentai info design & Remove livewire view count

Browse Source
This commit is contained in:
w33b
2026-05-24 15:52:22 +02:00
parent 9fc9e8ed10
commit 3574d20fae
6 changed files with 234 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
resources/views/stream/partials/gallery.blade.php
View File

@@ -1,58 +1,66 @@
<div class="bg-transparent rounded-lg">
<div class="px-1 sm:px-2">
<p class="leading-normal font-bold text-lg text-gray-900 dark:text-gray-200">
<div>
<div class="mb-5 flex items-center justify-between">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
{{ __('stream.gallery') }}
</p>
</h2>
@if ($gallery->count() > 5)
<button
id="galleryToggle"
class="text-sm font-semibold text-gray-900 dark:text-white transition">
{{ __('home.show-more') }}
</button>
@endif
</div>
@if ($gallery->count() > 5)
<div class="grid grid-rows-1 w-30 text-left">
<ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
@php $counter = 0; @endphp
@foreach($gallery as $image)
@php $counter++; @endphp
<li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
@if ($counter > 5)
<div class="!visible hidden" id="collapseGallery" data-te-collapse-item>
@else
<div>
@endif
<div class="py-2 mt-2">
<img onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
</div>
</div>
</li>
@endforeach
</ul>
</div>
<div class="grid grid-rows-1 w-30 text-center">
<a id="galleryShowMore" data-te-collapse-init data-te-ripple-init data-te-ripple-color="light" href="#collapseGallery" role="button" aria-expanded="false" aria-controls="collapseGallery" class="text-sm float-right cursor-pointer text-rose-600">{{ __('home.show-more') }}</a>
</div>
<script>
var state = 0;
function toggleGallery() {
if (state == 0) {
document.getElementById('galleryShowMore').innerText = "{{ __('stream.show-less') }}";
state = 1;
} else {
document.getElementById('galleryShowMore').innerText = "{{ __('home.show-more') }}";
state = 0;
}
}
document.getElementById('galleryShowMore').addEventListener('click', toggleGallery);
</script>
@else
<div class="grid grid-rows-1 w-30 text-left">
<ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">
@php $counter = 0; @endphp
@foreach($gallery as $image)
@php $counter++; @endphp
<li class="inline-block m-1 w-[45%] sm:w-[45%] md:w-[20%] xl:w-[18%]">
<div class="py-2 mt-2">
<img onClick="(function(){player.play(); player.pause(); })();" src="{{ $image->thumbnail_url }}" data-te-img="{{ $image->image_url }}" alt="{{ $episode->title }} - {{ $episode->episode }} - Screenshot {{ $counter }}" class="relative block items-center h-full w-full rounded-lg tracking-widest transition ease-in-out duration-150 cursor-zoom-in shadow-sm data-[te-lightbox-disabled]:cursor-auto" />
<div
data-te-lightbox-init
class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
@foreach($gallery as $index => $image)
<div class="{{ $index >= 5 ? 'hidden extra-gallery-item' : '' }}">
<div
class="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-neutral-700 dark:bg-neutral-800">
<img
onClick="(function(){player.play(); player.pause(); })();"
src="{{ $image->thumbnail_url }}"
data-te-img="{{ $image->image_url }}"
alt="{{ $episode->title }} - Screenshot {{ $index + 1 }}"
class="aspect-video w-full cursor-zoom-in object-cover transition duration-300 group-hover:scale-105"
>
</div>
</li>
@endforeach
</ul>
</div>
@endforeach
</div>
@endif
</div>
@if ($gallery->count() > 5)
<script>
const toggleBtn = document.getElementById('galleryToggle');
const hiddenItems = document.querySelectorAll('.extra-gallery-item');
let expanded = false;
toggleBtn.addEventListener('click', () => {
expanded = !expanded;
hiddenItems.forEach(item => {
item.classList.toggle('hidden');
});
toggleBtn.innerText = expanded
? "{{ __('stream.show-less') }}"
: "{{ __('home.show-more') }}";
});
</script>
@endif