Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

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

Browse Source
This commit is contained in:
Skylar Ittner 2020-04-03 12:18:47 -06:00
parent 5c86142a94
commit 0ff2eec985
3 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
www/assets/css/app.css
View File

@ -61,4 +61,19 @@ Framework7 and FontAwesome both have a .fab class
*/ */
#mapbox .mapboxgl-user-location-dot { #mapbox .mapboxgl-user-location-dot {
pointer-events: none; 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;
}
} }

8
www/pages/help/list.html
View File

@ -20,7 +20,7 @@
<div class="page-content"> <div class="page-content">
<div class="block-title">Manage Items</div> <div class="block-title">Manage Items</div>
<div class="block"> <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. to show the actions you can take.
These actions are marking the item as delivered/undelivered, These actions are marking the item as delivered/undelivered,
navigating to its location with your device's default maps app, 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-title">Clear the List</div>
<div class="block"> <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 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. 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. Note that clearing the list does not affect the address autofill.
@ -37,14 +37,14 @@
<div class="block-title">Search</div> <div class="block-title">Search</div>
<div class="block"> <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 box. Type in this box to hide any list entries that don't contain your
search query. search query.
</div> </div>
<div class="block-title">Sort Items</div> <div class="block-title">Sort Items</div>
<div class="block"> <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 the list. You can sort by distance from your current
location, alphabetically by street name, and numerically by location, alphabetically by street name, and numerically by
address number. address number.

19
www/pages/help/map.html
View File

@ -20,21 +20,22 @@
<div class="page-content"> <div class="page-content">
<div class="block-title">Manage Items</div> <div class="block-title">Manage Items</div>
<div class="block"> <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 undelivered. If two or more addresses are very close
together, their items will be grouped under one icon. together, their items will be grouped under one icon.
</div> </div>
<div class="block-title">Move the Map</div> <div class="block-title">Move the Map</div>
<div class="block"> <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 /> <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> <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-plus"></i></span>
and and
<span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-minus"></i></span> <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 Drag on
<span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-sort"></i></span> <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. 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>
<div class="block-title">Follow Location</div> <div class="block-title">Follow Location</div>
<div class="block"> <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> <span class="button button-small display-inline button-fill color-white text-color-black"><i class='material-icons'>my_location</i></span>
or or
<span class="button button-small display-inline button-fill color-white text-color-black"><i class='far fa-compass'></i></span> <span class="button button-small display-inline button-fill color-white text-color-black"><i class='far fa-compass'></i></span>