From 9f11ba1f52d3aa3b88cb14ed9f81f742cd37e257 Mon Sep 17 00:00:00 2001
From: vhaudiquet <vhaudiquet343@hotmail.fr>
Date: Fri, 6 Dec 2024 22:17:12 +0100
Subject: [PATCH] Better mobile scroll

---
 frontend/components/rune/Selector.vue | 24 ++++++++++++++----------
 frontend/pages/champion/[alias].vue   |  5 +++--
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/components/rune/Selector.vue b/frontend/components/rune/Selector.vue
index 402e109..cadcaf4 100644
--- a/frontend/components/rune/Selector.vue
+++ b/frontend/components/rune/Selector.vue
@@ -62,14 +62,16 @@ function runeSelect(index: number) {
         :secondaryStyleId="runes[currentlySelectedPage].secondaryStyle" 
         :selectionIds="runes[currentlySelectedPage].selections" />
     <div style="display: flex; margin-top: 20px; justify-content: center;">
-    <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
-        <div class="rs-styles-container">
-        <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
-            style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
-        <NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
-            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
-        <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
-            style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
+    <div v-for="(_, i) in runes" @click="runeSelect(i)">
+        <div :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')">
+            <div class="rs-styles-container">
+            <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
+                style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
+            <NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
+                width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
+            <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
+                style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
+            </div>
         </div>
         <h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
     </div>
@@ -100,7 +102,8 @@ function runeSelect(index: number) {
 }
 .rs-pickrate {
     text-align: center; 
-    margin-top: 10px;
+    margin-top: -40px;
+    padding-bottom: 40px;
 }
 @media only screen and (max-width: 650px) {
     .rune-selector-entry {
@@ -114,7 +117,8 @@ function runeSelect(index: number) {
         margin-top: 17px;
     }
     .rs-pickrate {
-        margin-top: 20px;
+        margin-top: 5px;
+        padding-bottom: 0px;
     }
     .rs-style-img {
         width: 24px;
diff --git a/frontend/pages/champion/[alias].vue b/frontend/pages/champion/[alias].vue
index 9433a07..9f33529 100644
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -60,7 +60,7 @@ function updateState(newState : string, newLane : number) {
 <style>
 #alias-content-wrapper {
     display: flex; 
-    min-height: 100vh; 
+    /* min-height: 100vh;  */
     align-items: stretch; 
     width: 100%;
 
@@ -83,7 +83,8 @@ function updateState(newState : string, newLane : number) {
 @media only screen and (max-width: 1200px) {
     #alias-content-wrapper {
         flex-direction: column;
-        margin-bottom: 120px;
+        padding-bottom: 120px;
+        margin-top: 20px;
     }
 }
 </style>
\ No newline at end of file