From b71f517acf66a210a0942c75df746cf1e1667397 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sat, 29 Jan 2022 09:06:19 +0100
Subject: [PATCH] fixed #39

---
 package.json                  |  2 +-
 src/components/FlashChart.vue | 53 ++++++++++++++++++++++++++---------
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 649b77d..3bee5b3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "0.29.1",
+  "version": "0.29.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/FlashChart.vue b/src/components/FlashChart.vue
index 64f7da5..80d563a 100644
--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -1,15 +1,26 @@
 <template>
   <div class="player-flash">
-    <h3 class="text-center mt-2">Flash-<span v-if="toggle === 'duration'">Duration</span><span v-if="toggle === 'total'">Count</span></h3>
-    <div class="flexbreak"></div>
+    <h3 class="text-center mt-2">Flash</h3>
+    <div class="flex-break"></div>
     <div class="toggle-btn">
-      <span class="fs-6 text-muted" @click="toggleShow">
-        <span>Count: </span>
-        <i id="toggle-off" class="fa fa-toggle-off show"></i>
-        <i id="toggle-on" class="fa fa-toggle-on"></i>
-      </span>
+      <div @click="toggleShow">
+        <table class="table table-borderless text-muted">
+          <tr>
+            <td>
+              <span class="text-uppercase float-end" :class="toggle === 'duration' ? 'text-warning' : ''">Duration</span>
+            </td>
+            <td class="text-center">
+              <i id="toggle-off" class="fa fa-toggle-off show"></i>
+              <i id="toggle-on" class="fa fa-toggle-on"></i>
+            </td>
+            <td>
+              <span class="text-uppercase float-start" :class="toggle === 'total' ? 'text-warning' : ''">Count</span>
+            </td>
+          </tr>
+        </table>
+      </div>
     </div>
-    <div class="flexbreak"></div>
+    <div class="flex-break"></div>
     <div id="flash-chart-1"></div>
     <div id="flash-chart-2"></div>
   </div>
@@ -21,7 +32,7 @@ import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/componen
 import {BarChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
 import {onMounted, onUnmounted, ref, watch} from "vue";
-import {checkStatEmpty, getPlayerArr} from "../utils";
+import {checkStatEmpty, getPlayerArr} from "@/utils";
 import {useStore} from "vuex";
 
 export default {
@@ -176,7 +187,7 @@ export default {
   flex-wrap: wrap;
   margin-bottom: 1rem;
 
-  .flexbreak {
+  .flex-break {
     flex-basis: 100%;
     height: 0;
   }
@@ -186,13 +197,29 @@ export default {
   }
 
   .toggle-btn {
-    font-size: 1.4rem;
-    margin: 1rem auto 0;
+    margin: 0 auto;
     cursor: pointer;
 
+    table {
+      margin-top: 1rem;
+
+      td {
+        font-size: .8rem;
+      }
+
+      td:first-child,
+      td:last-child {
+        max-width: 80px;
+        width: 80px;
+      }
+      td:nth-child(2) {
+        max-width: 30px;
+        width: 30px;
+      }
+    }
+
     .fa {
       display: none;
-      margin-left: 5px;
 
       &.show {
         display: initial;