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

@ -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;
}
}

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

@ -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.

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

@ -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.
Tap on an item to toggle it between delivered and
<span class="taptext">Tap</span><span class="clicktext">Click</span> on an icon to see the item(s) at that location.
<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
in and out. You can also double-tap to zoom in.
Drag with one finger or a mouse to move (pan) the map.
<span class="taptext">Pinch with two fingers</span><span class="clicktext">Scroll with a mouse</span>
to zoom
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,
or with a keyboard by holding Ctrl and dragging the mouse.
You can also rotate with <span class="taptext">two fingers by twisting them around each other,
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>