UI update
Added animated loading placeholders for bonds
This commit is contained in:
sairaj mote
parent
ad766623ad
commit
338b8ec147
56
css/main.css
56
css/main.css
@ -201,6 +201,10 @@ ul {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -380,7 +384,7 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
#usd-rate::before {
|
||||
#usd-rate:not(:empty):before {
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 2rem;
|
||||
@ -511,6 +515,49 @@ bond-transaction {
|
||||
box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
justify-content: start;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
}
|
||||
|
||||
.bond-placeholder {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.bond-placeholder .placeholder__block:first-of-type {
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
.bond-placeholder:nth-of-type(2) .placeholder__block {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.bond-placeholder:nth-of-type(3) .placeholder__block {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
.bond-placeholder:nth-of-type(4) .placeholder__block {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.placeholder__block {
|
||||
display: flex;
|
||||
border-radius: 0.3rem;
|
||||
min-width: 10rem;
|
||||
padding: 1.2rem 1rem;
|
||||
animation: pulse alternate 0.6s ease infinite;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 0.4;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
form {
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -595,6 +642,13 @@ form select option {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: ". search .";
|
||||
}
|
||||
|
||||
.bond-placeholder {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
.bond-placeholder > .placeholder__block:nth-of-type(2) {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -168,6 +168,9 @@ ul{
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-end{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-right{
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -310,7 +313,7 @@ ul{
|
||||
#usd-rate{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before{
|
||||
&:not(:empty):before{
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 2rem;
|
||||
@ -440,6 +443,48 @@ bond-transaction{
|
||||
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
|
||||
}
|
||||
|
||||
.flex-grid{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
justify-content: start;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
}
|
||||
.bond-placeholder{
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
.placeholder__block:first-of-type{
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
&:nth-of-type(2) .placeholder__block{
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-of-type(3) .placeholder__block{
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
&:nth-of-type(4) .placeholder__block{
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
}
|
||||
.placeholder__block{
|
||||
display: flex;
|
||||
border-radius: 0.3rem;
|
||||
min-width: 10rem;
|
||||
padding: 1.2rem 1rem;
|
||||
animation: pulse alternate 0.6s ease infinite;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
@keyframes pulse{
|
||||
from{
|
||||
opacity: 0.4;
|
||||
}
|
||||
to{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -516,6 +561,12 @@ form{
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: '. search .';
|
||||
}
|
||||
.bond-placeholder{
|
||||
grid-template-columns: 1fr auto;
|
||||
& > .placeholder__block:nth-of-type(2){
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout{
|
||||
|
||||
50
index.html
50
index.html
@ -8127,6 +8127,28 @@ Bitcoin.Util = {
|
||||
}
|
||||
</script>
|
||||
<script id="ui">
|
||||
|
||||
const render = {
|
||||
bondPlaceholder(){
|
||||
const bond = document.createElement('li')
|
||||
bond.classList.add('bond-placeholder', 'grid')
|
||||
bond.innerHTML = `
|
||||
<div class="placeholder__block"></div>
|
||||
<div class="placeholder__block"></div>
|
||||
<div class="flex-grid justify-start">
|
||||
<div class="placeholder__block"></div>
|
||||
<div class="placeholder__block"></div>
|
||||
<div class="placeholder__block"></div>
|
||||
</div>
|
||||
<div class="grid flow-column gap-1 justify-end">
|
||||
<div class="placeholder__block"></div>
|
||||
<div class="placeholder__block"></div>
|
||||
</div>
|
||||
`
|
||||
return bond
|
||||
}
|
||||
}
|
||||
|
||||
const bondTemplate = document.createElement('template')
|
||||
bondTemplate.innerHTML = `
|
||||
<style>
|
||||
@ -9947,8 +9969,18 @@ Bitcoin.Util = {
|
||||
}, 100)
|
||||
})
|
||||
|
||||
function renderBondPlaceholder(){
|
||||
getRef('bond_list').innerHTML = ``
|
||||
const frag = document.createDocumentFragment()
|
||||
for (let index = 0; index < 4; index++) {
|
||||
frag.append(render.bondPlaceholder())
|
||||
}
|
||||
getRef('bond_list').append(frag)
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
renderBondPlaceholder()
|
||||
function onLoadStartUp() {
|
||||
compactIDB.initDB(floGlobals.application, {
|
||||
bonds: {},
|
||||
@ -9957,7 +9989,7 @@ Bitcoin.Util = {
|
||||
.catch(error => console.error(error))
|
||||
}
|
||||
|
||||
function renderData(data) {
|
||||
async function renderData(data, wipe) {
|
||||
const period = n => {
|
||||
let y = n,
|
||||
m = n * 12,
|
||||
@ -10023,9 +10055,7 @@ Bitcoin.Util = {
|
||||
bond.data = obj
|
||||
bond.setAttribute("title", data[i].replace(/\|/g, "\n"))
|
||||
frag.append(bond)
|
||||
|
||||
}
|
||||
|
||||
getRef('bond_list').append(frag)
|
||||
}
|
||||
|
||||
@ -10124,19 +10154,23 @@ Bitcoin.Util = {
|
||||
|
||||
const refreshBtn = getRef('refresh-btn');
|
||||
refreshBtn.addEventListener("click", evt => {
|
||||
renderBondPlaceholder()
|
||||
getCurrentRates().then(rates => {
|
||||
USD_current = rates.USD_INR;
|
||||
BTC_current = rates.BTC_USD;
|
||||
console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
|
||||
getRef("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`;
|
||||
getRef("btc-usd-rate").textContent = `BTC: $${rates.BTC_USD.toFixed(2)}`;
|
||||
getRef("bond_list").innerHTML = '';
|
||||
compactIDB.readAllData("bonds")
|
||||
.then(result => renderData(result))
|
||||
.catch(error => console.error(error))
|
||||
refreshBlockchainData()
|
||||
.then(result => renderData(result))
|
||||
.then(result => {
|
||||
compactIDB.readAllData("bonds")
|
||||
.then(result => {
|
||||
document.querySelectorAll('.bond-placeholder').forEach(bond => bond.remove())
|
||||
renderData(result)
|
||||
})
|
||||
.catch(error => console.error(error))
|
||||
})
|
||||
.catch(error => console.error(error))
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user