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

placed damage charts side-by-side
All checks were successful
CSGOWTF/csgowtf/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
vikingowl
2021-10-23 00:43:48 +02:00
parent cdecdf41fa
commit d41a6b64ea
1 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/DamageChart.vue
View File

@@ -1,7 +1,6 @@
<template>
<div class="player-dmg">
<div id="dmg-chart-1"></div>
<hr>
<div id="dmg-chart-2"></div>
</div>
</template>
@@ -21,8 +20,8 @@ export default {
const store = useStore()
let myChart1, myChart2
const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 1000)
const height = ref(window.innerWidth >= 751 ? width.value * 3 / 10 : window.innerWidth >= 501 && window.innerWidth <= 751 ? width.value * 3 / 7.5 : width.value * 3 / 5)
const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 750)
const height = ref(window.innerWidth >= 751 ? width.value * 3 / 7.5 : window.innerWidth >= 501 && window.innerWidth <= 751 ? width.value * 3 / 6.5 : width.value * 3 / 5.5)
const dataArr = (stats, team, prop) => {
if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
@@ -140,16 +139,16 @@ export default {
})
window.onresize = () => {
if (window.innerWidth <= 1000) {
if (window.innerWidth <= 750) {
width.value = window.innerWidth - 20
if (window.innerWidth <= 500) {
height.value = width.value * 3 / 5
height.value = width.value * 3 / 5.5
}
if (window.innerWidth <= 750 && window.innerWidth >= 501) {
height.value = width.value * 3 / 7.5
height.value = width.value * 3 / 6.5
}
if (window.innerWidth <= 1000 && window.innerWidth >= 751) {
height.value = width.value * 3 / 10
height.value = width.value * 3 / 7.5
}
}
@@ -161,18 +160,21 @@ export default {
<style lang="scss" scoped>
.player-dmg {
display: grid;
grid-template-columns: 1rem 1fr 1rem;
margin-bottom: 1rem;
margin-top: 40px;
& > * {
grid-column: 1 / -1;
}
display: flex;
margin-bottom: 4rem;
#dmg-chart-1,
#dmg-chart-2 {
margin-top: -40px;
flex-basis: 50%;
}
}
@media (max-width: 1200px) {
.player-dmg {
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
</style>