Put Drop and Send map into popup, add "how it works" info
This commit is contained in:
parent
b826373a78
commit
e706449da2
@ -29,7 +29,6 @@ Framework7 and FontAwesome both have a .fab class
|
||||
}
|
||||
|
||||
.theme-dark .page {
|
||||
/* TODO: make this dark */
|
||||
background-color: black;
|
||||
background-image: url(../images/background-transparent.svg);
|
||||
background-repeat: no-repeat;
|
||||
@ -44,12 +43,18 @@ Framework7 and FontAwesome both have a .fab class
|
||||
.list.transparent ul li.item-divider {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
.popup {
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
}
|
||||
.theme-dark .list.transparent ul {
|
||||
background-color: rgba(0,0,0,0.65);
|
||||
}
|
||||
.theme-dark .list.transparent ul li.item-divider {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
.theme-dark .popup {
|
||||
background-color: rgba(0,0,0,0.95);
|
||||
}
|
||||
|
||||
.navbar, .navbar-bg {
|
||||
background-color: #d0f2fc;
|
||||
@ -203,3 +208,30 @@ Framework7 and FontAwesome both have a .fab class
|
||||
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
|
||||
border-left-color: var(--f7-page-bg-color);
|
||||
}
|
||||
|
||||
.list.basic-list li {
|
||||
padding-top: calc(var(--f7-list-item-min-height) / 4);
|
||||
padding-bottom: calc(var(--f7-list-item-min-height) / 4);
|
||||
padding-left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left));
|
||||
padding-right: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-right));
|
||||
}
|
||||
|
||||
.list.basic-list ul ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.list.basic-list li:not(:last-child):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: var(--f7-list-item-border-color);
|
||||
display: block;
|
||||
z-index: 15;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
|
||||
}
|
||||
@ -66,3 +66,76 @@ $("#app").on("click", "#pickupCodeManualEntryBtn", function () {
|
||||
|
||||
}, "");
|
||||
});
|
||||
|
||||
$("#app").on("popup:open", "#dasLocationMapPopup", function () {
|
||||
if (dropboxMap == null) {
|
||||
var mapboxel = document.getElementById("mapbox-dropboxes");
|
||||
dropboxMap = new MapControl(mapboxel, true);
|
||||
dropboxMap.reloadMap();
|
||||
dropboxMap.mapObj.on('load', function () {
|
||||
dropboxMap.mapObj.jumpTo({center: [-112.005, 46.589], zoom: 8});
|
||||
dropboxMap.loadIcon("./assets/images/dropbox-icon.png", "dropbox", function () {
|
||||
apirequest(SETTINGS.apis.dropandsendlocations, {}, function (data) {
|
||||
dropboxMap.loadMarkersFromGeoJson(data, "dropbox", "dropbox");
|
||||
dropboxMap.mapObj.on('click', 'marker-layer-dropbox', function (e) {
|
||||
var coordinates = e.features[0].geometry.coordinates.slice();
|
||||
var name = e.features[0].properties.name;
|
||||
var type = e.features[0].properties.type;
|
||||
var info = e.features[0].properties.info;
|
||||
var hours = e.features[0].properties.hours;
|
||||
var geolink = "geo:" + (Math.round(coordinates[1] * 1000000) / 1000000) + "," + (Math.round(coordinates[0] * 1000000) / 1000000);
|
||||
|
||||
var typedesc = "<i class='fas fa-question-circle'></i> Unknown package size limits";
|
||||
switch (type) {
|
||||
case "micro":
|
||||
typedesc = "<i class='fas fa-envelope'></i> Fits envelopes";
|
||||
break;
|
||||
case "mini":
|
||||
typedesc = "<i class='fas fa-mail-bulk'></i> Fits large envelopes and small packages";
|
||||
break;
|
||||
case "standard":
|
||||
typedesc = "<i class='fas fa-box-alt'></i> Fits up to medium-size packages";
|
||||
break;
|
||||
case "large":
|
||||
typedesc = "<i class='fas fa-boxes-alt'></i> Fits most packages";
|
||||
break;
|
||||
case "business":
|
||||
typedesc = "<i class='fas fa-store-alt'></i> Shipping location, accepts any size package";
|
||||
break;
|
||||
}
|
||||
|
||||
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
|
||||
new mapboxgl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML("<b>" + name + "</b><br>" + typedesc
|
||||
+ "<br><b>Hours:</b><br>" + hours
|
||||
+ "<br><b>More Info:</b><br>" + info
|
||||
+ "<br><a class=\"button button-fill button-small\" href=\"" + geolink + "\"><i class=\"fas fa-location-circle\"></i> Directions</a>")
|
||||
.addTo(dropboxMap.mapObj);
|
||||
});
|
||||
|
||||
dropboxMap.mapObj.on('mouseenter', 'marker-layer-dropbox', function () {
|
||||
dropboxMap.mapObj.getCanvas().style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
dropboxMap.mapObj.on('mouseleave', 'marker-layer-dropbox', function () {
|
||||
dropboxMap.mapObj.getCanvas().style.cursor = '';
|
||||
});
|
||||
dropboxMap.animateMapIn(46.589, -112.005, 9, 0);
|
||||
}, function (error) {
|
||||
|
||||
}, "GET");
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("#app").on("popup:open", "#dasHowItWorksPopup", function () {
|
||||
// Put user's account number in the instructions
|
||||
if (inStorage("phonenumber") && inStorage("accountkey")) {
|
||||
$("#dasHowItWorksAccountNumber").text(" (yours is " + getStorage("phonenumber") + ")");
|
||||
}
|
||||
});
|
||||
@ -63,9 +63,11 @@ router.on("pageInit", function (pagedata) {
|
||||
* @returns {undefined}
|
||||
*/
|
||||
function handleBackButton() {
|
||||
// Close map sheet if it's open
|
||||
// Close sheet if it's open
|
||||
if ($(".sheet-modal").hasClass("modal-in")) {
|
||||
app.sheet.close();
|
||||
} else if ($(".popup").hasClass("modal-in")) {
|
||||
app.popup.close();
|
||||
} else if ($(".searchbar-enabled")[0]) {
|
||||
app.searchbar.disable();
|
||||
} else if (scanningBarcode) {
|
||||
|
||||
@ -133,7 +133,7 @@
|
||||
<h3>Update Account</h3>
|
||||
</div>
|
||||
<div class="list no-hairlines">
|
||||
<ul id="accountupdateform">
|
||||
<ul id="accountupdateform" style="background: transparent;">
|
||||
<li class="item-content item-input item-input-outline">
|
||||
<div class="item-inner">
|
||||
<div class="item-title item-floating-label">Name</div>
|
||||
|
||||
@ -24,22 +24,38 @@
|
||||
<div class="list transparent no-hairlines no-margin-top-sm tablet-inset elevation-tablet media-list">
|
||||
<ul>
|
||||
<li class="padding">
|
||||
Use one of our Drop and Send package drop locations to send mail,
|
||||
packages, and more. No lines, no appointment, no postage, no label
|
||||
printing, no problem!
|
||||
Use one of our Drop and Send package drop boxes for easier shipping,
|
||||
and say goodbye to standing in line at the post office. Use your choice of
|
||||
USPS, UPS, or FedEx (or let us pick the cheapest), purchase shipping
|
||||
insurance, and more!
|
||||
</li>
|
||||
<li class="item-divider">Step 1: Find a Location</li>
|
||||
<li>
|
||||
<div class="mapbox" style="width: 100%; min-height: 300px; max-height: 800px; height: 50vh;" id="mapbox-dropboxes"></div>
|
||||
<div class="item-content item-link hapticbtn popup-open" data-popup="#dasHowItWorksPopup">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title"><i class="fas fa-question-circle"></i> How It Works</div>
|
||||
</div>
|
||||
<div class="item-text">Learn how Drop and Send works when sending a package.</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content item-link hapticbtn popup-open" data-popup="#dasLocationMapPopup">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title"><i class="fas fa-map-marked"></i> Locations</div>
|
||||
</div>
|
||||
<div class="item-text">Find a nearby Drop and Send location to use.</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="item-divider">Step 2: Request Pickup</li>
|
||||
<li>
|
||||
<div class="item-content item-link hapticbtn" id="pickupCodeQRScanBtn">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
<div class="item-title"><i class="fas fa-qrcode"></i> Scan Pickup Code</div>
|
||||
</div>
|
||||
<div class="item-text">Scan the pickup code and we'll come get your package.</div>
|
||||
<div class="item-text">Scan a Pickup Code on a drop box and we'll come get your package.</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@ -49,15 +65,81 @@
|
||||
<div class="item-title-row">
|
||||
<div class="item-title"><i class="fas fa-keyboard"></i> Type Location Number</div>
|
||||
</div>
|
||||
<div class="item-text">Type the location number and we'll come get your package.</div>
|
||||
<div class="item-text">Type the location number on the drop box and we'll come get your package.</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="item-content">
|
||||
<div class="item-inner">
|
||||
<div class="item-title-row">
|
||||
</div>
|
||||
<div class="item-text">By using Drop and Send you agree to the <a onclick="openBrowser('https://helena.express/das/terms')">terms of service</a>.</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="block">
|
||||
By using Drop and Send you agree to the <a onclick="openBrowser('https://helena.express/das/terms')">terms of service</a>.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup" id="dasLocationMapPopup">
|
||||
<div class="navbar">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
<a class="link popup-close" href="#">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="if-not-md">Close</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">Drop and Send Locations</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mapbox" style="width: 100%; height: 100%;" id="mapbox-dropboxes"></div>
|
||||
</div>
|
||||
|
||||
<div class="popup" id="dasHowItWorksPopup">
|
||||
<div class="navbar">
|
||||
<div class="navbar-bg"></div>
|
||||
<div class="navbar-inner">
|
||||
<div class="left">
|
||||
<a class="link popup-close" href="#">
|
||||
<i class="icon icon-back"></i>
|
||||
<span class="if-not-md">Close</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="title">How It Works</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow-y: auto; height: calc(95% - calc(var(--f7-navbar-height) + var(--f7-safe-area-top)));">
|
||||
<div class="list basic-list no-margin no-hairlines">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="fad fa-map-marked"></i> Use this app to find the closest Drop and Send package drop box.
|
||||
</li>
|
||||
<li>
|
||||
<i class="fad fa-edit"></i> Fill out a provided label with your account number<span id="dasHowItWorksAccountNumber"></span>, to and from addresses, and any extra options like speed and insurance. Put the label on your package.
|
||||
<ul>
|
||||
<li>
|
||||
<i class="fad fa-globe-europe"></i> If your package is going to a military APO/FPO address, or is going to another country, fill out and attach a customs form too.
|
||||
</li>
|
||||
<li>
|
||||
<i class="fad fa-info-circle"></i> If your package already has a prepaid shipping label, or it's too small for a full-size label, just add your account number to the package. Small labels are provided and will be removed by us before we ship your package.
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<i class="far fa-qrcode"></i> Scan the Pickup Code (or type the location number) on the drop box to alert us there's a package to send.
|
||||
</li>
|
||||
<li>
|
||||
<i class="fad fa-box-alt"></i> Place your package inside the secure drop box.
|
||||
</li>
|
||||
<li>
|
||||
<i class="fad fa-receipt"></i> Wait for an emailed receipt from us with the tracking code. Your credit card is automatically billed for the cost of shipping.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
var routes = [
|
||||
{
|
||||
{
|
||||
path: '/welcome',
|
||||
templateUrl: './pages/welcome.html',
|
||||
name: 'welcome',
|
||||
@ -132,68 +132,8 @@ var routes = [
|
||||
name: 'dropandsend',
|
||||
templateUrl: './pages/dropandsend.html',
|
||||
on: {
|
||||
pageAfterIn: function () {
|
||||
var mapboxel = document.getElementById("mapbox-dropboxes");
|
||||
dropboxMap = new MapControl(mapboxel, true);
|
||||
dropboxMap.reloadMap();
|
||||
dropboxMap.mapObj.on('load', function () {
|
||||
dropboxMap.mapObj.jumpTo({center: [-112.005, 46.589], zoom: 8});
|
||||
dropboxMap.loadIcon("./assets/images/dropbox-icon.png", "dropbox", function () {
|
||||
apirequest(SETTINGS.apis.dropandsendlocations, {}, function (data) {
|
||||
dropboxMap.loadMarkersFromGeoJson(data, "dropbox", "dropbox");
|
||||
dropboxMap.mapObj.on('click', 'marker-layer-dropbox', function (e) {
|
||||
var coordinates = e.features[0].geometry.coordinates.slice();
|
||||
var name = e.features[0].properties.name;
|
||||
var type = e.features[0].properties.type;
|
||||
var info = e.features[0].properties.info;
|
||||
var hours = e.features[0].properties.hours;
|
||||
var geolink = "geo:" + (Math.round(coordinates[1] * 1000000) / 1000000) + "," + (Math.round(coordinates[0] * 1000000) / 1000000);
|
||||
|
||||
var typedesc = "<i class='fas fa-question-circle'></i> Unknown package size limits";
|
||||
switch (type) {
|
||||
case "micro":
|
||||
typedesc = "<i class='fas fa-envelope'></i> Fits envelopes";
|
||||
break;
|
||||
case "mini":
|
||||
typedesc = "<i class='fas fa-mail-bulk'></i> Fits large envelopes and small packages";
|
||||
break;
|
||||
case "standard":
|
||||
typedesc = "<i class='fas fa-box-alt'></i> Fits up to medium-size packages";
|
||||
break;
|
||||
case "large":
|
||||
typedesc = "<i class='fas fa-boxes-alt'></i> Fits most packages";
|
||||
break;
|
||||
case "business":
|
||||
typedesc = "<i class='fas fa-store-alt'></i> Shipping location, accepts any size package";
|
||||
break;
|
||||
}
|
||||
|
||||
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
||||
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
|
||||
}
|
||||
|
||||
new mapboxgl.Popup()
|
||||
.setLngLat(coordinates)
|
||||
.setHTML("<b>" + name + "</b><br>" + typedesc
|
||||
+ "<br><b>Hours:</b><br>" + hours
|
||||
+ "<br><b>More Info:</b><br>" + info
|
||||
+ "<br><a class=\"button button-fill button-small\" href=\"" + geolink + "\"><i class=\"fas fa-location-circle\"></i> Directions</a>")
|
||||
.addTo(dropboxMap.mapObj);
|
||||
});
|
||||
|
||||
dropboxMap.mapObj.on('mouseenter', 'marker-layer-dropbox', function () {
|
||||
dropboxMap.mapObj.getCanvas().style.cursor = 'pointer';
|
||||
});
|
||||
|
||||
dropboxMap.mapObj.on('mouseleave', 'marker-layer-dropbox', function () {
|
||||
dropboxMap.mapObj.getCanvas().style.cursor = '';
|
||||
});
|
||||
dropboxMap.animateMapIn(46.589, -112.005, 9, 0);
|
||||
}, function (error) {
|
||||
|
||||
}, "GET");
|
||||
});
|
||||
});
|
||||
pageAfterOut: function () {
|
||||
dropboxMap = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user