diff --git a/www/assets/css/app.css b/www/assets/css/app.css index b8e8ecb..23b25da 100644 --- a/www/assets/css/app.css +++ b/www/assets/css/app.css @@ -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; @@ -202,4 +207,31 @@ 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))); } \ No newline at end of file diff --git a/www/assets/js/dropandsend.js b/www/assets/js/dropandsend.js index 9957b92..997904c 100644 --- a/www/assets/js/dropandsend.js +++ b/www/assets/js/dropandsend.js @@ -65,4 +65,77 @@ $("#app").on("click", "#pickupCodeManualEntryBtn", function () { }, function (cancel) { }, ""); +}); + +$("#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 = " Unknown package size limits"; + switch (type) { + case "micro": + typedesc = " Fits envelopes"; + break; + case "mini": + typedesc = " Fits large envelopes and small packages"; + break; + case "standard": + typedesc = " Fits up to medium-size packages"; + break; + case "large": + typedesc = " Fits most packages"; + break; + case "business": + typedesc = " 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("" + name + "
" + typedesc + + "
Hours:
" + hours + + "
More Info:
" + info + + "
Directions") + .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") + ")"); + } }); \ No newline at end of file diff --git a/www/assets/js/main.js b/www/assets/js/main.js index a818fd9..d530aed 100644 --- a/www/assets/js/main.js +++ b/www/assets/js/main.js @@ -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) { diff --git a/www/pages/account.html b/www/pages/account.html index 6a14fd0..3011f67 100644 --- a/www/pages/account.html +++ b/www/pages/account.html @@ -133,7 +133,7 @@

Update Account

-
-
- By using Drop and Send you agree to the terms of service. +
+ + + + + + diff --git a/www/routes.js b/www/routes.js index a381521..2c45e14 100644 --- a/www/routes.js +++ b/www/routes.js @@ -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 = " Unknown package size limits"; - switch (type) { - case "micro": - typedesc = " Fits envelopes"; - break; - case "mini": - typedesc = " Fits large envelopes and small packages"; - break; - case "standard": - typedesc = " Fits up to medium-size packages"; - break; - case "large": - typedesc = " Fits most packages"; - break; - case "business": - typedesc = " 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("" + name + "
" + typedesc - + "
Hours:
" + hours - + "
More Info:
" + info - + "
Directions") - .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; } } },