You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
9.6 KiB
HTML
179 lines
9.6 KiB
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="add">
|
|
|
|
<div class="navbar no-tablet">
|
|
<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">Add Items</div>
|
|
<div class="right">
|
|
<a class="link scanbarcodebtn">
|
|
<i class="icon material-icons">center_focus_strong</i>
|
|
</a>
|
|
<a class="link popover-open" data-popover="#popover-add-options">
|
|
<i class="icon material-icons">more_vert</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="popover" id="popover-add-options">
|
|
<div class="popover-inner">
|
|
<div class="list">
|
|
<ul>
|
|
<li><a class="list-button item-link popover-close" href="" onclick="toggleLettersInAddressNumber()"><label class="checkbox"><input type="checkbox" id="address-has-letters-checkbox"><i class="icon-checkbox"></i></label> Address contains letters</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toolbar tabbar toolbar-bottom">
|
|
<div class="toolbar-inner">
|
|
<a href="#add-tab" class="tab-link tab-link-active">Add</a>
|
|
<a href="#history-tab" class="tab-link">Recent</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if nottablet}}
|
|
<div class="tabs-swipeable-wrap">
|
|
{{/if}}
|
|
<div class="tabs">
|
|
<div id="add-tab" class="tab tab-active">
|
|
<div class="navbar only-tablet">
|
|
<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">Add Items</div>
|
|
<div class="right">
|
|
<a class="link scanbarcodebtn">
|
|
<i class="icon material-icons">center_focus_strong</i>
|
|
</a>
|
|
<a class="link popover-open" data-popover="#popover-add-options">
|
|
<i class="icon material-icons">more_vert</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content row justify-content-center margin-top-tablet padding-bottom-tablet">
|
|
<div class="list no-hairlines no-margin-top col-100 medium-80 large-50 elevation-tablet">
|
|
<ul>
|
|
<li class="item-divider">Address</li>
|
|
<li>
|
|
<div class="row justify-content-stretch">
|
|
<div class="col-70 item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Number</div>
|
|
<div class="item-input-wrap">
|
|
<input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-30 item-content item-input no-padding-left">
|
|
<div class="item-inner no-padding-right">
|
|
<div class="item-title item-label">Unit</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" name="unit" id="unitinput" placeholder="" value="" autocomplete="off" autocorrect="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Street</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" name="street" id="streetInput" placeholder="Road Dr" autocomplete="off" autocorrect="off">
|
|
<span class="input-clear-button"></span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="row justify-content-stretch">
|
|
<div class="col-70 item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">City, State</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" name="citystate" placeholder="City, ST" value="" autocomplete="off" autocorrect="off">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-30 item-content item-input no-padding-left">
|
|
<div class="item-inner no-padding-right">
|
|
<div class="item-title item-label">ZIP</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off" inputmode="numeric" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="item-divider">Item Type</li>
|
|
{{#each itemtypes}}
|
|
<li>
|
|
<label class="item-radio item-content">
|
|
<input type="radio" name="itemtype" value="{{id}}" {{#if selected}}data-default="1" checked{{/if}} />
|
|
<i class="icon icon-radio"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title"><i class="{{icon}}"></i> {{name}}</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
{{/each}}
|
|
<!-- Extra hidden element for padding because the last list entry likes to hide under the bottom bar on iOS -->
|
|
<li style="visibility: hidden;"><span class="item-content"> </span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fab fab-right-bottom no-tablet hapticbtn">
|
|
<a class="addpackagebtn">
|
|
<i class="icon material-icons">add</i>
|
|
</a>
|
|
</div>
|
|
<div class="fab fab-extended fab-right-bottom only-tablet hapticbtn">
|
|
<a class="addpackagebtn">
|
|
<i class="icon material-icons">add</i>
|
|
<div class="fab-text">Add Item</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="history-tab" class="page-content tab">
|
|
<div class="navbar only-tablet">
|
|
<div class="navbar-bg"></div>
|
|
<div class="navbar-inner">
|
|
<div class="title">Recent Items</div>
|
|
</div>
|
|
</div>
|
|
<div class="block text-align-center noselect" id="no-history">
|
|
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
|
|
<div class="margin-top">No recently added items! <span id="history-empty-swipe-prompt">Swipe <i class="fas fa-arrow-left"></i> to add some.</span></div>
|
|
</div>
|
|
<ul class="list no-hairlines tablet-inset no-margin-top hapticbtn" id="historylist">
|
|
<!-- Packages go here -->
|
|
</ul>
|
|
<div class="block text-align-center display-none noselect" id="tap-to-remove-history-prompt">
|
|
<span class="block-header"><span class="taptext">Tap</span><span class="clicktext">Click</span> a recently added item to delete it.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if nottablet}}
|
|
</div>
|
|
{{/if}}
|
|
|
|
<script src="assets/js/add.js"></script>
|
|
|
|
</div> |