Mobile layout (fix #2)

2024-12-01 15:10:34 +01:00
parent 3cc3b3ce1c
commit e5050d65de
8 changed files with 293 additions and 33 deletions
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -29,7 +29,7 @@ body {

    /* default value: font-size: 16px; */
 }
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 650px) {
    body {
        font-size: 12px;
    }
@@ -40,15 +40,15 @@ body {

 /* Different title settings */
 h1 {
-    font-size: 40px;
+    font-size: 2.5rem;
    font-weight: 500;
 }
 h2 {
-    font-size: 24px;
+    font-size: 1.5rem;
    font-weight: 400;
 }
 h3 {
-    font-size: 24px;
+    font-size: 1.5rem;
    font-weight: 300;
 }

--- a/frontend/components/ChampionTitle.vue
+++ b/frontend/components/ChampionTitle.vue
@@ -17,17 +17,20 @@ const championDescription = championData.value.title
 </script>

 <template>
-    <div style="display: flex;">
+    <div style="display: flex; width: fit-content;">
+        
        <div class="champion-title-img-container">
        <NuxtImg width="160" height="160" class="champion-title-img" :src="CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/' + championId + '.png'"/>
        </div>
-        <div style="margin-left: 15px; margin-top: 5px;">
+
+        <div id="ct-info-container">
            <h1>{{ championName }}</h1>
-            <h3 style="margin-top: 5px">{{ championDescription }}</h3>
-            <div style="margin-top: 30px; display: flex;">
-                <h2>{{ winrate }}% win.</h2>
-                <h2 style="margin-left: 20px; margin-right: 20px;">{{ pickrate }}% pick.</h2>
-                <h2>{{ gameCount }} games</h2>
+            <h3 id="ct-desc">{{ championDescription }}</h3>
+
+            <div id="ct-basic-stat-container">
+                <h2 class="ct-basic-stat">{{ winrate }}% win.</h2>
+                <h2 class="ct-basic-stat ct-basic-stat-margin">{{ pickrate }}% pick.</h2>
+                <h2 class="ct-basic-stat">{{ gameCount }} games</h2>
            </div>
        </div>
    </div>
@@ -48,4 +51,48 @@ const championDescription = championData.value.title

    user-select: none;
 }
+#ct-info-container {
+    margin-left: 15px; 
+    margin-top: 5px;
+}
+.ct-basic-stat-margin {
+    margin-left: 20px; 
+    margin-right: 20px;
+}
+#ct-desc {
+    margin-top: 5px;
+}
+#ct-basic-stat-container {
+    margin-top: 30px; 
+    display: flex;
+}
+
+@media only screen and (max-width: 650px) {
+    .champion-title-img-container {
+        width: 86px;
+        height: 86px;
+    }
+    .champion-title-img {
+        width: 86px;
+        height: 86px;
+    }
+    #ct-desc {
+        display: none;
+    }
+    .ct-basic-stat {
+        text-align: center;
+    }
+    .ct-basic-stat-margin {
+        margin-left: 2px; 
+        margin-right: 2px;
+    }
+    #ct-basic-stat-container {
+        margin-top: 10px;
+    }
+    #ct-info-container {
+        margin-left: 10px;
+        margin-top: 0px;
+        max-width: 220px;
+    }
+}
 </style>
