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

frontend: make sidebar smaller

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-02-28 13:44:27 +01:00
parent c362d6b12a
commit 45fa841f80
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,9 +39,9 @@ if (route.path.startsWith('/tierlist/')) {
<div class="sidebar-container"> <div class="sidebar-container">
<Logo <Logo
font-size="2.6rem" font-size="2rem"
img-width="60" img-width="45"
style="padding-left: 15px; padding-right: 15px; margin-top: 30px" style="padding-left: 10px; padding-right: 10px; margin-top: 20px"
/> />
<div v-for="(lane, i) in championLanes" :key="i"> <div v-for="(lane, i) in championLanes" :key="i">
@@ -49,22 +49,22 @@ if (route.path.startsWith('/tierlist/')) {
style=" style="
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 30px; margin-top: 20px;
padding-right: 10px; padding-right: 10px;
overflow: hidden; overflow: hidden;
" "
> >
<h1 style="font-size: 2.4rem; padding-left: 20px">{{ championName }}</h1> <h1 style="font-size: 1.8rem; padding-left: 15px">{{ championName }}</h1>
<NuxtImg <NuxtImg
format="webp" format="webp"
style="margin-left: 10px" style="margin-left: 8px"
width="40" width="30"
height="40" height="30"
:src="LANE_IMAGES[lanePositionToIndex(lane.data)]" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
/> />
<h2 <h2
v-if="championName != null && championName != undefined && championName.length < 8" v-if="championName != null && championName != undefined && championName.length < 8"
style="margin-left: 5px; font-size: 1.8rem; font-weight: 200" style="margin-left: 5px; font-size: 1.4rem; font-weight: 200"
> >
{{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }} {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
</h2> </h2>
@@ -74,7 +74,7 @@ if (route.path.startsWith('/tierlist/')) {
:class=" :class="
'sidebar-link ' + (state == 'build' && laneState == i ? 'sidebar-link-selected' : '') 'sidebar-link ' + (state == 'build' && laneState == i ? 'sidebar-link-selected' : '')
" "
style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px" style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
@click="handleStateChange('build', i)" @click="handleStateChange('build', i)"
> >
Build Build
@@ -85,7 +85,7 @@ if (route.path.startsWith('/tierlist/')) {
'sidebar-link ' + 'sidebar-link ' +
(state == 'alternatives' && laneState == i ? 'sidebar-link-selected' : '') (state == 'alternatives' && laneState == i ? 'sidebar-link-selected' : '')
" "
style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px" style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
@click="handleStateChange('alternatives', i)" @click="handleStateChange('alternatives', i)"
> >
Alternatives Alternatives
@@ -94,15 +94,15 @@ if (route.path.startsWith('/tierlist/')) {
:class=" :class="
'sidebar-link ' + (state == 'matchups' && laneState == i ? 'sidebar-link-selected' : '') 'sidebar-link ' + (state == 'matchups' && laneState == i ? 'sidebar-link-selected' : '')
" "
style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px" style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
@click="handleStateChange('matchups', i)" @click="handleStateChange('matchups', i)"
> >
Matchups Matchups
</h2> </h2>
</div> </div>
<div v-if="tierlistList == true" style="margin-top: 30px"> <div v-if="tierlistList == true" style="margin-top: 20px">
<h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px">Tierlist</h2> <h2 style="padding-left: 15px; font-size: 1.8rem; margin-bottom: 8px">Tierlist</h2>
<NuxtLink <NuxtLink
v-for="(pos, i) in POSITIONS" v-for="(pos, i) in POSITIONS"
:key="i" :key="i"
@@ -112,16 +112,16 @@ if (route.path.startsWith('/tierlist/')) {
<div <div
:class="selected == pos ? 'sidebar-link-selected' : ''" :class="selected == pos ? 'sidebar-link-selected' : ''"
class="sidebar-link" class="sidebar-link"
style="padding-left: 35px; display: flex; align-items: center" style="padding-left: 25px; display: flex; align-items: center"
> >
<NuxtImg <NuxtImg
format="webp" format="webp"
width="40" width="30"
height="40" height="30"
:src="LANE_IMAGES[i]" :src="LANE_IMAGES[i]"
:alt="POSITIONS_STR[i]" :alt="POSITIONS_STR[i]"
/> />
<h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px"> <h3 style="font-size: 1.6rem; font-weight: 200; margin-left: 8px">
{{ POSITIONS_STR[i] }} {{ POSITIONS_STR[i] }}
</h3> </h3>
</div> </div>
@@ -130,14 +130,14 @@ if (route.path.startsWith('/tierlist/')) {
<div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px"> <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
<template v-if="stats"> <template v-if="stats">
<h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3> <h3 style="font-size: 18px; font-weight: 200">Patch {{ stats.patch }}</h3>
<h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3> <h3 style="font-size: 18px; font-weight: 200">{{ stats.count }} games</h3>
</template> </template>
<template v-else> <template v-else>
<h3 style="font-size: 23px; font-weight: 200; opacity: 0.5">Loading stats...</h3> <h3 style="font-size: 18px; font-weight: 200; opacity: 0.5">Loading stats...</h3>
</template> </template>
<NuxtLink to="/about"><h3>About</h3></NuxtLink> <NuxtLink to="/about"><h3>About</h3></NuxtLink>
<h2 style="font-size: 12px; font-weight: 200; margin-top: 5px"> <h2 style="font-size: 10px; font-weight: 200; margin-top: 3px">
BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot
Games or anyone officially involved in producing or managing Riot Games properties. Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot
Games, and all associated properties are trademarks or registered trademarks of Riot Games, Games, and all associated properties are trademarks or registered trademarks of Riot Games,