running-tools

commit 2177d8ac863f4de423c8d57980cca7f3ad4ffbf9
parent 0bd90c81b719b8a85ad930db54b6202c84176a6b
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sat, 11 Sep 2021 13:32:16 -0700

Redesign pace and race calculator interfaces

Diffstat:
M
src/components/TargetTable.vue
 | 
4
+---
M
src/views/PaceCalculator.vue
 | 
41
+++++++++++++++++++++++++----------------
M
src/views/RaceCalculator.vue
 | 
39
++++++++++++++++++++++++---------------

3 files changed, 50 insertions(+), 34 deletions(-)
diff --git a/src/components/TargetTable.vue b/src/components/TargetTable.vue
@@ -3,7 +3,7 @@
     <table class="results" v-show="!inEditMode">
       <thead>
         <tr>
-          <th colspan="2">Distance</th>
+          <th>Distance</th>
 
           <th>Time</th>
 
@@ -22,8 +22,6 @@
             {{ distanceUnits[item.distanceUnit].symbol }}
           </td>
 
-          <td>in</td>
-
           <td colspan="2" :class="item.result === 'time' ? 'result' : ''">
             {{ formatDuration(item.time, 0, 2) }}
           </td>
diff --git a/src/views/PaceCalculator.vue b/src/views/PaceCalculator.vue
@@ -1,19 +1,24 @@
 <template>
   <div class="pace-calculator">
+    <h2>Input Pace:</h2>
     <div class="input">
-      Running
-      <decimal-input v-model="inputDistance" aria-label="distance value"
-        :min="0" :digits="2"/>
-      <select v-model="inputUnit" aria-label="distance unit">
-        <option v-for="(value, key) in distanceUnits" :key="key" :value="key">
-          {{ value.name }}
-        </option>
-      </select>
-      in
-      <time-input v-model="inputTime"/>
+      <div>
+        Distance:
+        <decimal-input v-model="inputDistance" aria-label="distance value"
+          :min="0" :digits="2"/>
+        <select v-model="inputUnit" aria-label="distance unit">
+          <option v-for="(value, key) in distanceUnits" :key="key" :value="key">
+            {{ value.name }}
+          </option>
+        </select>
+      </div>
+      <div>
+        Time:
+        <time-input v-model="inputTime"/>
+      </div>
     </div>
 
-    <p>is the same pace as running</p>
+    <h2>Equivalent Paces:</h2>
 
     <target-table class="output" :calculate-result="calculatePace" :default-targets="defaultTargets"
       storage-key="pace-calculator-targets"/>
@@ -164,11 +169,16 @@ export default {
   align-items: center;
 }
 
-/* calculator input */
-.input {
-  text-align: center;
-  margin-bottom: 5px;
+/* headings */
+h2 {
+  font-size: 1.3em;
+  margin-bottom: 0.2em;
+}
+* + h2 {
+  margin-top: 0.5em;
 }
+
+/* calculator input */
 .input>* {
   margin-bottom: 5px;  /* adds space between wrapped lines */
 }
@@ -178,7 +188,6 @@ export default {
 
 /* calculator output */
 .output {
-  margin-top: 10px;
   min-width: 300px;
 }
 @media only screen and (max-width: 500px) {
diff --git a/src/views/RaceCalculator.vue b/src/views/RaceCalculator.vue
@@ -1,18 +1,23 @@
 <template>
   <div class="race-calculator">
+    <h2>Input Race Result:</h2>
     <div class="input">
-      Running
-      <decimal-input v-model="inputDistance" aria-label="Distance value" :min="0" :digits="2"/>
-      <select v-model="inputUnit" aria-label="Distance unit">
-        <option v-for="(value, key) in distanceUnits" :key="key" :value="key">
-          {{ value.name }}
-        </option>
-      </select>
-      in
-      <time-input v-model="inputTime"/>
+      <div>
+        Distance:
+        <decimal-input v-model="inputDistance" aria-label="Distance value" :min="0" :digits="2"/>
+        <select v-model="inputUnit" aria-label="Distance unit">
+          <option v-for="(value, key) in distanceUnits" :key="key" :value="key">
+            {{ value.name }}
+          </option>
+        </select>
+      </div>
+      <div>
+        Time:
+        <time-input v-model="inputTime"/>
+      </div>
     </div>
 
-    <p>is approximately equivalent to running</p>
+    <h2>Equivalent Race Results:</h2>
 
     <target-table class="output" :calculate-result="predictTime" :default-targets="defaultTargets"
       storage-key="race-calculator-targets"/>
@@ -146,11 +151,16 @@ export default {
   align-items: center;
 }
 
-/* calculator input */
-.input {
-  text-align: center;
-  margin-bottom: 5px;
+/* headings */
+h2 {
+  font-size: 1.3em;
+  margin-bottom: 0.2em;
+}
+* + h2 {
+  margin-top: 0.5em;
 }
+
+/* calculator input */
 .input>* {
   margin-bottom: 5px;  /* adds space between wrapped lines */
 }
@@ -160,7 +170,6 @@ export default {
 
 /* calculator output */
 .output {
-  margin-top: 10px;
   min-width: 300px;
 }
 @media only screen and (max-width: 500px) {