made background-gradient of matches variable + fixed background image on player not scaling properly on mobile devices

This commit is contained in:
2021-10-24 16:41:21 +02:00
committed by Giovanni Harting
parent f610b27317
commit 95a3fb085a
4 changed files with 79 additions and 57 deletions

View File

@@ -214,7 +214,7 @@
<h5 v-else>No matches on record</h5>
</div>
<div v-if="store.state.playerDetails.matches" class="side-info">
<div class="side-info-box most-played-with">
<div v-if="data.playerMeta.most_mates" class="side-info-box most-played-with">
<div class="heading">
<h5>Most played with</h5>
</div>
@@ -232,7 +232,7 @@
</li>
</ul>
</div>
<div class="side-info-box best-mate">
<div v-if="data.playerMeta.best_mates" class="side-info-box best-mate">
<div class="heading">
<h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
</div>
@@ -250,7 +250,7 @@
</li>
</ul>
</div>
<div class="side-info-box preferred-weapons">
<div v-if="data.playerMeta.eq_map && data.playerMeta.weapon_dmg" class="side-info-box preferred-weapons">
<div class="heading">
<h5>Weapons <span class="text-muted">(by dmg)</span></h5>
</div>
@@ -295,7 +295,7 @@
</template>
<script>
import {onBeforeMount, onBeforeUnmount, reactive, watch} from "vue";
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
import {useStore} from "vuex";
import {
constructAvatarUrl,
@@ -320,6 +320,7 @@ import {
sortObjectValue,
TrackMe,
} from "../utils";
import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
export default {
name: 'Player',
@@ -407,7 +408,6 @@ export default {
SetPlayerData()
console.log(store.state.playerDetails)
console.log(data.playerMeta)
} else {
GoToLink('/')
// TODO: needs 404
@@ -455,24 +455,26 @@ export default {
}
const mapWeaponDamage = () => {
Object.keys(data.playerMeta.eq_map).forEach((key) => {
for (const id in data.playerMeta.weapon_dmg) {
Object.keys(data.playerMeta.weapon_dmg[id]).forEach((k) => {
if (k === 'eq') {
if (data.playerMeta.weapon_dmg[id][k] === key * 1) {
data.best_weapons_tmp.push([data.playerMeta.eq_map[key], data.playerMeta.weapon_dmg[id]['dmg']])
if (data.playerMeta.eq_map && data.playerMeta.weapon_dmg) {
Object.keys(data.playerMeta.eq_map).forEach((key) => {
for (const id in data.playerMeta.weapon_dmg) {
Object.keys(data.playerMeta.weapon_dmg[id]).forEach((k) => {
if (k === 'eq') {
if (data.playerMeta.weapon_dmg[id][k] === key * 1) {
data.best_weapons_tmp.push([data.playerMeta.eq_map[key], data.playerMeta.weapon_dmg[id]['dmg']])
}
}
}
})
}
})
})
}
})
data.best_weapons_tmp.sort((a, b) => {
return b[1] - a[1]
})
data.best_weapons_tmp.sort((a, b) => {
return b[1] - a[1]
})
data.best_weapons = data.best_weapons_tmp
data.best_weapons_tmp = []
data.best_weapons = data.best_weapons_tmp
data.best_weapons_tmp = []
}
}
watch(() => props.id, () => {
@@ -492,6 +494,12 @@ export default {
store.commit('resetPlayerDetails')
})
onMounted(() => {
const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT
const wrapper = document.querySelector('.wrapper')
wrapper.style.minHeight = height + 'px'
})
return {
data,
store,
@@ -521,17 +529,14 @@ export default {
.bg-img {
z-index: -1;
position: fixed;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
left: 0;
height: 100%;
object-fit: cover;
overflow: hidden;
}
.wrapper {
background: rgba(0, 0, 0, .7);
min-width: 100%;
min-height: 100%;
.load-more {
padding: 1rem 0;