better support for mobile devices

src/components/DamageChart.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="player-dmg">
-    <h4 class="text-center mt-3 mb-3">Team 1</h4>
     <div id="dmg-chart-1"></div>
     <hr>
-    <h4 class="text-center mt-3 mb-3">Team 2</h4>
     <div id="dmg-chart-2"></div>
   </div>
 </template>
@@ -57,7 +55,8 @@ export default {
         },
         xAxis: [
           {
-            type: 'value'
+            type: 'value',
+            min: -300
           }
         ],
         yAxis: [
@@ -124,13 +123,25 @@ export default {
 
 <style lang="scss" scoped>
 .player-dmg {
-  flex-direction: column;
+  display: grid;
-  align-items: center;
+  grid-template-columns: 1rem 1fr 1rem;
+  margin-bottom: 1rem;
+  margin-top: 40px;
+
+  & > * {
+    grid-column: 1 / -1;
+  }
+
+  #dmg-chart-1,
+  #dmg-chart-2 {
+    margin-top: -40px;
+  }
 }
 
-@for $i from 0 through 9 {
+@media (max-width: 1200px) {
-  #dmg-chart-#{$i} {
+  #dmg-chart-1,
-    margin: -50px 0 0 0;
+  #dmg-chart-2 {
+    overflow: scroll;
   }
 }
 </style>

src/components/EqValueGraph.vue

@@ -1,13 +1,16 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Economy</h3>
+  <div class="economy">
-  <div id="economy-graph"></div>
+    <h3>Economy</h3>
+    <div class="flexbreak"></div>
+    <div id="economy-graph"></div>
+  </div>
 </template>
 
 <script>
 
 import {getPlayerValue} from "../utils";
 import {useStore} from "vuex";
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onMounted, reactive, watch} from "vue";
 
 import * as echarts from 'echarts/core';
 import {
@@ -116,10 +119,16 @@ export default {
         ],
         grid: [
           {
-            bottom: '50%'
+            bottom: '10%'
           },
           {
-            top: '60%'
+            top: '0%'
+          },
+          {
+            right: '0%'
+          },
+          {
+            left: '0%'
           }
         ],
         series: [
@@ -157,13 +166,21 @@ export default {
 
     let myChart1, max_rounds
 
-    onBeforeMount(() => {
+    onMounted(() => {
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2))
+
+      parseObject()
     })
 
-    onMounted(() => {
+    watch(() => data.rounds, () => {
-      parseObject()
+      data.eq_team_1 = sumArr(data.eq_team_player_1)
+      data.eq_team_2 = sumArr(data.eq_team_player_2)
+
+      const valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
+
+      const dataList = Array.from(Array(valueList.length + 1).keys())
+      dataList.shift()
 
       if (store.state.matchDetails.stats) {
         echarts.use([
@@ -177,28 +194,44 @@ export default {
           MarkAreaComponent
         ]);
 
-        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1000, height: 800});
+        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1200, height: 400});
         max_rounds = store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30
       }
-    })
-
-    watch(() => data.rounds, () => {
-      data.eq_team_1 = sumArr(data.eq_team_player_1)
-      data.eq_team_2 = sumArr(data.eq_team_player_2)
-
-      const valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
-
-      const dataList = Array.from(Array(valueList.length + 1).keys())
-      dataList.shift()
 
       myChart1.setOption(optionGen(dataList, valueList));
     })
-
-    return {data}
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.economy {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
+  margin: 1rem auto 1rem;
+
+  h3 {
+    margin-bottom: -1rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .economy {
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    h3 {
+      margin-left: 2rem;
+    }
+
+    #economy-graph {
+      overflow: scroll;
+      margin: 0 0 0 -3rem;
+    }
+  }
+}
 </style>

src/components/FlashChart.vue

@@ -1,14 +1,9 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
   <div class="player-flash">
-    <div class="team-1 mx-5">
+    <h3>Flash-Duration <small class="text-muted">(in s)</small></h3>
-      <h4 class="text-center mt-3 mb-3">Team 1</h4>
+    <div class="flexbreak"></div>
-      <div id="flash-chart-1"></div>
+    <div id="flash-chart-1"></div>
-    </div>
+    <div id="flash-chart-2"></div>
-    <div class="team-2 mx-5">
-      <h4 class="text-center mt-3 mb-3">Team 2</h4>
-      <div id="flash-chart-2"></div>
-    </div>
   </div>
 </template>
 
@@ -112,64 +107,38 @@ export default {
 
 <style lang="scss" scoped>
 .player-flash {
-  flex-direction: column;
+  display: flex;
-  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
 
-  h4 {
+  .flexbreak {
-    margin-top: 7px;
+    flex-basis: 100%;
-    color: cornflowerblue;
+    height: 0;
+  }
+
+  h3 {
+    margin: 1rem auto -1rem;
+  }
+
+  #flash-chart-1,
+  #flash-chart-2 {
+    flex-basis: 50%;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (max-width: 1200px) {
-  .player-dmg {
+  .player-flash {
-    flex-direction: column;
+    display: grid;
-    justify-content: center;
+    grid-template-columns: minmax(1rem, 1fr) 2fr minmax(1rem, 1fr);
-    align-items: center;
+    margin-bottom: 1rem;
-    transform: scale(.7);
-    margin-top: -100px;
 
-    .team-1 {
+    & > * {
-      margin-top: -50px;
+      grid-column: 1 / -1;
     }
 
-    .team-2 {
+    #flash-chart-1,
-      margin-bottom: -100px;
+    #flash-chart-2 {
-      margin-left: -60px;
+      overflow: scroll;
-    }
-  }
-}
-
-@media screen and (max-width: 991px) and (min-width: 678px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.8);
-    margin-top: -50px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
-    }
-  }
-}
-
-@media screen and (max-width: 1261px) and (min-width: 991px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.9);
-    margin-top: -30px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
     }
   }
 }

src/components/MultiKillsChart.vue

@@ -1,12 +1,9 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
+  <div class="multi-kills">
-  <div class="player-dmg col-12">
+    <h3>Multi-Kills</h3>
-    <div class="team-1">
+    <div class="flexbreak"></div>
-      <div id="multi-kills-chart-1"></div>
+    <div id="multi-kills-chart-1"></div>
-    </div>
+    <div id="multi-kills-chart-2"></div>
-    <div class="team-2">
-      <div id="multi-kills-chart-2"></div>
-    </div>
   </div>
 </template>
 
@@ -141,70 +138,39 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-h3 {
+.multi-kills {
-  margin: 0 0 0 -60px;
-}
-
-.player-dmg {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
+  margin-bottom: 1rem;
 
-  .team-1 {
+  .flexbreak {
-    margin-left: -60px;
+    flex-basis: 100%;
+    margin-bottom: 2rem;
+    height: 0;
+  }
+
+  h3 {
+    margin: 1rem auto -1rem;
+  }
+
+  #multi-kills-chart-1,
+  #multi-kills-chart-2 {
+    flex-basis: 50%;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (max-width: 1200px) {
-  .player-dmg {
+  .multi-kills {
-    flex-direction: column;
+    justify-content: flex-start;
-    justify-content: center;
+    align-items: flex-start;
-    align-items: center;
+    margin: 0 0 0 0;
-    transform: scale(.7);
+    overflow: hidden;
-    margin-top: -100px;
 
-    .team-1 {
+    #multi-kills-chart-1,
-      margin-top: -50px;
+    #multi-kills-chart-2 {
-    }
+      flex-basis: 100%;
-
+      margin: 2rem 0 0 0;
-    .team-2 {
+      overflow: scroll;
-      margin-bottom: -100px;
-      margin-left: -60px;
-    }
-  }
-}
-
-@media screen and (max-width: 991px) and (min-width: 678px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.8);
-    margin-top: -50px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
-    }
-  }
-}
-
-@media screen and (max-width: 1261px) and (min-width: 991px) {
-  .player-dmg {
-    flex-wrap: nowrap;
-    transform: scale(.9);
-    margin-top: -30px;
-    margin-left: -60px;
-
-    .team-1 {
-      margin-left: 0;
-    }
-
-    .team-2 {
-      margin-bottom: -100px;
     }
   }
 }

src/router/index.js

@@ -47,7 +47,7 @@ const routes = [
         }
       },
       {
-        path: 'Economy',
+        path: 'economy',
         components: {
           score: lazyLoadComponent('EqValueGraph')
         }

src/views/Match.vue

@@ -191,10 +191,10 @@ export default {
 .bg-img {
   z-index: -1;
   position: fixed;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
 }
 
 .head {
@@ -257,7 +257,7 @@ export default {
   justify-content: center;
   flex-wrap: wrap;
 
-  padding-left: 70px;
+  //padding-left: 70px;
   z-index: 1;
   height: 100%;
   width: 100%;