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

Add balance card to home page, enable pull-to-refresh

Browse Source
This commit is contained in:
Skylar Ittner 2019-03-26 14:16:54 -06:00
parent a92b59f0a4
commit fd17454fa2
3 changed files with 107 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
www/css/styles.css Normal file
View File

@ -0,0 +1,32 @@
/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
/*
Created on : Mar 26, 2019, 1:03:44 PM
Author : Skylar Ittner
*/
h1.display {
font-size: 8rem;
font-weight: 300;
margin: 0;
}
h2.display {
font-size: 6rem;
font-weight: 300;
margin: 0;
}
h3.display {
font-size: 4rem;
font-weight: 300;
margin: 0;
}
.card-header .secondary-text {
font-weight: 300;
margin-left: 1em;
}

38
www/js/home.js Normal file
View File

@ -0,0 +1,38 @@
/*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
var accountBalance = 0.0;
$(".view-main").on("ptr:refresh", ".ptr-content", function () {
loadHomePage(function () {
setTimeout(app.ptr.done, 750);
});
});
function loadBalance(callback) {
$("#balance-error-icon").css("display", "none");
$("#balance-loading").css("display", "");
callAPI("checkbalance", {
key: localStorage.getItem("key")
}, function (data) {
accountBalance = data.balance;
$("#balance-amount").text(data.balance);
$("#balance-loading").css("display", "none");
$("#balance-error").text("");
callback(true);
}, function (msg) {
$("#balance-loading").css("display", "none");
$("#balance-error-icon").css("display", "");
$("#balance-error").text(msg);
callback(false);
});
}
function loadHomePage(callback) {
loadBalance(function () {
callback();
});
}

38
www/pages/home.html
View File

@ -18,13 +18,39 @@
</div>
</div>
<div class="page-content ptr-content" data-ptr-mousewheel="true">
<div class="page-content ptr-content" data-ptr-mousewheel="true" data-ptr-distance="20">
<div class="ptr-preloader">
<div class="preloader"></div>
<div class="ptr-arrow"></div>
</div>
<div class="row justify-content-center">
<div class="col-100 tablet-50 desktop-33">
<div class="card">
<div class="card-header">
Balance
<div>
<span class="preloader" id="balance-loading"></span>
<span class="text-color-red" id="balance-error-icon" style="display: none;"><i class="fas fa-exclamation-triangle"></i></span>
</div>
</div>
<div class="card-content card-content-padding text-align-center">
<div id="balance-error"></div>
<h3 class="display" id="balance-label">$<span id="balance-amount">0.00</span></h3>
</div>
<div class="card-footer">
<a href="#" class="link">
<i class="fas fa-credit-card fa-fw"></i> &nbsp;Add Funds
</a>
<a href="#" class="link">
<i class="fas fa-arrow-up fa-fw"></i> &nbsp;Send Money
</a>
</div>
</div>
</div>
</div>
<!-- Make sure the content won't be blocked by the floating button -->
<div id="bottomspacer" style="height: 80px;"></div>
@ -36,4 +62,14 @@
</a>
</div>
<script src="js/home.js"></script>
<script>
setTimeout(function () {
loadHomePage(function () {
});
}, 500);
</script>
</div>