Use CSS to detect finger vs mouse and change help text accordingly (#36)

www/assets/css/app.css

@@ -62,3 +62,18 @@ Framework7 and FontAwesome both have a .fab class
 #mapbox .mapboxgl-user-location-dot {
     pointer-events: none;
 }
+
+/*
+ Allow easily changing help text to reflect finger/mouse usage.
+*/
+.clicktext {
+    display: none;
+}
+@media (pointer:fine) {
+    .taptext {
+        display: none;
+    }
+    .clicktext {
+        display: initial;
+    }
+}

www/pages/help/list.html

@@ -20,7 +20,7 @@
             <div class="page-content">
                 <div class="block-title">Manage Items</div>
                 <div class="block">
-                    Tap or click on a list entry
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> on a list entry
                     to show the actions you can take.
                     These actions are marking the item as delivered/undelivered,
                     navigating to its location with your device's default maps app,
@@ -29,7 +29,7 @@
 
                 <div class="block-title">Clear the List</div>
                 <div class="block">
-                    Tap the <span class="color-red text-color-primary"><i class="material-icons">delete</i></span>
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> the <span class="color-red text-color-primary"><i class="material-icons">delete</i></span>
                     button to remove all items from the list. This cannot be undone, so it's
                     a good idea to do it at the end of the day or in the morning before you start.
                     Note that clearing the list does not affect the address autofill.
@@ -37,14 +37,14 @@
 
                 <div class="block-title">Search</div>
                 <div class="block">
-                    Tap the <i class="material-icons text-color-primary">search</i> button to open a search
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> the <i class="material-icons text-color-primary">search</i> button to open a search
                     box.  Type in this box to hide any list entries that don't contain your
                     search query.
                 </div>
 
                 <div class="block-title">Sort Items</div>
                 <div class="block">
-                    Tap the <i class="material-icons text-color-primary">sort</i> button to sort
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> the <i class="material-icons text-color-primary">sort</i> button to sort
                     the list. You can sort by distance from your current
                     location, alphabetically by street name, and numerically by
                     address number.

www/pages/help/map.html

@@ -20,21 +20,22 @@
             <div class="page-content">
                 <div class="block-title">Manage Items</div>
                 <div class="block">
-                    Tap on an icon to see the item(s) at that location.
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> on an icon to see the item(s) at that location.
-                    Tap on an item to toggle it between delivered and
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span> on an item to toggle it between delivered and
                     undelivered. If two or more addresses are very close
                     together, their items will be grouped under one icon.
                 </div>
 
                 <div class="block-title">Move the Map</div>
                 <div class="block">
-                    Pinch with two fingers or scroll with a mouse to zoom
+                    <span class="taptext">Pinch with two fingers</span><span class="clicktext">Scroll with a mouse</span>
-                    in and out. You can also double-tap to zoom in.
+                     to zoom
-                    Drag with one finger or a mouse to move (pan) the map.
+                    in and out. You can also double-<span class="taptext">tap</span><span class="clicktext">click</span> to zoom in.
+                    Drag with <span class="taptext">one finger</span><span class="clicktext">the mouse</span> to move (pan) the map.
 
                     <br />
 
-                    If you prefer, tap or click
+                    If you prefer, <span class="taptext">tap</span><span class="clicktext">click</span>
                     <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-plus"></i></span>
                     and
                     <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-minus"></i></span>
@@ -45,13 +46,13 @@
                     Drag on
                     <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-sort"></i></span>
                     to rotate and tilt the map.  Dragging left and right rotates, up and down tilts.
-                    You can also rotate with two fingers by twisting them around each other,
+                    You can also rotate with <span class="taptext">two fingers by twisting them around each other,
-                    or with a keyboard by holding Ctrl and dragging the mouse.
+                    or with</span> a keyboard by holding Ctrl and dragging <span class="taptext">your finger</span><span class="clicktext">the mouse</span>.
                 </div>
 
                 <div class="block-title">Follow Location</div>
                 <div class="block">
-                    Tap
+                    <span class="taptext">Tap</span><span class="clicktext">Click</span>
                     <span class="button button-small display-inline button-fill color-white text-color-black"><i class='material-icons'>my_location</i></span>
                     or
                     <span class="button button-small display-inline button-fill color-white text-color-black"><i class='far fa-compass'></i></span>