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> <template>
<div class="player-dmg"> <div class="player-dmg">
<div id="dmg-chart-1"></div> <div id="dmg-chart-1"></div>
<hr>
<div id="dmg-chart-2"></div> <div id="dmg-chart-2"></div>
</div> </div>
</template> </template>
@@ -21,8 +20,8 @@ export default {
const store = useStore() const store = useStore()
let myChart1, myChart2 let myChart1, myChart2
const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 1000) const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 750)
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 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) => { const dataArr = (stats, team, prop) => {
if (['team', 'enemy', 'self'].indexOf(prop) > -1) { if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
@@ -140,16 +139,16 @@ export default {
}) })
window.onresize = () => { window.onresize = () => {
if (window.innerWidth <= 1000) { if (window.innerWidth <= 750) {
width.value = window.innerWidth - 20 width.value = window.innerWidth - 20
if (window.innerWidth <= 500) { if (window.innerWidth <= 500) {
height.value = width.value * 3 / 5 height.value = width.value * 3 / 5.5
} }
if (window.innerWidth <= 750 && window.innerWidth >= 501) { 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) { 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> <style lang="scss" scoped>
.player-dmg { .player-dmg {
display: grid; display: flex;
grid-template-columns: 1rem 1fr 1rem; margin-bottom: 4rem;
margin-bottom: 1rem;
margin-top: 40px;
& > * {
grid-column: 1 / -1;
}
#dmg-chart-1, #dmg-chart-1,
#dmg-chart-2 { #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> </style>