--- a/frontend/components/ItemViewer.vue
+++ b/frontend/components/ItemViewer.vue
@@ -21,12 +21,12 @@ function trimBuilds(builds : Builds) {
 </script>

 <template>
-    <div style="display: flex; width: fit-content; height: fit-content;">
+    <div id="iv-container">
        
        <!-- Start items -->
        <div class="item-box">
            <h2 class="item-box-title">start</h2>
-            <div style="display: flex; flex-direction: column; width: fit-content; height: fit-content; margin:auto;">
+            <div class="iv-items-container">
            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.start" >
            <NuxtImg v-if="item.data != null && item.data != undefined" 
                class="item-img" width="64" height="64" :alt="item.data.toString()" 
@@ -41,7 +41,7 @@ function trimBuilds(builds : Builds) {
            <h2 class="item-box-title">boots rush</h2>
            <h5 style="margin: auto;">({{ (builds.bootsFirst * 100).toFixed(2) }}%)</h5>
            </div>
-            <div style="display: flex; flex-direction: column; width: fit-content; height: fit-content; margin:auto;">
+            <div class="iv-items-container">
            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots" >
            <NuxtImg v-if="item.data != null && item.data != undefined"  
                class="item-img" width="64" height="64" :alt="item.data.toString()" 
@@ -58,7 +58,7 @@ function trimBuilds(builds : Builds) {

        <div v-if="builds.bootsFirst <= 0.5"  class="item-box">
            <h2 class="item-box-title">boots</h2>
-            <div style="display: flex; flex-direction: column; width: fit-content; height: fit-content; margin:auto;">
+            <div class="iv-items-container">
            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.boots.slice(0, 4)" >
            <NuxtImg v-if="item.data != null && item.data != undefined" 
                class="item-img" width="64" height="64" :alt="item.data.toString()" 
@@ -71,9 +71,9 @@ function trimBuilds(builds : Builds) {
        <div class="item-box">
            <h2 class="item-box-title">late game</h2>
            
-            <div style="display: flex;">
+            <div id="iv-late-game-container">

-            <div style="display: flex; flex-direction: column; width: fit-content; height: fit-content; margin:auto;">
+            <div class="iv-items-container">
            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(0, 4)" >
            <NuxtImg v-if="item.data != null && item.data != undefined"
                 class="item-img" width="64" height="64" :alt="item.data.toString()" 
@@ -82,7 +82,7 @@ function trimBuilds(builds : Builds) {
            </div>
            </div>
            
-            <div style="display: flex; flex-direction: column; width: fit-content; height: fit-content; margin:auto;">
+            <div class="iv-items-container">
            <div style="margin-left: 5px; margin-right: 5px;" v-for="item in builds.lateGame.slice(4, 8)" >
            <NuxtImg v-if="item.data != null && item.data != undefined"
                 class="item-img" width="64" height="64" :alt="item.data.toString()" 
@@ -97,6 +97,18 @@ function trimBuilds(builds : Builds) {
 </template>

 <style>
+#iv-container {
+    display: flex;
+    width: fit-content; 
+    height: fit-content;
+}
+.iv-items-container {
+    display: flex; 
+    flex-direction: column; 
+    width: fit-content; 
+    height: fit-content; 
+    margin:auto;
+}
 .item-img {
    border: 1px solid var(--color-on-surface);
    margin: 10px;
@@ -115,5 +127,28 @@ function trimBuilds(builds : Builds) {
    text-align: center;
    margin: 10px;
 }
+#iv-late-game-container {
+    display: flex;
+}

+@media only screen and (max-width: 1000px) {
+    #iv-container {
+        flex-direction: column;
+        width: 100%;
+    }
+    .item-box {
+        width: 95%;
+        height: fit-content;
+    }
+    .iv-items-container {
+        flex-direction: row;
+    }
+    .item-img {
+        width: 48px;
+        height: 48px;
+    }
+    #iv-late-game-container {
+        flex-direction: column;
+    }
+}
 </style>
--- a/frontend/components/NavBar.vue
+++ b/frontend/components/NavBar.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
+
+defineProps<{
+    championName: String
+    championLanes?: Array<LaneData>
+}>()
+const emit = defineEmits<{
+    stateChange: [state: String, lane: number]
+}>()
+
+const state = ref("runes")
+const laneState = ref(0)
+
+function handleStateChange(newState : string, newLane: number) {
+    state.value = newState;
+    laneState.value = newLane;
+    emit('stateChange', newState, newLane)
+}
+</script>
+
+<template>
+    <div class="navbar-container">
+        
+        <NuxtLink style="display: flex; width: fit-content; text-decoration: none; align-items: center; margin-left: 10px;" to="/">
+        <img id="navbar-logo-img" src="~/assets/img/buildpath-high-resolution-logo-transparent.png" />
+        </NuxtLink>
+
+        <div v-for="(lane, i) in championLanes" style="display: flex; align-items: center; margin-left: 20px;">
+            <img width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+            <div>
+            <h2 :class="'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')"
+                @click="handleStateChange('runes', i)" >
+                Runes
+            </h2>
+            <h2 :class="'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')"
+                @click="handleStateChange('items', i)" >
+                Items
+            </h2>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+.navbar-container {
+    display: flex;
+
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+
+    background-color: #2B2826;
+    width: 100%;
+    height: 100px;
+
+    margin: 0px;
+}
+.navbar-link {
+    user-select: none;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 8px;
+}
+.navbar-link:hover {
+    cursor: pointer;
+    background-color: var(--color-surface-darker);
+}
+.navbar-link-selected {
+    background-color: var(--color-surface);
+}
+#navbar-logo-img {
+    height: 70px;
+    width: fit-content;
+}
+
+@media only screen and (min-width: 1200px) {
+    .navbar-container {
+        display: none;
+    }
+}
+</style>
--- a/frontend/components/RunePage.vue
+++ b/frontend/components/RunePage.vue
@@ -35,7 +35,7 @@ refreshStyles()
 <template>
    <div style="display: flex;">
    <div class="rune-holder">
-        <div class="rune-slot"><NuxtImg style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
+        <div class="rune-slot"><NuxtImg class="rune-style-img" style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)" /></div>
        <div class="rune-slot" v-for="slot in primaryStyle.slots.slice(0, 1)">
            <NuxtImg width="48" v-for="perk in slot.perks" :class="'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div>    
@@ -93,4 +93,24 @@ refreshStyles()
    margin-right: 20px;
    border: 1px var(--color-on-surface) solid;
 }
