Sidebar and tierlist changes

frontend/assets/css/main.css

@@ -23,6 +23,9 @@ h1,h2,h3,h4,h5,h6,p,a {
 
 body {
     background-color: var(--color-surface);
+    
+    padding: 0;
+    margin: 0;
 }
 
 /* Different title settings */

frontend/components/SideBar.vue

@@ -3,7 +3,7 @@ import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon
 
 defineProps<{
     championName: String
-    championLanes: any
+    championLanes?: Array<LaneData>
 }>()
 const emit = defineEmits<{
     stateChange: [state: String, lane: number]
@@ -44,11 +44,13 @@ function handleStateChange(newState : string, newLane: number) {
 .sidebar-container {
     background-color: #2B2826;
     width: 300px;
-    height: 100%;
+    /* height: 100%; */
+    flex-shrink: 0;
 
-    position: absolute;
+    margin: 0px;
+    /* position: absolute;
     top: 0px;
-    left: 0px;
+    left: 0px; */
 }
 .sidebar-link {
     user-select: none;

frontend/components/TierlistTier.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+    title: string
+    tier: Array<Champion>
+}>()
+</script>
+
+<template>
+<div style="display: flex; align-items: center;">
+    <h2 class="tierlist-tier-title">{{ title }}</h2>
+    <div class="tierlist-tier-container">
+        <NuxtLink v-for="champion in tier" :to="'/champion/' + champion.alias.toLowerCase()">
+        <div class="champion-img-container">
+        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        </div>
+        </NuxtLink>
+    </div>
+</div>
+</template>
+
+<style>
+.tierlist-tier-container {
+    width: 90%;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 128px);
+    grid-gap: 10px;
+
+    align-items: center;
+
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.tierlist-tier-title {
+    font-size: 54px;
+    margin-left: 20px;
+    margin-right: 20px;
+    
+    font-weight: 300;
+}
+
+.champion-img-container {
+    overflow: hidden; width: 120px; height: 120px;
+    border: 1px solid var(--color-surface);
+}
+.champion-img-container:hover {
+    border: 1px solid var(--color-on-surface);
+}
+.champion-img {
+    width: 116px;
+    height: 116px;
+    transform: translate(4px, 4px) scale(1.2, 1.2);
+
+    user-select: none;
+}
+</style>

frontend/pages/champion/[alias].vue

@@ -20,19 +20,20 @@ function updateState(newState : string, newLane : number) {
         <Title>{{ championData.name }} - BuildPath</Title>
     </Head>
 
+    <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
+
     <SideBar :champion-name="championData.name" 
         :champion-lanes="championData.lanes" 
         @state-change="updateState"/>
 
-    <!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
+    <div style="margin-top: 64px; margin-left: 39px; width: 100%;">
-    <div style="margin-top: 64px; margin-left: 339px;">
         <ChampionTitle v-if="championData.gameCount > 0" :champion-id="championId" :winrate="lane.winrate" :pickrate="lane.pickrate" :game-count="lane.count" />
         <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="lane.runes!!" />
         <ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="lane.builds!!" />
         <h2 v-if="championData.gameCount == 0" style="margin: auto; margin-top: 20px; width: fit-content;">Sorry, there is no data for this champion :(</h2>
     </div>
-    <!-- <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" /> -->
+
-    <!-- </div> -->
+    </div>
 </template>
 
 <style>

frontend/pages/tierlist/[lane].vue

@@ -50,92 +50,27 @@ const d_tier = tierFromPickrate(0, 0.05)
         <Title>Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }} - BuildPath</Title>
     </Head>
 
-    <div style="margin-left: 50px; margin-top: 20px; display: flex; margin-bottom: 30px; align-items: center">
+    <div style="display: flex; min-height: 100vh; align-items: stretch;  width: 100%;">
-    <Logo/>
+        <SideBar/>
-    <h1 style="margin-left: 220px; font-size: 55px; font-weight: 300;">Tierlist for {{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
+
-    <img style="margin-left: 10px;" width="60" height="60" :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
+        <div style="margin-left: 10px; width: 100%; overflow-y: scroll;">
+
+        <div style="margin-left: 0px; margin-top: 20px; display: flex; margin-bottom: 30px; align-items: center">
+            <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">Tierlist for</h1>
+            <img style="margin-left: 10px;" width="50" height="50" :src="LANE_IMAGES[lanePositionToIndex(lane)]" />
+            <h1 style="margin-left: 10px; font-size: 45px; font-weight: 300;">{{ POSITIONS_STR[lanePositionToIndex(lane)] }}</h1>
+        </div>
+
+        <TierlistTier title="S" :tier="s_tier" />
+        <TierlistTier title="A" :tier="a_tier" />
+        <TierlistTier title="B" :tier="b_tier" />
+        <TierlistTier title="C" :tier="c_tier" />
+        <TierlistTier title="D" :tier="d_tier" />
+
+        </div>        
     </div>
 
-    <div class="tierlist-tier-container">
-        <h2 class="tierlist-tier-title">S</h2>
-        <NuxtLink v-for="champion in s_tier" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
-        </div>
-        </NuxtLink>
-    </div>
-
-    <div class="tierlist-tier-container">
-        <h2 class="tierlist-tier-title">A</h2>
-        <NuxtLink v-for="champion in a_tier" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
-        </div>
-        </NuxtLink>
-    </div>
-
-    <div class="tierlist-tier-container">
-        <h2 class="tierlist-tier-title">B</h2>
-        <NuxtLink v-for="champion in b_tier" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
-        </div>
-        </NuxtLink>
-    </div>
-
-    <div class="tierlist-tier-container">
-        <h2 class="tierlist-tier-title">C</h2>
-        <NuxtLink v-for="champion in c_tier" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
-        </div>
-        </NuxtLink>
-    </div>
-
-    <div class="tierlist-tier-container">
-    <h2 class="tierlist-tier-title">D</h2>
-        <NuxtLink v-for="champion in d_tier" :to="'/champion/' + champion.alias.toLowerCase()">
-        <div class="champion-img-container">
-        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
-        </div>
-        </NuxtLink>
-    </div>
 </template>
 
 <style>
-.tierlist-tier-container {
-    width: 90%;
-
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 128px);
-    grid-gap: 10px;
-
-    align-items: center;
-
-    margin: auto;
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-.tierlist-tier-title {
-    font-size: 54px;
-    margin-left: 20px;
-    margin-right: 20px;
-    
-    font-weight: 300;
-}
-
-.champion-img-container {
-    overflow: hidden; width: 120px; height: 120px;
-    border: 1px solid var(--color-surface);
-}
-.champion-img-container:hover {
-    border: 1px solid var(--color-on-surface);
-}
-.champion-img {
-    width: 116px;
-    height: 116px;
-    transform: translate(4px, 4px) scale(1.2, 1.2);
-
-    user-select: none;
-}
 </style>