From a63ac8ca47a4dfcc33c4d8f9a617c1cebffe3bc0 Mon Sep 17 00:00:00 2001
From: Blossomi Shymae <87099578+BlossomiShymae@users.noreply.github.com>
Date: Fri, 11 Oct 2024 16:39:30 -0500
Subject: [PATCH] Add back to top button

---
 components/BackToTopButton.vue   | 13 +++++++++++
 pages/champions/index.vue        | 37 ++++++++++++++++++--------------
 pages/cherry-augments/index.vue  |  6 +++++-
 pages/companions/index.vue       |  4 ++++
 pages/items/index.vue            | 32 ++++++++++++++++-----------
 pages/loots/index.vue            |  6 +++++-
 pages/summoner-emotes/index.vue  |  3 +++
 pages/summoner-icons/index.vue   |  4 ++++
 pages/tft-damage-skins/index.vue |  4 ++++
 pages/tft-map-skins/index.vue    |  3 +++
 pages/ward-skins/index.vue       |  6 +++++-
 11 files changed, 86 insertions(+), 32 deletions(-)
 create mode 100644 components/BackToTopButton.vue

diff --git a/components/BackToTopButton.vue b/components/BackToTopButton.vue
new file mode 100644
index 0000000..642b3a6
--- /dev/null
+++ b/components/BackToTopButton.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const scrollTop = () => {
+  window.scrollTo(0, 0);
+};
+</script>
+
+<template>
+  <div>
+    <NuxtLink class="btn app-background text-light" @click="scrollTop">
+      <MaterialIcon name="arrow-up" :size="24"/> Back to top
+    </NuxtLink>
+  </div>
+</template>
\ No newline at end of file
diff --git a/pages/champions/index.vue b/pages/champions/index.vue
index 4ea2132..de666e0 100644
--- a/pages/champions/index.vue
+++ b/pages/champions/index.vue
@@ -15,24 +15,29 @@ watch(currentLocale, async () => {
 </script>
 
 <template>
-  <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
-    <div v-for="summary in summaries" :id="`${summary.id}`" 
-        style="width: 200px;"
-        data-aos="zoom-out"
-        data-aos-duration="500">
-        <NuxtLink :to="`/champions/${summary.id}`">
-            <div class="ratio ratio-16x9 position-relative">
-                <img class="object-fit-cover rounded" 
-                    :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
-                    loading="lazy"/>
-                <div class="position-absolute z-1 d-flex flex-column justify-content-end">
-                    <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
-                        <span class="fs-5 fw-light">{{ summary.name }}</span>
-                        <span class="fw-bold">{{ summary.id }}</span>
+  <div class="d-flex flex-column gap-4">
+    <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
+        <div v-for="summary in summaries" :id="`${summary.id}`" 
+            style="width: 200px;"
+            data-aos="zoom-out"
+            data-aos-duration="500">
+            <NuxtLink :to="`/champions/${summary.id}`">
+                <div class="ratio ratio-16x9 position-relative">
+                    <img class="object-fit-cover rounded" 
+                        :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
+                        loading="lazy"/>
+                    <div class="position-absolute z-1 d-flex flex-column justify-content-end">
+                        <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
+                            <span class="fs-5 fw-light">{{ summary.name }}</span>
+                            <span class="fw-bold">{{ summary.id }}</span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </NuxtLink>
+            </NuxtLink>
+        </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
     </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/pages/cherry-augments/index.vue b/pages/cherry-augments/index.vue
index 7fe623e..19a98c0 100644
--- a/pages/cherry-augments/index.vue
+++ b/pages/cherry-augments/index.vue
@@ -23,7 +23,7 @@ const filteredCherryAugments = computed(() => {
 </script>
 
 <template>
-  <div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-column gap-4">
     <div class="d-flex flex-row justify-content-end gap-2">
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ cherryAugments.length }} augments</span>
@@ -50,5 +50,9 @@ const filteredCherryAugments = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/companions/index.vue b/pages/companions/index.vue
index 4d3a0f2..6837ed7 100644
--- a/pages/companions/index.vue
+++ b/pages/companions/index.vue
@@ -57,5 +57,9 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/items/index.vue b/pages/items/index.vue
index 0c6addb..58085b4 100644
--- a/pages/items/index.vue
+++ b/pages/items/index.vue
@@ -10,21 +10,27 @@ watch(currentLocale, async () => {
 </script>
 
 <template>
-  <div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
-    <div v-for="item in items" :id="`${item.id}`"
-        style="width: 64px;"
-        data-aos="zoom-out"
-        data-aos-duration="500">
-        <NuxtLink :to="`/items/${item.id}`">
-            <div class="ratio ratio-1x1 position-relative">
-                <img class="rounded" :src="item.getIcon('latest')" loading="lazy"/>
-                <div class="position-absolute z-1 d-flex flex-column justify-content-end">
-                    <div class="d-inline-flex justify-content-end align-items-center">
-                        <span class="fw-bold bg-dark-subtle rounded m-1" style="font-size: 8pt; padding: 1px;">{{ item.id }}</span>
+  <div class="d-flex flex-column gap-4">
+    <div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
+        <div v-for="item in items" :id="`${item.id}`"
+            style="width: 64px;"
+            data-aos="zoom-out"
+            data-aos-duration="500">
+            <NuxtLink :to="`/items/${item.id}`">
+                <div class="ratio ratio-1x1 position-relative">
+                    <img class="rounded" :src="item.getIcon('latest')" loading="lazy"/>
+                    <div class="position-absolute z-1 d-flex flex-column justify-content-end">
+                        <div class="d-inline-flex justify-content-end align-items-center">
+                            <span class="fw-bold bg-dark-subtle rounded m-1" style="font-size: 8pt; padding: 1px;">{{ item.id }}</span>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </NuxtLink>
+            </NuxtLink>
+        </div>
+    </div>
+
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
     </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/loots/index.vue b/pages/loots/index.vue
index 272e535..8e46b62 100644
--- a/pages/loots/index.vue
+++ b/pages/loots/index.vue
@@ -46,7 +46,7 @@ watch(currentLocale, async() => {
 </script>
 
 <template>  
-  <div class="d-flex flex-column gap-3">
+  <div class="d-flex flex-column gap-4">
     <div class="btn-group flex-wrap gap-2">
       <a class="btn btn-outline-dark" @click="clearFilter()">
         <MaterialIcon name="backspace-outline" :size="24" />
@@ -89,5 +89,9 @@ watch(currentLocale, async() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/summoner-emotes/index.vue b/pages/summoner-emotes/index.vue
index 8842f40..e303b0b 100644
--- a/pages/summoner-emotes/index.vue
+++ b/pages/summoner-emotes/index.vue
@@ -51,5 +51,8 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/summoner-icons/index.vue b/pages/summoner-icons/index.vue
index d2417a8..db8e7b5 100644
--- a/pages/summoner-icons/index.vue
+++ b/pages/summoner-icons/index.vue
@@ -59,5 +59,9 @@ const p = computed(() => {
             </div>
         </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/tft-damage-skins/index.vue b/pages/tft-damage-skins/index.vue
index 17697cb..6a8359e 100644
--- a/pages/tft-damage-skins/index.vue
+++ b/pages/tft-damage-skins/index.vue
@@ -52,5 +52,9 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/tft-map-skins/index.vue b/pages/tft-map-skins/index.vue
index 12787e7..49fd857 100644
--- a/pages/tft-map-skins/index.vue
+++ b/pages/tft-map-skins/index.vue
@@ -54,5 +54,8 @@ const p = computed(() => {
         </div>
       </div>
     </div>
+    <div class="d-flex justify-content-center w-100">
+      <BackToTopButton/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/ward-skins/index.vue b/pages/ward-skins/index.vue
index 7e92e80..8db7841 100644
--- a/pages/ward-skins/index.vue
+++ b/pages/ward-skins/index.vue
@@ -30,7 +30,7 @@ const rarities = {
 </script>
 
 <template>
-  <div class="d-flex flex-column gap-2">
+  <div class="d-flex flex-column gap-4">
       <div class="d-flex gap-2 justify-content-end">
         <Card class="d-flex justify-content-center align-items-center me-auto">
             <span>{{ skins.length }} skins</span>
@@ -66,5 +66,9 @@ const rarities = {
             </div>
         </div>
       </div>
+
+      <div class="d-flex justify-content-center w-100">
+        <BackToTopButton/>
+      </div>
   </div>
 </template>
\ No newline at end of file