+
+@media only screen and (max-width: 650px) {
+    .rune-slot {
+        width: calc(24*3px + 30px);
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .rune-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-style-img {
+        width: 24px;
+        height: 24px;
+    }
+    .rune-spacer-bar {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+}
 </style>
--- a/frontend/components/RuneSelector.vue
+++ b/frontend/components/RuneSelector.vue
@@ -63,15 +63,15 @@ function runeSelect(index: number) {
        :selectionIds="runes[currentlySelectedPage].selections" />
    <div style="display: flex; margin-top: 20px; justify-content: center;">
    <div v-for="(_, i) in runes" :class="'rune-selector-entry ' + (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')" @click="runeSelect(i)">
-        <div style="display: flex; margin-top: 20px;">
-        <NuxtImg v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
+        <div class="rs-styles-container">
+        <NuxtImg class="rs-style-img" v-if="primaryStyles[i] != null && primaryStyles[i] != undefined" 
            style="margin: auto;" :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)" />
-        <NuxtImg v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
+        <NuxtImg class="rs-style-img" v-if="keystoneIds[i] != null && keystoneIds[i] != undefined" 
            width="34" :src="CDRAGON_BASE + ( mapPath(perks.get(keystoneIds[i]).iconPath))"/>
-        <NuxtImg v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
+        <NuxtImg class="rs-style-img" v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined" 
            style="margin: auto;" :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)" />
        </div>
-        <h3 style="text-align: center; margin-top: 10px;">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
+        <h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
    </div>
    </div>
    </div>
@@ -94,4 +94,31 @@ function runeSelect(index: number) {
 .rune-selector-entry-selected {
    background-color: var(--color-surface-darker);
 }
+.rs-styles-container {
+    display: flex; 
+    margin-top: 20px;
+}
+.rs-pickrate {
+    text-align: center; 
+    margin-top: 10px;
+}
+@media only screen and (max-width: 650px) {
+    .rune-selector-entry {
+        width: 100px;
+        height: 60px;
+
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+    .rs-styles-container {
+        margin-top: 17px;
+    }
+    .rs-pickrate {
+        margin-top: 20px;
+    }
+    .rs-style-img {
+        width: 24px;
+        height: 24px;
+    }
+}
 </style>
--- a/frontend/components/SideBar.vue
+++ b/frontend/components/SideBar.vue
@@ -32,9 +32,11 @@ function handleStateChange(newState : string, newLane: number) {
        </div>

        <h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('runes', i)" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
+            @click="handleStateChange('runes', i)" 
+            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
        <h2 :class="'sidebar-link ' + (state == 'items' && laneState == i ? 'sidebar-link-selected' : '')" 
-            @click="handleStateChange('items', i)" style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+            @click="handleStateChange('items', i)" 
+            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
        
        </div>
    </div>
@@ -67,4 +69,10 @@ function handleStateChange(newState : string, newLane: number) {
 .sidebar-link-selected {
    background-color: var(--color-surface);
 }
+
+@media only screen and (max-width: 1200px) {
+    .sidebar-container {
+        display: none;
+    }
+}
 </style>
--- a/frontend/pages/champion/[alias].vue
+++ b/frontend/pages/champion/[alias].vue
@@ -20,21 +20,62 @@ function updateState(newState : string, newLane : number) {
        <Title>{{ championData.name }} - BuildPath</Title>
    </Head>

-    <div style="display: flex; min-height: 100vh; align-items: stretch; width: 100%;">
+    <NavBar :champion-name="championData.name" 
+        :champion-lanes="championData.lanes" 
+        @state-change="updateState"/>
+
+    <div id="alias-content-wrapper">

    <SideBar :champion-name="championData.name" 
        :champion-lanes="championData.lanes" 
        @state-change="updateState"/>

-    <div style="margin-top: 64px; margin-left: 39px; width: 100%;">
-        <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 id="champion-content">
+        <ChampionTitle id="champion-title" 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>

    </div>
 </template>

 <style>
+#alias-content-wrapper {
+    display: flex; 
+    min-height: 100vh; 
+    align-items: stretch; 
+    width: 100%;
+
+    overflow: hidden;
+}
+#champion-content {
+    margin-top: 64px; 
+    margin-left: 39px; 
+    width: 100%;
+}
+@media only screen and (max-width: 650px) {
+    #champion-content {
+        margin: auto;
+        margin-top: 10px;
+    }
+    #champion-title {
+        margin:auto;
+    }
+}
+@media only screen and (max-width: 1200px) {
+    #alias-content-wrapper {
+        flex-direction: column;
+        margin-bottom: 120px;
+    }
+}
 </style>