PackageHelper/www/pages/help/map.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<div class="panel panel-right panel-cover">
    <div class="view">
        <div class="page">

            <div class="navbar">
                <div class="navbar-bg"></div>
                <div class="navbar-inner">
                    <div class="title">Help</div>
                    <div class="right">
                        <a class="link panel-close">
                            <span>Close</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="page-content">
                <div class="block-title">Manage Items</div>
                <div class="block">
                    <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">
                    <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, <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>
                    to zoom in and out.

                    <br />

                    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 <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">
                    <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>
                    to show your current
                    location on the map as a blue dot. The map will follow
                    the dot until you zoom or move the map.  If the dot goes
                    off the edge of the map, press the button again to
                    re-center the map.  Pressing the button when the dot is
                    visible will hide the dot and stop the map from
                    following your location.
                </div>

                <div class="block-title">Get Directions</div>
                <div class="block">
                    <span class="text-color-primary"><i class="material-icons">directions</i></span> will open your
                    default map/navigation app with the item location set as
                    the destination.  This is useful if you're having
                    trouble finding the location.
                </div>
            </div>
        </div>
    </div>
</div>