CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

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

Browse Source
This commit is contained in:
vikingowl
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
Download Patch File Download Diff File Expand all files Collapse all files

49
src/views/Match.vue
View File

@@ -1,7 +1,7 @@
<template>
<img alt="" class="bg-img" src="">
<div class="">
<div class="match-wrapper">
<div class="head row m-auto text-center">
<div class="map-score">
<div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
@@ -37,16 +37,17 @@
<span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
</p>
<p class="text-center fs-6">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
src="../assets/images/icons/timer_short.svg" title="Short-Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length" class="match-len"
src="../assets/images/icons/timer_long.svg" title="Long-Match">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
src="../assets/images/icons/timer_short.svg" title="Short-Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
class="match-len"
src="../assets/images/icons/timer_long.svg" title="Long-Match">
<span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
<img v-if="data.matchDetails.parsed"
:alt="DisplayRank(data.avgRank)[1]"
:src="DisplayRank(data.avgRank)[0]"
:title="DisplayRank(data.avgRank)[1]"
class="rank-icon"/>
:alt="DisplayRank(data.avgRank)[1]"
:src="DisplayRank(data.avgRank)[0]"
:title="DisplayRank(data.avgRank)[1]"
class="rank-icon"/>
<span v-if="data.matchDetails.replay_url" class="text-muted px-2">—</span>
<a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" class="text-white">
<i class="fas fa-download"></i>
@@ -106,8 +107,8 @@
</ul>
</div>
</div>
<div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
<router-view name="score"/>
<div id="scoreWrapper" class="scoreboard">
<router-view v-if="data.score.length === 2 && data.stats" name="score"/>
</div>
</template>
@@ -120,12 +121,13 @@ import {
FormatDuration,
FormatFullDate,
GetAvgRank,
getMatchDetails,
GoToLink,
LoadImage,
getMatchDetails
LoadImage
} from "../utils";
import {useStore} from "vuex";
import {useRoute} from 'vue-router'
import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
export default {
name: 'Match',
@@ -221,14 +223,21 @@ export default {
GetMatch()
})
onMounted(() => {
checkRoute()
})
onBeforeUnmount(() => {
store.commit('resetMatchDetails')
})
onMounted(() => {
checkRoute()
const headHeight = 230
const navHeight = 42
const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight
const scoreWrapper = document.getElementById('scoreWrapper')
scoreWrapper.style.minHeight = height + 'px'
})
document.addEventListener('click', () => {
closeNav('matchNav')
})
@@ -251,6 +260,7 @@ export default {
}
.head {
height: 230px;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.95) 30%,
@@ -340,6 +350,7 @@ export default {
.nav {
max-width: 100vw;
height: 42px;
background: rgba(0, 0, 0, 0.9);
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.7) 0%,
@@ -379,9 +390,7 @@ export default {
justify-content: center;
flex-wrap: wrap;
//padding-left: 70px;
z-index: 1;
height: 100%;
width: 100%;
max-width: 100vw;
background: linear-gradient(90deg,
@@ -392,7 +401,7 @@ export default {
);
}
@media screen and (max-width: 991px) {
@media (max-width: 991px) {
.score-team-1,
.score-team-2 {
top: 2rem !important;