vhaudiquet/buildpath
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

BottomBar for mobile navigation to tierlists

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-12-21 14:41:52 +01:00
parent bc8ac87225
commit 59ceb24c84
6 changed files with 45 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/components/nav/Bar.vue
View File

@@ -17,5 +17,6 @@ const emit = defineEmits<{
@state-change="(s, l) => emit('stateChange', s, l)"/>
<LazyNavBottomBar :champion-name="championName"
:champion-lanes="championLanes"
:tierlist-list="tierlistList"
@state-change="(s, l) => emit('stateChange', s, l)"/>
</template>

22
frontend/components/nav/BottomBar.vue
View File

@@ -4,6 +4,7 @@ import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon
defineProps<{
championName?: string
championLanes?: Array<LaneData>
tierlistList?: boolean
}>()
const emit = defineEmits<{
stateChange: [state: string, lane: number]
@@ -17,6 +18,13 @@ function handleStateChange(newState : string, newLane: number) {
laneState.value = newLane;
emit('stateChange', newState, newLane)
}
const route = useRoute()
const selected = ref("");
if(route.path.startsWith("/tierlist/")) {
const lane = route.params.lane as string
selected.value = lane
}
</script>
<template>
@@ -41,6 +49,20 @@ function handleStateChange(newState : string, newLane: number) {
</h2>
</div>
</div>
<div v-if="tierlistList == true" style="padding-left: 20px;">
<h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px;">Tierlist</h2>
<div style="display: flex;">
<NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
<div :class="selected == pos ? 'navbar-link-selected' : ''"
class="navbar-link" style="display: flex; align-items: center;">
<NuxtImg format="webp"
width="30" height="30"
:src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
</div>
</NuxtLink>
</div>
</div>
</div>
</template>

22
frontend/components/nav/SideBar.vue
View File

@@ -21,6 +21,13 @@ function handleStateChange(newState : string, newLane: number) {
const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
const route = useRoute()
const selected = ref("");
if(route.path.startsWith("/tierlist/")) {
const lane = route.params.lane as string
selected.value = lane
}
</script>
<template>
@@ -56,8 +63,19 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
</div>
<NavTierlistList v-if="tierlistList == true" style="margin-top: 30px;" />
<div v-if="tierlistList == true" style="margin-top: 30px;">
<h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
<NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
<div :class="selected == pos ? 'sidebar-link-selected' : ''"
class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
<NuxtImg format="webp"
width="40" height="40"
:src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
<h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
</div>
</NuxtLink>
</div>
<div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px;">
<h3 style="font-size: 23px; font-weight: 200;">
Patch {{ stats.patch }}

24
frontend/components/nav/TierlistList.vue
View File

@@ -1,24 +0,0 @@
<script lang="ts" setup>
const route = useRoute()
const selected = ref("");
if(route.path.startsWith("/tierlist/")) {
const lane = route.params.lane as string
selected.value = lane
}
</script>
<template>
<div>
<h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
<NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
<div :class="selected == pos ? 'sidebar-link-selected' : ''"
class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
<NuxtImg format="webp"
width="40" height="40"
:src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
<h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
</div>
</NuxtLink>
</div>
</template>