PackageHelper/www/pages/list.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="page" data-name="list">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link" onclick="router.back({force: true, ignoreCache: true})">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">List</div>
            <div class="right">
                <a class="link icon-only searchbar-enable" data-searchbar=".package-list-searchbar">
                    <i class="icon material-icons">search</i>
                </a>
                <a class="link popover-open" data-popover="#popover-sort-list">
                    <i class="icon material-icons">sort</i>
                </a>
                <a class="link text-color-red" onclick="confirmDeleteAllPackages()">
                    <i class="icon material-icons">delete</i>
                </a>

                {{#if show_help}}
                <a class="link" href="/help/list">
                    <i class="icon material-icons">help</i>
                </a>
                {{/if}}
            </div>
            <form class="searchbar searchbar-expandable package-list-searchbar">
                <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                        <input type="search" placeholder="Search"/>
                        <i class="searchbar-icon"></i>
                        <span class="input-clear-button"></span>
                    </div>
                    <span class="searchbar-disable-button">Cancel</span>
                </div>
            </form>
        </div>
    </div>


    <div class="page-content">

        <div class="row justify-content-center">
            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
                <div id="no-packages-display" class="block display-none text-align-center noselect">
                    <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
                    <div class="margin-top"><a href="/add" class="button button-round button-fill margin-horizontal">Add a Package</a></div>
                </div>
                <div class="list no-hairlines tablet-inset no-margin-top accordion-list virtual-list" id="addresslist">
                    <!-- Packages go here -->
                </div>
            </div>
        </div>
    </div>

    <div class="popover" id="popover-sort-list">
        <div class="popover-inner">
            <div class="list">
                <ul>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('distance_asc');">Distance (near-far)</a></li>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('distance_desc');">Distance (far-near)</a></li>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('alpha_asc');">Street (a-z)</a></li>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('alpha_desc');">Street (z-a)</a></li>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('number_asc');">Number (1-9)</a></li>
                    <li><a class="list-button item-link popover-close" href="" onclick="loadPackageList('number_desc');">Number (9-1)</a></li>
                </ul>
            </div>
        </div>
    </div>

</div>