Add back to top button

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>