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

37
frontend/components/RuneSelector.vue
View File

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