Refine expanding card UX

www/css/styles.css

@@ -88,16 +88,24 @@ html.md .navbar .link {
     display: block !important;
 }
 
-#qrcode {
+.card-opened .card-header {
-    width: 10em;
+    display: none;
-    max-width: 100%;
-    max-height: 12em;
 }
 
-.card-expandable #qrcode {
+#qrcode, .card-closing #qrcode {
     width: auto;
+    max-width: 100%;
+    height: 12em;
+    transition: height 0.3s ease-in-out;
+}
+
+.card-opening #qrcode, .card-opened #qrcode {
     height: 55em;
-    max-height: 50vh;
+    max-height: 55vh;
+}
+
+#map-card {
+    background-color: hsl(47, 26%, 88%);
 }
 
 #map {
@@ -106,17 +114,44 @@ html.md .navbar .link {
     left: 0;
     height: 100%;
     width: 100%;
+    opacity: 1;
+    transition: opacity 0.5s linear, top 0.25s linear;
+    background-color: hsl(47, 26%, 88%);
 }
 
 .card-expandable.card-closing, .card-expandable.card-opened, .card-expandable.card-opening {
     z-index: 9999999;
 }
 
-.card-expandable #map {
+.card-opening #map, .card-closing #map {
+    opacity: 0;
+}
+
+.card-opened #map {
+    opacity: 1;
     top: var(--f7-navbar-height);
     height: calc(100% - var(--f7-navbar-height));
 }
 
 .card-backdrop {
     z-index: 999999;
+}
+
+#map .leaflet-control-attribution, #map .leaflet-control-zoom {
+    opacity: 0;
+    visibility: hidden;
+    transition: visibility 0s, opacity 0.5s;
+}
+
+.card-opened #map .leaflet-control-attribution, .card-opened #map .leaflet-control-zoom {
+    opacity: 1;
+    visibility: visible;
+}
+
+.card-expandable .navbar {
+    display: none;
+}
+
+.card-opened .navbar {
+    display: block;
 }

www/js/home.js

@@ -12,20 +12,18 @@ $(".view-main").on("ptr:refresh", ".ptr-content", function () {
     });
 });
 
+
 $(".view-main").on("card:open", ".card-expandable", function () {
     $(".ptr-preloader").addClass("display-none");
-    $(".card-expandable .navbar").removeClass("display-none");
 });
 
-$(".view-main").on("card:close", ".card-expandable", function () {
+$(".view-main").on("card:closed", "#map-card", function () {
-    $(".card-expandable .navbar").addClass("display-none");
+    leafletgllayer._glMap.setPitch(0);
+    leafletmap.invalidateSize();
 });
 
 $(".view-main").on("card:closed", ".card-expandable", function () {
     $(".ptr-preloader").removeClass("display-none");
-    $(this).removeClass("card-expandable");
-    leafletgllayer._glMap.setPitch(0);
-    leafletmap.invalidateSize();
 });
 
 function loadBalance(callback) {
@@ -47,14 +45,7 @@ function loadBalance(callback) {
     });
 }
 
-function openReceiveCard() {
-    $("#receive-card").addClass("card-expandable");
-    app.card.open("#receive-card");
-}
-
 function openMapCard() {
-    $("#map-card").addClass("card-expandable");
-    app.card.open("#map-card");
     leafletgllayer._glMap.setPitch(40);
     leafletmap.invalidateSize();
 }

www/js/map.js

@@ -6,11 +6,13 @@
 
 
 var leafletmap = L.map('map', {
-    attributionControl: false,
+    minZoom: 12,
-    minZoom: 12
+    maxZoom: 20
 });
 leafletmap.setView([46.595, -112.019], 13);
+leafletmap.attributionControl.setPrefix("");
 var leafletgllayer = L.mapboxGL({
+    attribution: "© OpenMapTiles © OpenStreetMap contributors",
     accessToken: 'none',
     style: 'https://maps.netsyms.net/styles/klokantech-3d-gl/style.json',
     pitch: 0

www/pages/home.html

@@ -52,17 +52,18 @@
             </div>
 
             <div class="col-100 tablet-50 desktop-33">
-                <div class="card elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
+                <div class="card card-expandable card-expandable-animate-width elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
-
-                    <div class="card-header card-opened-fade-out">
-                        Receive Money
-                        <div>
-                            <span class="preloader" id="receive-loading"></span>
-                        </div>
-                    </div>
 
                     <div class="card-content text-align-center" style="min-height: 16.58em;">
-                        <div class="navbar display-none">
+
+                        <div class="card-header card-opened-fade-out">
+                            Receive Money
+                            <div>
+                                <span class="preloader" id="receive-loading"></span>
+                            </div>
+                        </div>
+
+                        <div class="navbar card-opened-fade-in">
                             <div class="navbar-inner">
                                 <div class="title">Receive Money</div>
 
@@ -74,21 +75,22 @@
                             </div>
                         </div>
 
-                        <image id="qrcode" class="text-align-center card-opened-fade-in" src="" />
+                        <image id="qrcode" class="text-align-center" src="" />
-                        <h3 id="qrcode-label" class="text-align-center padding-bottom card-opened-fade-in"></h3>
+                        <h3 id="qrcode-label" class="text-align-center padding-bottom"></h3>
                     </div>
                 </div>
             </div>
 
             <div class="col-100 tablet-50 desktop-33">
-                <div class="card elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">
+                <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">
-
-                    <div class="card-header card-opened-fade-out">
-                        Nearby
-                    </div>
 
                     <div class="card-content text-align-center" style="min-height: 16.58em;">
-                        <div class="navbar display-none">
+
+                        <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
+                            Nearby
+                        </div>
+
+                        <div class="navbar card-opened-fade-in">
                             <div class="navbar-inner">
                                 <div class="title">Nearby</div>