Toolbox: Center UIs in middle of screen with max width (#36)
This commit is contained in:
parent
c164cd99e4
commit
861c669772
@ -47,7 +47,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.page[data-name="add"] #add-tab .list {
|
||||
.elevation-tablet {
|
||||
/* .elevation-3 */
|
||||
box-shadow: var(--f7-elevation-3)!important;
|
||||
}
|
||||
@ -63,7 +63,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
}
|
||||
|
||||
@media all and (min-width: 768px) and (min-height: 700px) {
|
||||
.page[data-name="add"] #add-tab .page-content {
|
||||
.margin-top-tablet {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
@ -61,8 +61,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-content row justify-content-center">
|
||||
<div class="list no-margin-top col-100 medium-80 large-50">
|
||||
<div class="page-content row justify-content-center margin-top-tablet">
|
||||
<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
|
||||
<ul>
|
||||
<li class="item-divider">Address</li>
|
||||
<li>
|
||||
|
||||
@ -17,49 +17,53 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/toolbox/scanner" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-barcode"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Broken Scanner</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/track" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Track Item</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/weather" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-cloud-sun"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Weather Lookahead</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/addrlookup" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-search-location"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Address Lookup</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/sharelist" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-share-alt"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Share Item List</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
|
||||
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/toolbox/scanner" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-barcode"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Broken Scanner</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/track" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-search"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Track Item</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/weather" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-cloud-sun"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Weather Lookahead</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/addrlookup" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-search-location"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Address Lookup</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/sharelist" class="item-link item-content">
|
||||
<div class="item-media"><i class="icon fas fa-share-alt"></i></div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Share Item List</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,100 +18,104 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list no-margin-top">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner margin-right">
|
||||
<div class="item-title item-label">Number and Street</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="row justify-content-stretch">
|
||||
<div class="col-50 item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">City</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="cityinput" placeholder="City" value="" autocomplete="off" autocorrect="off">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
|
||||
<div class="list no-margin-top">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="item-content item-input">
|
||||
<div class="item-inner margin-right">
|
||||
<div class="item-title item-label">Number and Street</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="numberstreetinput" placeholder="1234 Example Rd" value="" autocomplete="off" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-20 item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">State</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="stateinput" placeholder="ST" value="" maxlength="2" autocomplete="off" autocorrect="off">
|
||||
</li>
|
||||
<li>
|
||||
<div class="row justify-content-stretch">
|
||||
<div class="col-50 item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">City</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="cityinput" placeholder="City" value="" autocomplete="off" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-20 item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">State</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="stateinput" placeholder="ST" value="" maxlength="2" 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" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
|
||||
</div>
|
||||
</div>
|
||||
</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" id="zipcodeinput" placeholder="12345" value="" autocomplete="off" autocorrect="off">
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill margin-bottom-half" id="addresslookupbtn" onclick="addressLookup();"><i class="fas fa-search"></i> Lookup</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-divider">Result</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text"><span id="address"></span><br /><span id="citystate"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill margin-bottom-half" id="addresslookupbtn" onclick="addressLookup();"><i class="fas fa-search"></i> Lookup</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-divider">Result</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text"><span id="address"></span><br /><span id="citystate"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Delivery Point: <span id="dp"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Route: <span id="route"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">County: <span id="county"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">DPV Confirmed: <span id="dpvconfirmed"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="georesult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Geo: <a id="geocoords"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="barcoderesult display-none">
|
||||
<div class="item-content bg-color-white padding-half padding-horizontal" style="display: flex; justify-content: center;">
|
||||
<img class="barcode" id="postnetbarcode" style="max-width: 100%;" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Delivery Point: <span id="dp"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Route: <span id="route"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">County: <span id="county"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="addrresult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">DPV Confirmed: <span id="dpvconfirmed"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="georesult display-none">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Geo: <a id="geocoords"></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="barcoderesult display-none">
|
||||
<div class="item-content bg-color-white padding-half padding-horizontal" style="display: flex; justify-content: center;">
|
||||
<img class="barcode" id="postnetbarcode" style="max-width: 100%;" />
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,34 +17,38 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/toolbox/scanner/scanner" class="item-link item-content">
|
||||
<div class="item-media">1</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Scan Barcode</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/scanner/entries" class="item-link item-content">
|
||||
<div class="item-media">2</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Review Entries</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
|
||||
<div class="list no-hairlines tablet-inset" style="margin-top: 0;">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/toolbox/scanner/scanner" class="item-link item-content">
|
||||
<div class="item-media">1</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Scan Barcode</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/toolbox/scanner/entries" class="item-link item-content">
|
||||
<div class="item-media">2</div>
|
||||
<div class="item-inner">
|
||||
<div class="item-title">Review Entries</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Scan barcodes while your postal scanner is crashed or restarting.
|
||||
When the scanner is working again, you can scan all the saved
|
||||
barcodes from your phone screen using the scanner's Manual Input or
|
||||
Scan Barcode feature.
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Scan barcodes while your postal scanner is crashed or restarting.
|
||||
When the scanner is working again, you can scan all the saved
|
||||
barcodes from your phone screen using the scanner's Manual Input or
|
||||
Scan Barcode feature.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,38 +22,42 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
{{#if entries}}
|
||||
<div class="list media-list no-margin-top no-hairlines">
|
||||
<ul>
|
||||
{{#each entries}}
|
||||
<li style="padding-top: 2rem; padding-bottom: 2rem;">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode_entry" id="barcode_{{code}}" data-barcode="{{code}}"></svg>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
|
||||
{{#if entries}}
|
||||
<div class="list media-list no-margin-top no-hairlines">
|
||||
<ul>
|
||||
{{#each entries}}
|
||||
<li style="padding-top: 2rem; padding-bottom: 2rem;">
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode_entry" id="barcode_{{code}}" data-barcode="{{code}}"></svg>
|
||||
</div>
|
||||
<div class="item-text text-align-center">{{event}}</div>
|
||||
<div class="item-text text-align-center">{{date}}</div>
|
||||
{{#if form3849}}
|
||||
<h2 class="item-text text-align-center">Form 3849:</h2>
|
||||
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode_entry" id="barcode_{{form3849}}" data-barcode="{{form3849}}"></svg>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-text text-align-center">{{event}}</div>
|
||||
<div class="item-text text-align-center">{{date}}</div>
|
||||
{{#if form3849}}
|
||||
<h2 class="item-text text-align-center">Form 3849:</h2>
|
||||
<div style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode_entry" id="barcode_{{form3849}}" data-barcode="{{form3849}}"></svg>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="block text-align-center">
|
||||
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/barcode-dashed.svg" class="margin-vertical" />
|
||||
<h2 class="margin-top">
|
||||
No scan entries.
|
||||
</h2>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="block text-align-center">
|
||||
<img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/barcode-dashed.svg" class="margin-vertical" />
|
||||
<h2 class="margin-top">
|
||||
No scan entries.
|
||||
</h2>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<script src="assets/js/toolbox_scannerentries.js"></script>
|
||||
|
||||
@ -95,11 +95,15 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list no-hairlines tablet-inset">
|
||||
<ul id="codelist">
|
||||
</ul>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
|
||||
<div class="list no-hairlines tablet-inset">
|
||||
<ul id="codelist">
|
||||
</ul>
|
||||
</div>
|
||||
<div style="height: 3rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 3rem;"></div>
|
||||
</div>
|
||||
|
||||
<script src="assets/js/toolbox_scanner.js"></script>
|
||||
|
||||
@ -17,50 +17,54 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list media-list no-hairlines tablet-inset no-margin-top">
|
||||
<ul>
|
||||
<li class="item-divider">Send List</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill" id="sendlistbtn" onclick="uploadList();"><i class="fas fa-upload"></i> Upload List</a>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: none;" id="listidbarcodeli">
|
||||
<div class="item-content" style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode" id="listidbarcode"></svg>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="item-divider">Receive List</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">List ID</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="getlistidbox" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
|
||||
<span class="input-clear-button"></span>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
|
||||
<div class="list media-list no-hairlines tablet-inset no-margin-top">
|
||||
<ul>
|
||||
<li class="item-divider">Send List</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill" id="sendlistbtn" onclick="uploadList();"><i class="fas fa-upload"></i> Upload List</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<a class="button button-fill" onclick="downloadItemList();"><i class="fas fa-download"></i> Download List</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill" id="scanlistbarcodebtn" onclick="scanListIDBarcode();"><i class="fas fa-barcode"></i> Scan List Barcode</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li style="display: none;" id="listidbarcodeli">
|
||||
<div class="item-content" style="background-color: white; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode" id="listidbarcode"></svg>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Share your delivery list to another device. The sender uploads the list,
|
||||
and the receiver(s) either scan the barcode on the sender's device, or
|
||||
type in the code beneath the barcode.
|
||||
|
||||
<li class="item-divider">Receive List</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">List ID</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" id="getlistidbox" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<a class="button button-fill" onclick="downloadItemList();"><i class="fas fa-download"></i> Download List</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<a class="button button-fill" id="scanlistbarcodebtn" onclick="scanListIDBarcode();"><i class="fas fa-barcode"></i> Scan List Barcode</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Share your delivery list to another device. The sender uploads the list,
|
||||
and the receiver(s) either scan the barcode on the sender's device, or
|
||||
type in the code beneath the barcode.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -23,49 +23,53 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list no-hairlines tablet-inset">
|
||||
<ul>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Tracking Code</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" name="trackingcode" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<a class="button button-fill" id="trackbtn"><i class="fas fa-search-location"></i> Track</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40">
|
||||
<div class="list no-hairlines tablet-inset elevation-tablet">
|
||||
<ul>
|
||||
<li class="item-content item-input">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-label">Tracking Code</div>
|
||||
<div class="item-input-wrap">
|
||||
<input type="text" name="trackingcode" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
|
||||
<span class="input-clear-button"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-content">
|
||||
<a class="button button-fill" id="trackbtn"><i class="fas fa-search-location"></i> Track</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Compatible with USPS, UPS, FedEx, and DHL tracking codes.
|
||||
Can extract full delivery point address (and sometimes customer phone number)
|
||||
from 2D FedEx and UPS Mail Innovations barcodes.
|
||||
</div>
|
||||
<div class="block text-align-center">
|
||||
<i class="material-icons material-icons-24px">info</i>
|
||||
<br />
|
||||
Compatible with USPS, UPS, FedEx, and DHL tracking codes.
|
||||
Can extract full delivery point address (and sometimes customer phone number)
|
||||
from 2D FedEx and UPS Mail Innovations barcodes.
|
||||
</div>
|
||||
|
||||
{{#if trackingcodehistory}}
|
||||
<div class="list no-hairlines tablet-inset">
|
||||
<ul>
|
||||
<li class="item-divider">
|
||||
History
|
||||
</li>
|
||||
{{#each trackingcodehistory}}
|
||||
<li>
|
||||
<div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">{{this}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{#if trackingcodehistory}}
|
||||
<div class="list no-hairlines tablet-inset elevation-tablet">
|
||||
<ul>
|
||||
<li class="item-divider">
|
||||
History
|
||||
</li>
|
||||
{{#each trackingcodehistory}}
|
||||
<li>
|
||||
<div class="item-link item-content" onclick="openTrackingHistory('{{this}}')">
|
||||
<div class="item-inner">
|
||||
<div class="item-title">{{this}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<script src="assets/js/toolbox_track.js"></script>
|
||||
|
||||
@ -22,59 +22,63 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="list media-list no-hairlines tablet-inset no-margin-top">
|
||||
<ul>
|
||||
<li class="item-divider">Information</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
{{#with current}}
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">{{status}}</div>
|
||||
<div class="item-after">{{date}}</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
|
||||
<div class="list media-list no-hairlines tablet-inset no-margin-top">
|
||||
<ul>
|
||||
<li class="item-divider">Information</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
{{#with current}}
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">{{status}}</div>
|
||||
<div class="item-after">{{date}}</div>
|
||||
</div>
|
||||
<div class="item-text">{{details}}</div>
|
||||
<div class="item-text"><b>{{location.display}}</b></div>
|
||||
{{/with}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-text">{{details}}</div>
|
||||
<div class="item-text"><b>{{location.display}}</b></div>
|
||||
{{/with}}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Tracking Code: {{code}}</div>
|
||||
<div class="item-text">Carrier: {{carrier.name}}</div>
|
||||
{{#if service.name}}<div class="item-text">Service: {{service.name}}</div>{{/if}}
|
||||
<div class="item-text">From: {{addresses.from}}</div>
|
||||
<div class="item-text">To: {{addresses.to}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content bg-color-white" style="display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode" id="trackingbarcode"></svg>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-divider">History</li>
|
||||
{{#each history}}
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">{{status}}</div>
|
||||
<div class="item-after">{{date}}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-text">Tracking Code: {{code}}</div>
|
||||
<div class="item-text">Carrier: {{carrier.name}}</div>
|
||||
{{#if service.name}}<div class="item-text">Service: {{service.name}}</div>{{/if}}
|
||||
<div class="item-text">From: {{addresses.from}}</div>
|
||||
<div class="item-text">To: {{addresses.to}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-text">{{details}}</div>
|
||||
<div class="item-text"><b>{{location.display}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{else}}
|
||||
<li class="item-content">
|
||||
No item history found.
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content bg-color-white" style="display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem;">
|
||||
<svg class="barcode" id="trackingbarcode"></svg>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-divider">History</li>
|
||||
{{#each history}}
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title">{{status}}</div>
|
||||
<div class="item-after">{{date}}</div>
|
||||
</div>
|
||||
<div class="item-text">{{details}}</div>
|
||||
<div class="item-text"><b>{{location.display}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{{else}}
|
||||
<li class="item-content">
|
||||
No item history found.
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -22,29 +22,32 @@
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-100 small-80 medium-60 large-50 xlarge-40">
|
||||
<div class="block text-align-center">
|
||||
<img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
|
||||
|
||||
<div class="block text-align-center">
|
||||
<img id="weathericon" style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/weather-none.svg" class="margin-vertical" />
|
||||
<div class="row">
|
||||
<div class="col-50">
|
||||
<h2>Low: <span id="lowtemp">...</span></h2>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<h2>High: <span id="hightemp">...</span></h2>
|
||||
</div>
|
||||
<div class="col-100">
|
||||
<h3>Precipitation: <span id="precipchance">...</span></h3>
|
||||
<h3>Wind speed: <span id="windspeed">...</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-50">
|
||||
<h2>Low: <span id="lowtemp">...</span></h2>
|
||||
<div class="block-footer">
|
||||
<span id="forecast-location"></span>
|
||||
<br />
|
||||
<span id="forecast-info"></span>
|
||||
<br />
|
||||
<a id="forecast-creditlink" href="" onclick=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<h2>High: <span id="hightemp">...</span></h2>
|
||||
</div>
|
||||
<div class="col-100">
|
||||
<h3>Precipitation: <span id="precipchance">...</span></h3>
|
||||
<h3>Wind speed: <span id="windspeed">...</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block-footer">
|
||||
<span id="forecast-location"></span>
|
||||
<br />
|
||||
<span id="forecast-info"></span>
|
||||
<br />
|
||||
<a id="forecast-creditlink" href="" onclick=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user