Archive/clean-cuts
1
0
Fork 0
mirror of https://github.com/BlossomiShymae/clean-cuts.git synced 2025-12-06 10:10:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add back to top button

Browse Source
This commit is contained in:
Blossomi Shymae
2024-10-11 16:39:30 -05:00
parent 87f5d432b2
commit a63ac8ca47
11 changed files with 86 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/BackToTopButton.vue Normal file
View File

@@ -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>

37
pages/champions/index.vue
View File

@@ -15,24 +15,29 @@ watch(currentLocale, async () => {
</script> </script>
<template> <template>
<div class="d-flex flex-row flex-wrap gap-4 justify-content-center"> <div class="d-flex flex-column gap-4">
<div v-for="summary in summaries" :id="`${summary.id}`" <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
style="width: 200px;" <div v-for="summary in summaries" :id="`${summary.id}`"
data-aos="zoom-out" style="width: 200px;"
data-aos-duration="500"> data-aos="zoom-out"
<NuxtLink :to="`/champions/${summary.id}`"> data-aos-duration="500">
<div class="ratio ratio-16x9 position-relative"> <NuxtLink :to="`/champions/${summary.id}`">
<img class="object-fit-cover rounded" <div class="ratio ratio-16x9 position-relative">
:src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})" <img class="object-fit-cover rounded"
loading="lazy"/> :src="skins.find(x => (x.id / 1000) == summary.id)?.getTile({locale: currentLocale, version: 'latest'})"
<div class="position-absolute z-1 d-flex flex-column justify-content-end"> loading="lazy"/>
<div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;"> <div class="position-absolute z-1 d-flex flex-column justify-content-end">
<span class="fs-5 fw-light">{{ summary.name }}</span> <div class="d-inline-flex justify-content-between align-items-center px-2" style="background: #0008;">
<span class="fw-bold">{{ summary.id }}</span> <span class="fs-5 fw-light">{{ summary.name }}</span>
<span class="fw-bold">{{ summary.id }}</span>
</div>
</div> </div>
</div> </div>
</div> </NuxtLink>
</NuxtLink> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div> </div>
</div>
</template> </template>

6
pages/cherry-augments/index.vue
View File

@@ -23,7 +23,7 @@ const filteredCherryAugments = computed(() => {
</script> </script>
<template> <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"> <div class="d-flex flex-row justify-content-end gap-2">
<Card class="d-flex justify-content-center align-items-center me-auto"> <Card class="d-flex justify-content-center align-items-center me-auto">
<span>{{ cherryAugments.length }} augments</span> <span>{{ cherryAugments.length }} augments</span>
@@ -50,5 +50,9 @@ const filteredCherryAugments = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

4
pages/companions/index.vue
View File

@@ -57,5 +57,9 @@ const p = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

32
pages/items/index.vue
View File

@@ -10,21 +10,27 @@ watch(currentLocale, async () => {
</script> </script>
<template> <template>
<div class="d-flex flex-row flex-wrap gap-2 justify-content-center"> <div class="d-flex flex-column gap-4">
<div v-for="item in items" :id="`${item.id}`" <div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
style="width: 64px;" <div v-for="item in items" :id="`${item.id}`"
data-aos="zoom-out" style="width: 64px;"
data-aos-duration="500"> data-aos="zoom-out"
<NuxtLink :to="`/items/${item.id}`"> data-aos-duration="500">
<div class="ratio ratio-1x1 position-relative"> <NuxtLink :to="`/items/${item.id}`">
<img class="rounded" :src="item.getIcon('latest')" loading="lazy"/> <div class="ratio ratio-1x1 position-relative">
<div class="position-absolute z-1 d-flex flex-column justify-content-end"> <img class="rounded" :src="item.getIcon('latest')" loading="lazy"/>
<div class="d-inline-flex justify-content-end align-items-center"> <div class="position-absolute z-1 d-flex flex-column justify-content-end">
<span class="fw-bold bg-dark-subtle rounded m-1" style="font-size: 8pt; padding: 1px;">{{ item.id }}</span> <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> </div>
</div> </NuxtLink>
</NuxtLink> </div>
</div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div> </div>
</div> </div>
</template> </template>

6
pages/loots/index.vue
View File

@@ -46,7 +46,7 @@ watch(currentLocale, async() => {
</script> </script>
<template> <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"> <div class="btn-group flex-wrap gap-2">
<a class="btn btn-outline-dark" @click="clearFilter()"> <a class="btn btn-outline-dark" @click="clearFilter()">
<MaterialIcon name="backspace-outline" :size="24" /> <MaterialIcon name="backspace-outline" :size="24" />
@@ -89,5 +89,9 @@ watch(currentLocale, async() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

3
pages/summoner-emotes/index.vue
View File

@@ -51,5 +51,8 @@ const p = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

4
pages/summoner-icons/index.vue
View File

@@ -59,5 +59,9 @@ const p = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

4
pages/tft-damage-skins/index.vue
View File

@@ -52,5 +52,9 @@ const p = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

3
pages/tft-map-skins/index.vue
View File

@@ -54,5 +54,8 @@ const p = computed(() => {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>

6
pages/ward-skins/index.vue
View File

@@ -30,7 +30,7 @@ const rarities = {
</script> </script>
<template> <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"> <div class="d-flex gap-2 justify-content-end">
<Card class="d-flex justify-content-center align-items-center me-auto"> <Card class="d-flex justify-content-center align-items-center me-auto">
<span>{{ skins.length }} skins</span> <span>{{ skins.length }} skins</span>
@@ -66,5 +66,9 @@ const rarities = {
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center w-100">
<BackToTopButton/>
</div>
</div> </div>
</template> </template>