Merge pull request #3903 from Roardom/featured-refactor

(Update) Condense featured torrents slider
HDInnovations · Jun 4, 2024 · 5cb989a · 5cb989a
2 parents 7fe71e5 + 8b37bdf
commit 5cb989a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 50 deletions.
diff --git a/resources/sass/components/_featured-pane.scss b/resources/sass/components/_featured-pane.scss
@@ -34,28 +34,13 @@
     flex-direction: column;
     align-items: center;
     gap: 16px;
-    padding: 16px;
+    padding: 16px 16px 0 16px;
 }
 
 .featured-carousel__featured-until,
 .featured-carousel__featured-by {
     text-align: center;
     font-size: 11.5px;
+    margin: 0;
 }
 
-.featured-carousel__nav {
-    display: flex;
-}
-
-.featured-carousel__next,
-.featured-carousel__previous {
-    flex-grow: 1;
-    background-color: var(--panel-head-bg);
-    padding: 10px;
-    border: none;
-}
-
-.featured-carousel__next:hover,
-.featured-carousel__previous:hover {
-    background-color: #777;
-}
diff --git a/resources/views/blocks/featured.blade.php b/resources/views/blocks/featured.blade.php
@@ -1,20 +1,48 @@
 @if ($featured->isNotEmpty())
-    <section class="panelV2 blocks__featured">
-        <h2 class="panel__heading">
-            <i class="{{ config('other.font-awesome') }} fa-star"></i>
-            {{ __('blocks.featured-torrents') }}
-        </h2>
-        <div x-data>
+    <section class="panelV2 blocks__featured" x-data>
+        <header class="panel__header">
+            <h2 class="panel__heading">
+                <i class="{{ config('other.font-awesome') }} fa-star"></i>
+                {{ __('blocks.featured-torrents') }}
+            </h2>
+            <div class="panel__actions">
+                <div class="panel__action">
+                    <button
+                        class="form__standard-icon-button"
+                        x-on:click="
+                            $refs.featured.scrollLeft == 16
+                                ? ($refs.featured.scrollLeft = $refs.featured.scrollWidth)
+                                : ($refs.featured.scrollLeft -= ($refs.featured.children[0].offsetWidth + 16) / 2 + 2)
+                        "
+                    >
+                        <i class="{{ \config('other.font-awesome') }} fa-angle-left"></i>
+                    </button>
+                </div>
+                <div class="panel__action">
+                    <button
+                        class="form__standard-icon-button"
+                        x-on:click="
+                            $refs.featured.scrollLeft == $refs.featured.scrollWidth - $refs.featured.offsetWidth - 16
+                                ? ($refs.featured.scrollLeft = 0)
+                                : ($refs.featured.scrollLeft += ($refs.featured.children[0].offsetWidth + 16) / 2 + 2)
+                        "
+                    >
+                        <i class="{{ \config('other.font-awesome') }} fa-angle-right"></i>
+                    </button>
+                </div>
+            </div>
+        </header>
+        <div>
             <ul
                 class="featured-carousel"
                 x-ref="featured"
                 x-init="
                     setInterval(function () {
-                        $el.parentNode.matches(':hover')
-                            ? null
-                            : $el.scrollLeft == $el.scrollWidth - $el.offsetWidth - 16
-                              ? ($el.scrollLeft = 0)
-                              : ($el.scrollLeft += ($el.children[0].offsetWidth + 16) / 2 + 2);
+                        if (! $root.matches(':hover')) {
+                            $el.scrollLeft == $el.scrollWidth - $el.offsetWidth - 16
+                                ? ($el.scrollLeft = 0)
+                                : ($el.scrollLeft += ($el.children[0].offsetWidth + 16) / 2 + 2);
+                        }
                     }, 5000)
                 "
             >
@@ -59,28 +87,6 @@ class="featured-carousel"
                     </li>
                 @endforeach
             </ul>
-            <nav class="featured-carousel__nav">
-                <button
-                    class="featured-carousel__previous"
-                    x-on:click="
-                        $refs.featured.scrollLeft == 16
-                            ? ($refs.featured.scrollLeft = $refs.featured.scrollWidth)
-                            : ($refs.featured.scrollLeft -= ($refs.featured.children[0].offsetWidth + 16) / 2 + 2)
-                    "
-                >
-                    <i class="{{ \config('other.font-awesome') }} fa-angle-left"></i>
-                </button>
-                <button
-                    class="featured-carousel__next"
-                    x-on:click="
-                        $refs.featured.scrollLeft == $refs.featured.scrollWidth - $refs.featured.offsetWidth - 16
-                            ? ($refs.featured.scrollLeft = 0)
-                            : ($refs.featured.scrollLeft += ($refs.featured.children[0].offsetWidth + 16) / 2 + 2)
-                    "
-                >
-                    <i class="{{ \config('other.font-awesome') }} fa-angle-right"></i>
-                </button>
-            </nav>
         </div>
     </section>
 @endif