Add number input without arrows

Adds the number input feature back in without the annoying arrows
mijdavis2 · Mar 29, 2018 · 4a89ba6 · 4a89ba6
1 parent 99fee72
commit 4a89ba6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "upstream",
-  "version": "2.2.19",
+  "version": "2.3.0",
   "author": "mijdavis2",
   "description": "Streamflow calc utility for Trout Unlimited",
   "license": "MIT",

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -96,6 +96,14 @@
 
 <style lang="scss">
   @import "~primer-css/index.scss";
+  input[type=number]::-webkit-inner-spin-button,
+  input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
 </style>
 
 <style lang="stylus">

diff --git a/src/renderer/components/NewReportSetup.vue b/src/renderer/components/NewReportSetup.vue
@@ -23,11 +23,11 @@
             <div>
               <dl class="form-group mr-2">
                 <dt><label>Start Bank</label></dt>
-                <dd><input v-model.lazy="startBank"></dd>
+                <dd><input type="number" v-model.lazy="startBank"></dd>
               </dl>
               <dl class="form-group">
                 <dt><label>End Bank</label></dt>
-                <dd><input v-model.lazy="endBank"></dd>
+                <dd><input type="number" v-model.lazy="endBank"></dd>
               </dl>
             </div>
 

diff --git a/src/renderer/components/Report/StreamflowCalculator.vue b/src/renderer/components/Report/StreamflowCalculator.vue
@@ -15,13 +15,13 @@
               <input class="stream-input" :id="`Clock-${item.station}`" :value="item.clock" @input="updateClock(item.station)">
               <button class="btn btn-small" v-on:click="autofillClock(item.station)">Auto</button></td>
             <td>
-              <input class="stream-input" :id="`TapeFt-${item.station}`" :value="item.tapeFt" @input="updateTapeFt(item.station)"></td>
+              <input type="number" class="stream-input" :id="`TapeFt-${item.station}`" :value="item.tapeFt" @input="updateTapeFt(item.station)"></td>
             <td>
-              <input class="stream-input" :id="`MaxDepth-${item.station}`" :value="item.maxDepth" @input="updateMaxDepth(item.station)"></td>
+              <input type="number" class="stream-input" :id="`MaxDepth-${item.station}`" :value="item.maxDepth" @input="updateMaxDepth(item.station)"></td>
             <td>
-              <input class="stream-input" :id="`Spins-${item.station}`" :value="item.spins" @input="updateSpins(item.station)"></td>
+              <input type="number" class="stream-input" :id="`Spins-${item.station}`" :value="item.spins" @input="updateSpins(item.station)"></td>
             <td>
-              <input class="stream-input" :id="`TimeSec-${item.station}`" :value="item.timeSec" @input="updateTimeSec(item.station)"></td>
+              <input type="number" class="stream-input" :id="`TimeSec-${item.station}`" :value="item.timeSec" @input="updateTimeSec(item.station)"></td>
             <td>
               <textarea :id="`ReadingComments-${item.station}`" :value="item.readingComments" @input="updateReadingComments(item.station)"></textarea></td>
           </tr>