From d41a6b64eab2bf46e21b79e90c1f7a46779e47f3 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sat, 23 Oct 2021 00:43:48 +0200
Subject: [PATCH] placed damage charts side-by-side

---
 src/components/DamageChart.vue | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/DamageChart.vue b/src/components/DamageChart.vue
index e3196d3..d913b19 100644
--- a/src/components/DamageChart.vue
+++ b/src/components/DamageChart.vue
@@ -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>