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

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"
-            }
         }
     }
 }

resources/js/responsive.js

@@ -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);

resources/views/home/index.blade.php

@@ -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

@@ -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

@@ -1,23 +1,34 @@
-@props([
+@props(['isThumbnail'])
-    'isThumbnail',
-    'rowsCount' => 2,
-])
 
 @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 }}"
+  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
-    data-rows="{{ $rowsCount }}"
+         [&>.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)

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,