running-tools

commit 26a1161eb0dda591eb5b43f78f1cd09f4fc5fa63
parent c40514c1acf983b0a7a1434dcb3bc84de5329901
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Thu, 18 Nov 2021 19:20:18 -0800

Abbreviate split distance header on mobile devices

Diffstat:
M
src/views/SplitCalculator.vue
 | 
15
++++++++++++++-

1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/src/views/SplitCalculator.vue b/src/views/SplitCalculator.vue
@@ -4,7 +4,10 @@
       <table class="results" v-show="!inEditMode">
         <thead>
           <tr>
-            <th>Distance</th>
+            <th>
+              <span>Distance</span>
+              <span class="mobile-abbreviation">Dist</span>
+            </th>
 
             <th>Time</th>
 
@@ -221,6 +224,9 @@ export default {
 .results th:last-child {
   text-align: right;
 }
+.results th:first-child span.mobile-abbreviation {
+  display: none;
+}
 
 /* calculator output */
 .output {
@@ -231,6 +237,13 @@ export default {
     width: 100%;
     min-width: 0px;
   }
+  .results th:first-child span:not(.mobile-abbreviation) {
+    display: none;
+  }
+  .results th:first-child span.mobile-abbreviation {
+    display: inherit;
+  }
+
 }
 
 /* empty table message */