Browse Source

Refine expanding card UX

master
Skylar Ittner 4 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 {
display: block !important;
}

#qrcode {
width: 10em;
max-width: 100%;
max-height: 12em;
.card-opened .card-header {
display: none;
}

.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;
}

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

@@ -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 () {
$(".card-expandable .navbar").addClass("display-none");
$(".view-main").on("card:closed", "#map-card", function () {
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();
}

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

@@ -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

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

@@ -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 class="card-content text-align-center" style="min-height: 16.58em;">

<div class="card-header card-opened-fade-out">
Receive Money
<div>
<span class="preloader" id="receive-loading"></span>
</div>
</div>
</div>

<div class="card-content text-align-center" style="min-height: 16.58em;">
<div class="navbar display-none">
<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="" />
<h3 id="qrcode-label" class="text-align-center padding-bottom card-opened-fade-in"></h3>
<image id="qrcode" class="text-align-center" src="" />
<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-header card-opened-fade-out">
Nearby
</div>
<div class="card card-expandable elevation-2" id="map-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openMapCard()">

<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>


Loading…
Cancel
Save