diff --git a/www/css/styles.css b/www/css/styles.css index 6bc45b8..8430a2e 100644 --- a/www/css/styles.css +++ b/www/css/styles.css @@ -98,4 +98,25 @@ html.md .navbar .link { width: auto; height: 55em; max-height: 50vh; +} + +#map { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.card-expandable.card-closing, .card-expandable.card-opened, .card-expandable.card-opening { + z-index: 9999999; +} + +.card-expandable #map { + top: var(--f7-navbar-height); + height: calc(100% - var(--f7-navbar-height)); +} + +.card-backdrop { + z-index: 999999; } \ No newline at end of file diff --git a/www/img/money-send.svg b/www/img/money-send.svg new file mode 100644 index 0000000..adf4cb8 --- /dev/null +++ b/www/img/money-send.svg @@ -0,0 +1,2 @@ + + diff --git a/www/index.html b/www/index.html index 921a90f..63e208f 100644 --- a/www/index.html +++ b/www/index.html @@ -11,6 +11,8 @@ + + Helping Helena @@ -28,6 +30,9 @@ + + + diff --git a/www/js/home.js b/www/js/home.js index 98dbaa8..e1c8a44 100644 --- a/www/js/home.js +++ b/www/js/home.js @@ -23,7 +23,8 @@ $(".view-main").on("card:close", ".card-expandable", function () { $(".view-main").on("card:closed", ".card-expandable", function () { $(".ptr-preloader").removeClass("display-none"); - $("#receive-card").removeClass("card-expandable"); + $(this).removeClass("card-expandable"); + leafletmap.invalidateSize(); }); function loadBalance(callback) { @@ -50,6 +51,12 @@ function openReceiveCard() { app.card.open("#receive-card"); } +function openMapCard() { + $("#map-card").addClass("card-expandable"); + app.card.open("#map-card"); + leafletmap.invalidateSize(); +} + function loadQrCode(callback) { $("#receive-loading").removeClass("display-none"); callAPI("getprofile", { diff --git a/www/js/main.js b/www/js/main.js index e74f2ee..57e9fd2 100644 --- a/www/js/main.js +++ b/www/js/main.js @@ -17,7 +17,9 @@ var app = new Framework7({ name: "HelpingHelena", id: "com.netsyms.HelpingHelena", theme: platform_theme, - debug: true, + card: { + swipeToClose: false + }, init: true, initOnDeviceReady: false, routes: routes diff --git a/www/js/map.js b/www/js/map.js new file mode 100644 index 0000000..4a104b5 --- /dev/null +++ b/www/js/map.js @@ -0,0 +1,16 @@ +/* + * 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/. + */ + + +var leafletmap = L.map('map', { + attributionControl: false, + minZoom: 12 +}); +leafletmap.setView([46.595, -112.019], 13); +var gl = L.mapboxGL({ + accessToken: 'none', + style: 'https://maptiles.netsyms.net/styles/klokantech-basic/style.json' +}).addTo(leafletmap); \ No newline at end of file diff --git a/www/package.json b/www/package.json index 2da52bf..63ca007 100644 --- a/www/package.json +++ b/www/package.json @@ -9,6 +9,9 @@ "@fortawesome/fontawesome-free": "^5.6.3", "framework7": "^4", "jquery": "^3.3.1", + "leaflet": "^1.4.0", + "mapbox-gl": "^0.53.1", + "mapbox-gl-leaflet": "^0.0.4", "qrcode-generator": "^1.4.3" } } diff --git a/www/pages/home.html b/www/pages/home.html index 1a9c0ae..e7b5c52 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -79,6 +79,32 @@ + +
+
+ +
+ Nearby +
+ +
+ + +
+
+
+
+ @@ -88,10 +114,11 @@
- add +
+