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

Mobile layout (fix #2)
All checks were successful
pipeline / build-and-push-images (push) Successful in 23s
Details
pipeline / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Valentin Haudiquet
2024-12-01 15:10:34 +01:00
parent 3cc3b3ce1c
commit e5050d65de
8 changed files with 293 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/components/ItemViewer.vue
View File

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