Browse Source

Refine expanding card UX

master
Skylar Ittner 2 months ago
parent
commit
130e72ea6b
4 changed files with 68 additions and 38 deletions
  1. 42
    7
      www/css/styles.css
  2. 4
    13
      www/js/home.js
  3. 4
    2
      www/js/map.js
  4. 18
    16
      www/pages/home.html

+ 42
- 7
www/css/styles.css View File

@@ -88,16 +88,24 @@ html.md .navbar .link {
88 88
     display: block !important;
89 89
 }
90 90
 
91
-#qrcode {
92
-    width: 10em;
93
-    max-width: 100%;
94
-    max-height: 12em;
91
+.card-opened .card-header {
92
+    display: none;
95 93
 }
96 94
 
97
-.card-expandable #qrcode {
95
+#qrcode, .card-closing #qrcode {
98 96
     width: auto;
97
+    max-width: 100%;
98
+    height: 12em;
99
+    transition: height 0.3s ease-in-out;
100
+}
101
+
102
+.card-opening #qrcode, .card-opened #qrcode {
99 103
     height: 55em;
100
-    max-height: 50vh;
104
+    max-height: 55vh;
105
+}
106
+
107
+#map-card {
108
+    background-color: hsl(47, 26%, 88%);
101 109
 }
102 110
 
103 111
 #map {
@@ -106,17 +114,44 @@ html.md .navbar .link {
106 114
     left: 0;
107 115
     height: 100%;
108 116
     width: 100%;
117
+    opacity: 1;
118
+    transition: opacity 0.5s linear, top 0.25s linear;
119
+    background-color: hsl(47, 26%, 88%);
109 120
 }
110 121
 
111 122
 .card-expandable.card-closing, .card-expandable.card-opened, .card-expandable.card-opening {
112 123
     z-index: 9999999;
113 124
 }
114 125
 
115
-.card-expandable #map {
126
+.card-opening #map, .card-closing #map {
127
+    opacity: 0;
128
+}
129
+
130
+.card-opened #map {
131
+    opacity: 1;
116 132
     top: var(--f7-navbar-height);
117 133
     height: calc(100% - var(--f7-navbar-height));
118 134
 }
119 135
 
120 136
 .card-backdrop {
121 137
     z-index: 999999;
138
+}
139
+
140
+#map .leaflet-control-attribution, #map .leaflet-control-zoom {
141
+    opacity: 0;
142
+    visibility: hidden;
143
+    transition: visibility 0s, opacity 0.5s;
144
+}
145
+
146
+.card-opened #map .leaflet-control-attribution, .card-opened #map .leaflet-control-zoom {
147
+    opacity: 1;
148
+    visibility: visible;
149
+}
150
+
151
+.card-expandable .navbar {
152
+    display: none;
153
+}
154
+
155
+.card-opened .navbar {
156
+    display: block;
122 157
 }

+ 4
- 13
www/js/home.js View File

@@ -12,20 +12,18 @@ $(".view-main").on("ptr:refresh", ".ptr-content", function () {
12 12
     });
13 13
 });
14 14
 
15
+
15 16
 $(".view-main").on("card:open", ".card-expandable", function () {
16 17
     $(".ptr-preloader").addClass("display-none");
17
-    $(".card-expandable .navbar").removeClass("display-none");
18 18
 });
19 19
 
20
-$(".view-main").on("card:close", ".card-expandable", function () {
21
-    $(".card-expandable .navbar").addClass("display-none");
20
+$(".view-main").on("card:closed", "#map-card", function () {
21
+    leafletgllayer._glMap.setPitch(0);
22
+    leafletmap.invalidateSize();
22 23
 });
23 24
 
24 25
 $(".view-main").on("card:closed", ".card-expandable", function () {
25 26
     $(".ptr-preloader").removeClass("display-none");
26
-    $(this).removeClass("card-expandable");
27
-    leafletgllayer._glMap.setPitch(0);
28
-    leafletmap.invalidateSize();
29 27
 });
30 28
 
31 29
 function loadBalance(callback) {
@@ -47,14 +45,7 @@ function loadBalance(callback) {
47 45
     });
48 46
 }
49 47
 
50
-function openReceiveCard() {
51
-    $("#receive-card").addClass("card-expandable");
52
-    app.card.open("#receive-card");
53
-}
54
-
55 48
 function openMapCard() {
56
-    $("#map-card").addClass("card-expandable");
57
-    app.card.open("#map-card");
58 49
     leafletgllayer._glMap.setPitch(40);
59 50
     leafletmap.invalidateSize();
60 51
 }

+ 4
- 2
www/js/map.js View File

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

+ 18
- 16
www/pages/home.html View File

@@ -52,17 +52,18 @@
52 52
             </div>
53 53
 
54 54
             <div class="col-100 tablet-50 desktop-33">
55
-                <div class="card elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
55
+                <div class="card card-expandable card-expandable-animate-width elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
56 56
 
57
-                    <div class="card-header card-opened-fade-out">
58
-                        Receive Money
59
-                        <div>
60
-                            <span class="preloader" id="receive-loading"></span>
57
+                    <div class="card-content text-align-center" style="min-height: 16.58em;">
58
+
59
+                        <div class="card-header card-opened-fade-out">
60
+                            Receive Money
61
+                            <div>
62
+                                <span class="preloader" id="receive-loading"></span>
63
+                            </div>
61 64
                         </div>
62
-                    </div>
63 65
 
64
-                    <div class="card-content text-align-center" style="min-height: 16.58em;">
65
-                        <div class="navbar display-none">
66
+                        <div class="navbar card-opened-fade-in">
66 67
                             <div class="navbar-inner">
67 68
                                 <div class="title">Receive Money</div>
68 69
 
@@ -74,21 +75,22 @@
74 75
                             </div>
75 76
                         </div>
76 77
 
77
-                        <image id="qrcode" class="text-align-center card-opened-fade-in" src="" />
78
-                        <h3 id="qrcode-label" class="text-align-center padding-bottom card-opened-fade-in"></h3>
78
+                        <image id="qrcode" class="text-align-center" src="" />
79
+                        <h3 id="qrcode-label" class="text-align-center padding-bottom"></h3>
79 80
                     </div>
80 81
                 </div>
81 82
             </div>
82 83
 
83 84
             <div class="col-100 tablet-50 desktop-33">
84
-                <div class="card elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">
85
-
86
-                    <div class="card-header card-opened-fade-out">
87
-                        Nearby
88
-                    </div>
85
+                <div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">
89 86
 
90 87
                     <div class="card-content text-align-center" style="min-height: 16.58em;">
91
-                        <div class="navbar display-none">
88
+
89
+                        <div class="card-header card-opened-fade-out" style="z-index: 9999999; background-color: rgba(255,255,255,0.5);">
90
+                            Nearby
91
+                        </div>
92
+
93
+                        <div class="navbar card-opened-fade-in">
92 94
                             <div class="navbar-inner">
93 95
                                 <div class="title">Nearby</div>
94 96
 

Loading…
Cancel
Save