From f8022b3f186af3e6da8bd2c858a1563ffe73dc5b Mon Sep 17 00:00:00 2001 From: w33b Date: Wed, 27 May 2026 17:12:13 +0200 Subject: [PATCH] Use CSS classes to hide n-th elements instead of JS --- package-lock.json | 18 ++--- resources/js/responsive.js | 68 ------------------- resources/views/home/index.blade.php | 2 - .../views/home/partials/random.blade.php | 4 +- .../home/partials/tab/template.blade.php | 33 ++++++--- vite.config.js | 1 - 6 files changed, 33 insertions(+), 93 deletions(-) delete mode 100644 resources/js/responsive.js diff --git a/package-lock.json b/package-lock.json index 4178523..78f56f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3188,6 +3188,15 @@ "postcss": "^8.0.9" } }, + "node_modules/tw-elements/node_modules/yaml": { + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", + "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", + "license": "ISC", + "engines": { + "node": ">= 6" + } + }, "node_modules/ua-parser-js": { "version": "1.0.41", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz", @@ -3430,15 +3439,6 @@ "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz", "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==", "license": "MIT" - }, - "node_modules/yaml": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz", - "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==", - "license": "ISC", - "engines": { - "node": ">= 6" - } } } } diff --git a/resources/js/responsive.js b/resources/js/responsive.js deleted file mode 100644 index bb56035..0000000 --- a/resources/js/responsive.js +++ /dev/null @@ -1,68 +0,0 @@ -function updateGrid(grid) { - // Skip hidden grids - if (grid.offsetParent === null) { - return; - } - - const items = [...grid.querySelectorAll('.episode-item')]; - - if (!items.length) { - return; - } - - // Reset visibility first - items.forEach(item => { - item.style.display = ''; - }); - - // Determine actual column count - const firstTop = items[0].offsetTop; - - let columns = 0; - - for (const item of items) { - if (item.offsetTop !== firstTop) { - break; - } - - columns++; - } - - const rows = parseInt(grid.dataset.rows || '2', 10); - - const visibleItems = columns * rows; - - items.forEach((item, index) => { - item.style.display = index < visibleItems - ? '' - : 'none'; - }); -} - -function updateAllEpisodeGrids() { - document.querySelectorAll('.episode-grid').forEach(updateGrid); -} - -const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - if (entry.isIntersecting) { - updateGrid(entry.target); - } - }); -}); - -document.querySelectorAll('.episode-grid').forEach(grid => { - observer.observe(grid); -}); - -let resizeTimeout; - -window.addEventListener('resize', () => { - clearTimeout(resizeTimeout); - - resizeTimeout = setTimeout(() => { - updateAllEpisodeGrids(); - }, 100); -}); - -window.addEventListener('load', updateAllEpisodeGrids); diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php index cc0c718..4dcb7e8 100644 --- a/resources/views/home/index.blade.php +++ b/resources/views/home/index.blade.php @@ -28,6 +28,4 @@
@include('home.partials.comments')
- - @vite(['resources/js/responsive.js']) \ No newline at end of file diff --git a/resources/views/home/partials/random.blade.php b/resources/views/home/partials/random.blade.php index 2b3366c..19bb641 100644 --- a/resources/views/home/partials/random.blade.php +++ b/resources/views/home/partials/random.blade.php @@ -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
- @include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false, 'rowsCount' => 1]) + @include('home.partials.tab.template', ['episodes' => $random, 'isThumbnail' => false])
diff --git a/resources/views/home/partials/tab/template.blade.php b/resources/views/home/partials/tab/template.blade.php index 9ef9600..052dcf9 100644 --- a/resources/views/home/partials/tab/template.blade.php +++ b/resources/views/home/partials/tab/template.blade.php @@ -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)
+@else +
+@endif @foreach ($episodes->take($limit) as $ep) @php $episode = isset($popularView) diff --git a/vite.config.js b/vite.config.js index acf5e54..80f511a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -21,7 +21,6 @@ export default defineConfig({ 'resources/js/admin-edit.js', 'resources/js/admin-subtitles.js', 'resources/js/preview.js', - 'resources/js/responsive.js', 'resources/js/stats.js' ], refresh: true,