LysetsRev/csgowtf
1
0
Fork 0
forked from CSGOWTF/csgowtf
Code Issues Pull Requests Packages Projects Releases Wiki Activity

- changed home-screen image

Browse Source 
- added background image to matches
- added icon for short games
This commit is contained in:
cnachtigall1991
2021-10-07 04:10:04 +02:00
parent 412005ece9
commit 0619989748
6 changed files with 96 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/Match.vue
View File

@@ -1,15 +1,19 @@
<template>
<div class="pt-3">
<div v-if="data.matchDetails.map" class="head row m-auto mb-3 text-center">
<div class="m-auto">
<img :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
class="bg-img">
<div class="bg-img"></div>
<div class="">
<div v-if="data.matchDetails.map" class="head row m-auto text-center">
<div class="m-auto map">
<img :alt="data.matchDetails.map"
:src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
:title="data.matchDetails.map" class="map-icon">
</div>
<p class="text-center fs-6">Average Rank: <img
:src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
alt="Rank icon"
class="rank-icon"/></p>
</div>
<p class="text-center fs-6">Average Rank: <img :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
alt="Rank icon"
class="rank-icon mx-2"/></p>
</div>
<div class="nav">
<ul class="list-unstyled d-flex m-auto">
@@ -20,10 +24,12 @@
<li class="list-item">Heatmaps</li>
</ul>
</div>
<div class="container row m-auto">
<div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
<div class="scoreboard">
<div v-if="data.score.length === 2 && data.stats">
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats"
:team_id="1"/>
<ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats"
:team_id="2"/>
</div>
</div>
</template>
@@ -99,18 +105,54 @@ export default {
</script>
<style lang="scss" scoped>
.bg-img {
z-index: -1;
top: 0;
left: 0;
position: fixed;
width: 100%;
max-height: 95%;
}
.head {
img {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(15, 15, 15, 0.8) 30%,
rgba(15, 15, 15, 0.8) 70%,
rgba(0, 0, 0, 0) 100%
);
.map img {
width: auto;
height: 100px;
margin: 10px 0;
}
.rank-icon {
width: 60px;
}
}
.rank-icon {
width: 60px;
.scoreboard {
z-index: 1;
max-width: 100vw;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(15, 15, 15, 0.8) 30%,
rgba(15, 15, 15, 0.8) 70%,
rgba(0, 0, 0, 0) 100%
);
div {
display: flex;
flex-direction: column;
align-items: center;
}
}
.nav {
width: 100vw;
background: rgba(0, 0, 0, 0.6);
max-width: 100vw;
background: rgba(0, 0, 0, 0.9);
.list-item {
padding: 10px 10px;
@@ -119,7 +161,6 @@ export default {
background: var(--bs-info);
cursor: pointer;
}
}
.active {