RanchiMall/blockchainbonds
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source 
Added loading screen
This commit is contained in:
sairaj mote 2021-05-11 01:48:14 +05:30
parent 2d6bf5dcfd
commit a4506de3f9
4 changed files with 116 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
css/main.css
View File

@ -350,6 +350,55 @@ ul {
fill: rgba(var(--text-color), 0.9);
}
#loading_page {
position: relative;
display: grid;
z-index: 5;
height: 100vh;
place-content: center;
justify-items: center;
}
#loading_page__footer {
position: absolute;
padding: 3rem;
bottom: 0;
}
#rm_logo {
width: auto;
height: 2rem;
fill: rgba(var(--text-color), 1);
}
#loader {
display: flex;
position: relative;
width: 4rem;
height: 8rem;
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke: rgba(var(--text-color), 1);
}
#loader polyline:nth-of-type(2),
#loader polyline:nth-of-type(3),
#loader polyline:nth-of-type(4) {
stroke-dasharray: 60;
animation: loading infinite 1s;
}
@keyframes loading {
0% {
stroke-dashoffset: -60;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 60;
}
}
#main_header {
position: relative;
display: grid;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

48
css/main.scss
View File

@ -285,6 +285,54 @@ ul{
fill: rgba(var(--text-color), 0.9);
}
#loading_page{
position: relative;
display: grid;
z-index: 5;
height: 100vh;
place-content: center;
justify-items: center;
}
#loading_page__footer{
position: absolute;
padding: 3rem;
bottom: 0;
}
#rm_logo{
width: auto;
height: 2rem;
fill: rgba(var(--text-color), 1);
}
#loader{
display: flex;
position: relative;
width: 4rem;
height: 8rem;
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke: rgba(var(--text-color), 1);
polyline:nth-of-type(2),
polyline:nth-of-type(3),
polyline:nth-of-type(4){
stroke-dasharray: 60;
animation: loading infinite 1s;
}
}
@keyframes loading {
0%{
stroke-dashoffset: -60;
}
50%{
stroke-dashoffset: 0;
}
100%{
stroke-dashoffset: 60;
}
}
#main_header{
position: relative;
display: grid;

22
index.html
View File

@ -30,6 +30,15 @@
</head>
<body onload="onLoadStartUp()" data-theme="light">
<sm-notifications id="notification_drawer"></sm-notifications>
<article id="loading_page" class="page">
<h2 class="h2">Bitcoin Bonds</h2>
<svg id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="17.76 23.78 17.76 40.22 32 48.44 46.24 40.22 46.24 23.78 32 15.56 17.76 23.78"/><polyline points="17.76 23.78 32 32 46.24 23.78"/><line x1="32" y1="48.44" x2="32" y2="32"/><polyline points="32 2 6.02 17 6.02 47"/><polyline points="57.98 47 57.98 17 32 2"/><polyline points="6.02 47 32 62 57.98 47"/></svg>
<h4>Loading data from blockchain</h4>
<footer id="loading_page__footer" class="flex align-center">
<svg id="rm_logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
<h4 class="h4 color-0-8 weight-500">RanchiMall</h4>
</footer>
</article>
<header id="main_header">
<div class="flex align-center">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
@ -9959,7 +9968,7 @@ Bitcoin.Util = {
}
function showPage(target){
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
getRef(target).classList.remove('hide-completely')
if(target !== 'confirm_bond_page'){
getRef('get_private_key').value = ''
@ -9967,6 +9976,12 @@ Bitcoin.Util = {
if(target === 'home_page'){
getRef("add_bond_form").reset()
}
if(target === 'loading_page'){
getRef('main_header').classList.add('hide-completely')
}
else{
getRef('main_header').classList.remove('hide-completely')
}
}
getRef('search_bonds').addEventListener('input', e => {
@ -10002,7 +10017,6 @@ Bitcoin.Util = {
</script>
<script>
renderBondPlaceholder()
function onLoadStartUp() {
compactIDB.initDB(floGlobals.application, {
bonds: {},
@ -10176,7 +10190,7 @@ Bitcoin.Util = {
const refreshBtn = getRef('refresh-btn');
refreshBtn.addEventListener("click", evt => {
renderBondPlaceholder()
showPage('loading_page')
getCurrentRates().then(rates => {
USD_current = rates.USD_INR;
BTC_current = rates.BTC_USD;
@ -10187,8 +10201,8 @@ Bitcoin.Util = {
.then(result => {
compactIDB.readAllData("bonds")
.then(result => {
document.querySelectorAll('.bond-placeholder').forEach(bond => bond.remove())
renderData(result)
showPage('home_page')
})
.catch(error => console.error(error))
})