table and chart in same row, info popover

ruthrootz · Aug 13, 2020 · 8ed24a3 · 8ed24a3
1 parent c7a63b6
commit 8ed24a3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 29 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,13 @@
 <template>
   <div id="app">
     <link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet">
-    <h1 id="nav">cubing trainer</h1>
+    <h1 id="nav">cubing trainer <span id="info"><i class="fas fa-info-circle"></i></span></h1>
+    <b-popover target="info" triggers="hover" placement="bottom">
+      <p class="popover-text">Use SPACEBAR to start/stop timer. Use ESC to clear the timer.</p>
+      <p class="popover-text">Click on the X in the DNF cell to toggle DNF status.</p>
+      <p class="popover-text">Hover (or touch on mobile) on time cell to +2.</p>
+      <p class="popover-text">created by: <a href="https://rutholdja.netlify.app/">Ruth O.</a></p>
+    </b-popover>
     <!-- <div id="nav">
       <router-link to="/">Timer</router-link> |
       <router-link to="/algorithms">Algorithms</router-link>
@@ -38,4 +44,12 @@
 #nav a.router-link-exact-active {
   color: #fffb05;
 }
+
+#info {
+  font-size: 0.5em;
+}
+
+.popover-text {
+  color: #ffffff;
+}
 </style>
diff --git a/src/components/TimerComponent.ts b/src/components/TimerComponent.ts
@@ -52,18 +52,6 @@ export default class TimerComponent extends Vue {
         window.onkeydown = (e: KeyboardEvent): boolean => {
             return !(e.keyCode === 32 && e.target === document.body);
         };
-        window.onload = () => {
-            this.$notify({
-                group: 'notifications',
-                text: 'Use SPACEBAR to start/stop timer. Use ESC to clear the timer.',
-                duration: -1,
-            });
-            this.$notify({
-                group: 'notifications',
-                text: 'Click on the X in the DNF box to toggle DNF status.',
-                duration: -1,
-            });
-        };
         const ctx: HTMLElement = document.getElementById('solvesChart');
         this.solvesChart = new Chart(ctx, {
             type: 'line',

diff --git a/src/components/timer-component.html b/src/components/timer-component.html
@@ -4,21 +4,26 @@
         <h1 :class="{ timer: true, bestTime: bestTime }">{{ time.toFixed(2) }}</h1>
         <p class="average">session average: {{ sessionAverage === 0.00 ? '--' : sessionAverage.toFixed(2) }}</p>
     </div>
-
-    <div class="chart">
-        <canvas id="solvesChart"></canvas>
-    </div>
-    <div class="times">
-        <b-table bordered dark responsive fixed :fields="fields" :items="solves">
-            <template v-slot:cell(time)="data">
-                <div @mouseover="data.item.showPlusTwo = true" @mouseleave="data.item.showPlusTwo = false">{{ data.item.time.toFixed(2) }} <b v-if="!data.item.isPlusTwo" @click="plusTwoClick(data.item)"><span class="plusTwo" v-show="data.item.showPlusTwo">+2</span></b></div>
-            </template>
-            <template v-slot:cell(dnf)="data">
-                <b v-show="data.item.dnf" @click="toggleDNF(data.item)"><i class="fas fa-times-circle"></i></b>
-                <b v-show="!data.item.dnf" @click="toggleDNF(data.item)"><i class="far fa-times-circle"></i></b>
-            </template>
-        </b-table>
-    </div>
+    <b-row>
+        <b-col md="8">
+            <div class="chart">
+                <canvas id="solvesChart"></canvas>
+            </div>
+        </b-col>
+        <b-col md="4">
+            <div class="times">
+                <b-table bordered dark responsive fixed :fields="fields" :items="solves">
+                    <template v-slot:cell(time)="data">
+                        <div @mouseover="data.item.showPlusTwo = true" @mouseleave="data.item.showPlusTwo = false">{{ data.item.time.toFixed(2) }} <b v-if="!data.item.isPlusTwo" @click="plusTwoClick(data.item)"><span class="plusTwo" v-show="data.item.showPlusTwo">+2</span></b></div>
+                    </template>
+                    <template v-slot:cell(dnf)="data">
+                        <b v-show="data.item.dnf" @click="toggleDNF(data.item)"><i class="fas fa-times-circle"></i></b>
+                        <b v-show="!data.item.dnf" @click="toggleDNF(data.item)"><i class="far fa-times-circle"></i></b>
+                    </template>
+                </b-table>
+            </div>
+        </b-col>
+    </b-row>
     <b-button @click="exportSolves">export solves to CSV</b-button> <b-button @click="openSolves">import solves from CSV</b-button>
     <input type="file" id="file-input" style="display:none" @change="importSolves" />
 </div>
diff --git a/src/styles/timer-component.css b/src/styles/timer-component.css
@@ -18,7 +18,7 @@
 
 @media (max-width:600px) {
     .timer {
-        font-size: 2em;
+        font-size: 2.25em;
     }
 }