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

53
frontend/pages/champion/[alias].vue
View File

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