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

Refine expanding card UX

Browse Source
master
Skylar Ittner 5 years ago
parent 519284a056
commit 130e72ea6b
4 changed files with 68 additions and 38 deletions
Show Stats Download Patch File Download Diff File

49
www/css/styles.css
Unescape Escape View File

@ -88,16 +88,24 @@ html.md .navbar .link {
display: block !important; 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; width: auto;
max-width: 100%;
height: 12em;
transition: height 0.3s ease-in-out;
}
.card-opening #qrcode, .card-opened #qrcode {
height: 55em; height: 55em;
max-height: 50vh; max-height: 55vh;
}
#map-card {
background-color: hsl(47, 26%, 88%);
} }
#map { #map {
@ -106,17 +114,44 @@ html.md .navbar .link {
left: 0; left: 0;
height: 100%; height: 100%;
width: 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 { .card-expandable.card-closing, .card-expandable.card-opened, .card-expandable.card-opening {
z-index: 9999999; z-index: 9999999;
} }
.card-expandable #map { .card-opening #map, .card-closing #map {
opacity: 0;
}
.card-opened #map {
opacity: 1;
top: var(--f7-navbar-height); top: var(--f7-navbar-height);
height: calc(100% - var(--f7-navbar-height)); height: calc(100% - var(--f7-navbar-height));
} }
.card-backdrop { .card-backdrop {
z-index: 999999; 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
Unescape Escape View File

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

6
www/js/map.js
Unescape Escape View File

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

34
www/pages/home.html
Unescape Escape View File

@ -52,17 +52,18 @@
</div> </div>
<div class="col-100 tablet-50 desktop-33"> <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"> <div class="card-content text-align-center" style="min-height: 16.58em;">
Receive Money
<div> <div class="card-header card-opened-fade-out">
<span class="preloader" id="receive-loading"></span> Receive Money
<div>
<span class="preloader" id="receive-loading"></span>
</div>
</div> </div>
</div>
<div class="card-content text-align-center" style="min-height: 16.58em;"> <div class="navbar card-opened-fade-in">
<div class="navbar display-none">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="title">Receive Money</div> <div class="title">Receive Money</div>
@ -74,21 +75,22 @@
</div> </div>
</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>
</div> </div>
<div class="col-100 tablet-50 desktop-33"> <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="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="navbar-inner">
<div class="title">Nearby</div> <div class="title">Nearby</div>

Write Preview
Loading…
Cancel
Save