running-tools

commit 8056d81689fe7319db2362f3d711cfb730681d58
parent 798d3c1beb2841890c50334496872ca5a7b5174a
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sun, 18 Feb 2024 09:38:47 -0800

Use <details> for advanced calculator options

Diffstat:
M
src/assets/target-calculator.css
 | 
18
++++++++++++------
M
src/views/PaceCalculator.vue
 | 
31
++++++++++++++++++-------------
M
src/views/RaceCalculator.vue
 | 
69
+++++++++++++++++++++++++++------------------------------------------
M
src/views/SplitCalculator.vue
 | 
4
++++

4 files changed, 61 insertions(+), 61 deletions(-)
diff --git a/src/assets/target-calculator.css b/src/assets/target-calculator.css
@@ -10,7 +10,7 @@ h2 {
   font-size: 1.3em;
   margin-bottom: 0.2em;
 }
-* + h2 {
+* + h2, summary h2 {
   margin-top: 0.5em;
 }
 
@@ -22,12 +22,18 @@ h2 {
   margin-left: 5px;
 }
 
-/* extra settings */
-.target-set, .default-units {
-  margin-bottom: 5px;
+/* collapsable sections */
+summary {
+  text-align: center;
+}
+summary::marker {
+  font-size: 1.3em;
 }
-.target-set button {
-  margin-left: 3px;
+summary h2 {
+  display: inline-block;
+}
+details > * {
+  margin-bottom: 5px;
 }
 
 /* calculator output */
diff --git a/src/views/PaceCalculator.vue b/src/views/PaceCalculator.vue
@@ -18,20 +18,25 @@
       </div>
     </div>
 
-    <h2>Equivalent Paces</h2>
-    <div class="default-units">
-      Default units:
-      <select v-model="defaultUnitSystem" aria-label="Default units">
-        <option value="imperial">Miles</option>
-        <option value="metric">Kilometers</option>
-      </select>
-    </div>
-    <div class="target-set">
-      Target Set:
-      <target-set-selector v-model="selectedTargetSet" @targets-updated="reloadTargets"
-        :default-unit-system="defaultUnitSystem"/>
-    </div>
+    <details>
+      <summary>
+        <h2>Advanced Options</h2>
+      </summary>
+      <div>
+        Default units:
+        <select v-model="defaultUnitSystem" aria-label="Default units">
+          <option value="imperial">Miles</option>
+          <option value="metric">Kilometers</option>
+        </select>
+      </div>
+      <div>
+        Target Set:
+        <target-set-selector v-model="selectedTargetSet" @targets-updated="reloadTargets"
+          :default-unit-system="defaultUnitSystem"/>
+      </div>
+    </details>
 
+    <h2>Equivalent Paces</h2>
     <simple-target-table class="output" :calculate-result="calculatePace"
      :targets="targetSets[selectedTargetSet] ? targetSets[selectedTargetSet].targets : []"/>
   </div>
diff --git a/src/views/RaceCalculator.vue b/src/views/RaceCalculator.vue
@@ -17,14 +17,27 @@
       </div>
     </div>
 
-    <h2>
-      Advanced
-      <button class="link" @click="showAdvancedOptions=!showAdvancedOptions">
-        {{ showAdvancedOptions ? '[hide]' : '[show]' }}
-      </button>
-    </h2>
-    <div class="advanced-options" v-show="showAdvancedOptions">
-      <div class="default-units">
+    <details>
+      <summary>
+        <h2>Race Statistics</h2>
+      </summary>
+      <div>
+        Purdy Points: <b>{{ formatNumber(purdyPoints, 0, 1, true) }}</b>
+      </div>
+      <div>
+        V&#775;O&#8322;: <b>{{ formatNumber(vo2, 0, 1, true) }}</b> ml/kg/min
+          (<b>{{ formatNumber(vo2Percentage, 0, 1, true) }}%</b> of max)
+      </div>
+      <div>
+        V&#775;O&#8322; Max: <b>{{ formatNumber(vo2Max, 0, 1, true) }}</b> ml/kg/min
+      </div>
+    </details>
+
+    <details>
+      <summary>
+        <h2>Advanced Options</h2>
+      </summary>
+      <div>
         Default units:
         <select v-model="defaultUnitSystem" aria-label="Default units">
           <option value="imperial">Miles</option>
@@ -32,6 +45,11 @@
         </select>
       </div>
       <div>
+        Target Set:
+        <target-set-selector v-model="selectedTargetSet" @targets-updated="reloadTargets"
+          :default-unit-system="defaultUnitSystem"/>
+      </div>
+      <div>
         Prediction Model:
         <select v-model="model" aria-label="Prediction model">
           <option value="AverageModel">Average</option>
@@ -47,25 +65,9 @@
           :digits="2" :step="0.01"/>
         (default: 1.06)
       </div>
-      <div>
-        Purdy Points: <b>{{ formatNumber(purdyPoints, 0, 1, true) }}</b>
-      </div>
-      <div>
-        V&#775;O&#8322;: <b>{{ formatNumber(vo2, 0, 1, true) }}</b> ml/kg/min
-          (<b>{{ formatNumber(vo2Percentage, 0, 1, true) }}%</b> of max)
-      </div>
-      <div>
-        V&#775;O&#8322; Max: <b>{{ formatNumber(vo2Max, 0, 1, true) }}</b> ml/kg/min
-      </div>
-    </div>
+    </details>
 
     <h2>Equivalent Race Results</h2>
-    <div class="target-set">
-      Target Set:
-      <target-set-selector v-model="selectedTargetSet" @targets-updated="reloadTargets"
-        :default-unit-system="defaultUnitSystem"/>
-    </div>
-
     <simple-target-table class="output" :calculate-result="predictResult" :default-unit-system="defaultUnitSystem"
      :targets="targetSets[selectedTargetSet] ? targetSets[selectedTargetSet].targets : []" show-pace/>
   </div>
@@ -128,11 +130,6 @@ export default {
       riegelExponent: storage.get('race-calculator-riegel-exponent', 1.06),
 
       /**
-      * Whether to show the advanced options
-      */
-      showAdvancedOptions: storage.get('race-calculator-show-advanced-options', false),
-
-      /**
        * The names of the distance units
        */
       distanceUnits: unitUtils.DISTANCE_UNITS,
@@ -332,13 +329,6 @@ export default {
     },
 
     /**
-     * Save advanced options state
-     */
-    showAdvancedOptions(newValue) {
-      storage.set('race-calculator-show-advanced-options', newValue);
-    },
-
-    /**
      * Save the current selected target set
      */
     selectedTargetSet(newValue) {
@@ -358,9 +348,4 @@ export default {
 
 <style scoped>
 @import '@/assets/target-calculator.css';
-
-/* advanced options */
-.advanced-options>* {
-  margin-bottom: 5px;
-}
 </style>
diff --git a/src/views/SplitCalculator.vue b/src/views/SplitCalculator.vue
@@ -208,6 +208,10 @@ export default {
 <style scoped>
 @import '@/assets/target-calculator.css';
 
+.target-set, .default-units {
+  margin-bottom: 5px;
+}
+
 /* Widen default calculator output */
 @media only screen and (min-width: 501px) {
   .output {