Netsyms/HelpingHelenaApp
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refine expanding card UX

Browse Source
This commit is contained in:
Skylar Ittner 2019-03-29 14:37:06 -06:00
parent 519284a056
commit 130e72ea6b
4 changed files with 69 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

17
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();
}

6
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

36
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-header card-opened-fade-out">
Receive Money
<div>
<span class="preloader" id="receive-loading"></span>
</div>
</div>
<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-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="" />
<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>