Add illustrations to tracking tabs

master
Skylar Ittner 2 years ago
parent d8f58a0a7e
commit cfff796926

@ -194,3 +194,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
}
.fullwidth-filler-image {
max-height: 40vh;
max-width: 90%;
height: 50rem;
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 9.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.5 KiB

@ -22,9 +22,12 @@ function openTrackingInfoPage(code) {
function addTrackingSuggestions() {
$("#tracking-history-list ul").html("");
$("#tracking-history-list-empty").addClass("display-none");
$("#tracking-history-list .list").removeClass("display-none");
var history = getTrackingHistory();
if (history == false || history.length == 0) {
$("#tracking-history-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center" style="color: var(--f7-list-item-footer-text-color);">You haven\'t tracked anything yet.</div></li>');
$("#tracking-history-list-empty").removeClass("display-none");
$("#tracking-history-list .list").addClass("display-none");
} else {
for (var i = history.length - 1; i >= 0; i--) {
$("#tracking-history-list ul").append('<li><a class="item-link item-content hapticbtn tracking-code-history-link" data-trackingcode="' + history[i] + '" href="/track/' + history[i] + '">'
@ -34,6 +37,8 @@ function addTrackingSuggestions() {
}
}
if (inStorage("accountkey") && inStorage("accountnumber")) {
$("#tracking-account-list-empty").addClass("display-none");
$("#tracking-account-list .list").removeClass("display-none");
apirequest(SETTINGS.apis.gettrackingnumbers, {
accountnumber: getStorage("accountnumber"),
accountkey: getStorage("accountkey")
@ -52,7 +57,8 @@ function addTrackingSuggestions() {
}
if (success.trackingnumbers.length == 0) {
$("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title" style="color: var(--f7-list-item-footer-text-color);">You have no recent shipments.</div></div></li>');
$("#tracking-account-list-empty").removeClass("display-none");
$("#tracking-account-list .list").addClass("display-none");
}
} else {
$("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title" style="color: var(--f7-list-item-footer-text-color);">Error: ' + success.msg + '</div></div></li>');
@ -62,9 +68,12 @@ function addTrackingSuggestions() {
sendErrorReport("Tracking", "Couldn't get account tracking codes", "Server/network problem: " + xhr.status + ": " + xhr.statusText);
}, "GET");
} else {
$("#tracking-account-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title noselect" style="color: var(--f7-list-item-footer-text-color);">Get an account to use this feature.</div></div></li>');
$("#tracking-account-list-empty").removeClass("display-none");
$("#tracking-account-list .list").addClass("display-none");
}
$("#tracking-multi-list-empty").addClass("display-none");
$("#tracking-multi-list .list").removeClass("display-none");
var codes = getTrackingMultiList();
if (codes.length > 0) {
$("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect">Loading...</div></li>');
@ -73,13 +82,16 @@ function addTrackingSuggestions() {
updateTrackingMultiListStatus();
}
} else {
$("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect"><span>Quickly see the latest status for multiple packages at the same time right here. <span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.</span></div></li>');
$("#tracking-multi-list-empty").removeClass("display-none");
$("#tracking-multi-list .list").addClass("display-none");
}
}
function updateTrackingMultiListStatus() {
var codes = getTrackingMultiList();
console.log(codes.length);
$("#tracking-multi-list-empty").addClass("display-none");
$("#tracking-multi-list .list").removeClass("display-none");
$("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center"><div class="item-title">Loading...</div></div></li>');
if (codes.length > 0) {
$("#tracking-multi-list ul").html("");
@ -127,7 +139,8 @@ function updateTrackingMultiListStatus() {
});
} else {
$("#tracking-multi-list ul").html('<li class="item-content"><div class="item-inner justify-content-center text-align-center noselect"><span>Quickly see the latest status for multiple packages at the same time right here. <span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.</span></div></li>');
$("#tracking-multi-list-empty").removeClass("display-none");
$("#tracking-multi-list .list").addClass("display-none");
}
}

@ -42,7 +42,7 @@
{{else}}
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img src="assets/images/receipt.svg" class="margin" style="max-height: 40vh; max-width: 90%; height: 50rem;" />
<img src="assets/images/receipt.svg" class="margin fullwidth-filler-image" />
<p class="margin padding">You don't have any receipts linked to your account. Use our services to get some!</p>
</div>
</div>

@ -62,6 +62,16 @@
</ul>
</div>
<div id="tracking-history-list-empty" class="display-none row justify-content-center noselect">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img src="assets/images/tracking.svg" class="margin fullwidth-filler-image" />
<p class="margin padding">
Tracking numbers you've searched recently will appear here.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="tracking-account-list" class="tab">
@ -75,6 +85,16 @@
</li>
</ul>
</div>
<div id="tracking-account-list-empty" class="display-none row justify-content-center noselect">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img src="assets/images/searching.svg" class="margin fullwidth-filler-image" />
<p class="margin padding">
Send packages with your Helena Express account and your tracking numbers will be listed here automatically.
</p>
</div>
</div>
</div>
</div>
</div>
<div id="tracking-multi-list" class="tab">
@ -88,6 +108,17 @@
</li>
</ul>
</div>
<div id="tracking-multi-list-empty" class="display-none row justify-content-center noselect">
<div class="col-100 medium-60 large-50 xlarge-40">
<div class="block text-align-center">
<img src="assets/images/multi-track.svg" class="margin fullwidth-filler-image" />
<p class="margin padding">
Quickly see the latest status for multiple packages at the same time right here.
<span class="taptext">Long-press</span><span class="clicktext">Right-click</span>&nbsp;a tracking code in the Recent tab to add it.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save