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

Use CSS classes to hide n-th elements instead of JS

Browse Source
This commit is contained in:
w33b
2026-05-27 17:12:13 +02:00
parent 57d1ec34c3
commit f8022b3f18
6 changed files with 33 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/home/index.blade.php
-2
View File
@@ -28,6 +28,4 @@
<div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%] pb-2">
@include('home.partials.comments')
</div>
@vite(['resources/js/responsive.js'])
</x-app-layout>
resources/views/home/partials/random.blade.php
+2 -2
View File
@@ -4,10 +4,10 @@
@php
$random = \cache()->remember('random_home', 300, function () {
return \App\Models\Episode::inRandomOrder()->limit(7)->get(); ;
return \App\Models\Episode::inRandomOrder()->limit(16)->get(); ;
});
@endphp
<div class="mb-6">
@include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false, 'rowsCount' => 1])
@include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false])
</div>
resources/views/home/partials/tab/template.blade.php
+22 -11
View File
@@ -1,23 +1,34 @@
@props([
'isThumbnail',
'rowsCount' => 2,
])
@props(['isThumbnail'])
@php
$gridClasses = $isThumbnail
? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4'
: 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 3xl:grid-cols-7';
// Render enough items for largest possible layout
$limit = 24;
$limit = 16;
$view = $isThumbnail ? 'thumbnail' : 'poster';
@endphp
@if ($isThumbnail)
<div
class="episode-grid grid {{ $gridClasses }}"
data-rows="{{ $rowsCount }}"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5
[&>.episode-item]:hidden
[&>.episode-item:nth-child(-n+8)]:block
md:[&>.episode-item:nth-child(-n+8)]:block
lg:[&>.episode-item:nth-child(-n+9)]:block
xl:[&>.episode-item:nth-child(-n+9)]:block
2xl:[&>.episode-item:nth-child(-n+12)]:block
3xl:[&>.episode-item:nth-child(-n+15)]:block"
>
@else
<div
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5 3xl:grid-cols-8
[&>.episode-item]:hidden
[&>.episode-item:nth-child(-n+12)]:block
md:[&>.episode-item:nth-child(-n+12)]:block
xl:[&>.episode-item:nth-child(-n+12)]:block
2xl:[&>.episode-item:nth-child(-n+15)]:block
3xl:[&>.episode-item:nth-child(-n+16)]:block"
>
@endif
@foreach ($episodes->take($limit) as $ep)
@php
$episode = isset($popularView)