From a61b4f8085b18dc3d477f692335e67acf7ae4c3c Mon Sep 17 00:00:00 2001
From: Rico van Zelst <ricovzelst@pm.me>
Date: Wed, 8 Nov 2023 15:05:16 +0100
Subject: [PATCH] feat: sideways scroll improvement

---
 resources/js/app.js                                   |  1 +
 .../views/components/champions/grid_info.blade.php    | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/js/app.js b/resources/js/app.js
index 1e745ca..2177a4f 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,2 +1,3 @@
 import "./bootstrap";
 import "flowbite";
+
diff --git a/resources/views/components/champions/grid_info.blade.php b/resources/views/components/champions/grid_info.blade.php
index 431db71..9e02004 100644
--- a/resources/views/components/champions/grid_info.blade.php
+++ b/resources/views/components/champions/grid_info.blade.php
@@ -112,7 +112,7 @@
                 <div class="p-4">
                     <h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
                         {{$champion->name}} Skins ({{count($champion->skins)}}) </h4>
-                    <div class="overflow-x-scroll mt-2.5">
+                    <div id="skinsElement" class="overflow-x-scroll mt-2.5">
                         <div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
                             @foreach($champion->skins as $key => $skin)
                                 <div class="flex flex-col">
@@ -130,4 +130,13 @@
                 </div>
             </div>
         </div>
+    </div>
 </section>
+<script>
+    // !TODO: Move this to its own file.
+    skinsElement.addEventListener('wheel', (ev) => {
+        ev.preventDefault();  // stop scrolling in another direction
+        skinsElement.scrollLeft += (ev.deltaY + ev.deltaX);
+    });
+</script>
+