refactoring
This commit is contained in:
sairaj mote
parent
b9b071316d
commit
eeaa862d84
25
css/main.css
25
css/main.css
@ -514,10 +514,10 @@ details[open] > summary .icon {
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
color: inherit;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
-webkit-transition: -webkit-transform 1s;
|
||||
transition: -webkit-transform 1s;
|
||||
transition: transform 1s;
|
||||
transition: transform 1s, -webkit-transform 1s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -683,7 +683,7 @@ strip-option:last-of-type {
|
||||
#user_accounts:not(:empty) {
|
||||
margin-top: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
@ -807,6 +807,7 @@ strip-option:last-of-type {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#user_section h4 {
|
||||
height: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -818,6 +819,16 @@ strip-option:last-of-type {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#refresh_balance_button.loading {
|
||||
padding: 0.5rem;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
#refresh_balance_button sm-spinner {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
}
|
||||
|
||||
#account_chart_container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -1182,8 +1193,8 @@ strip-option:last-of-type {
|
||||
}
|
||||
|
||||
#main_nav {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: var(--foreground-color);
|
||||
border-top: thin solid rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@ -1248,7 +1259,7 @@ strip-option:last-of-type {
|
||||
right: 0;
|
||||
content: "";
|
||||
width: 1px;
|
||||
background-color: rgba(var(--text-color), 0.3);
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -465,7 +465,7 @@ details {
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
color: inherit;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 1s;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
&--active {
|
||||
@ -477,6 +477,7 @@ details {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#main_header {
|
||||
grid-area: main-header;
|
||||
padding: 1.5rem;
|
||||
@ -598,7 +599,7 @@ strip-option {
|
||||
#user_accounts:not(:empty) {
|
||||
margin-top: 1.5rem;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
.activity-card--account {
|
||||
@ -713,6 +714,7 @@ strip-option {
|
||||
padding: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
h4 {
|
||||
height: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@ -723,6 +725,17 @@ strip-option {
|
||||
padding-top: 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
#refresh_balance_button {
|
||||
&.loading {
|
||||
padding: 0.5rem;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
sm-spinner {
|
||||
--height: 1rem;
|
||||
--width: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#account_chart_container {
|
||||
display: flex;
|
||||
@ -993,8 +1006,8 @@ strip-option {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#main_nav {
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: var(--foreground-color);
|
||||
border-top: thin solid rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
@ -1041,7 +1054,7 @@ strip-option {
|
||||
right: 0;
|
||||
content: "";
|
||||
width: 1px;
|
||||
background-color: rgba(var(--text-color), 0.3);
|
||||
background-color: rgba(var(--text-color), 0.2);
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
29
index.html
29
index.html
@ -19,7 +19,7 @@
|
||||
|
||||
//Required for blockchain API operators
|
||||
apiURL: {
|
||||
FLO: ['https://livenet.flocha.in/', 'https://flosight.duckdns.org/'],
|
||||
FLO: ['https://flosight.duckdns.org/', 'https://livenet.flocha.in/'],
|
||||
FLO_TEST: ['https://testnet-flosight.duckdns.org/', 'https://testnet.flocha.in/']
|
||||
},
|
||||
tokenURL: "https://ranchimallflo.duckdns.org/",
|
||||
@ -359,7 +359,7 @@
|
||||
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z" />
|
||||
</svg>
|
||||
Account summary
|
||||
<button class="button justify-right" onclick="refreshBalance()">
|
||||
<button id="refresh_balance_button" class="button justify-right" onclick="refreshBalance(this)">
|
||||
Refresh
|
||||
</button>
|
||||
</h4>
|
||||
@ -1205,13 +1205,27 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
function refreshBalance() {
|
||||
function refreshBalance(button) {
|
||||
if (button) {
|
||||
button.classList.add('loading')
|
||||
button.innerHTML = `<sm-spinner></sm-spinner>`
|
||||
}
|
||||
Promise.all([bank_app.tokenAPI.getBalance(myFloID), floBlockchainAPI.getBalance(myFloID)])
|
||||
.then(([rupeeBalance, floBalance]) => {
|
||||
getRef('rupee_balance').textContent = rupeeBalance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
|
||||
getRef('flo_balance').textContent = floBalance
|
||||
if (button) {
|
||||
button.classList.remove('loading')
|
||||
button.textContent = `Refresh`
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
notify(error, 'error')
|
||||
if (button) {
|
||||
button.classList.remove('loading')
|
||||
button.textContent = `Refresh`
|
||||
}
|
||||
})
|
||||
.catch(error => notify(error, 'error'))
|
||||
updateChart()
|
||||
}
|
||||
function getRequestDetails(requestID) {
|
||||
@ -1458,7 +1472,7 @@
|
||||
}
|
||||
|
||||
document.querySelector('theme-toggle').addEventListener('themechange', e => {
|
||||
if (accountChart) {
|
||||
if (isChartVisible) {
|
||||
accountChart.data.datasets[0].backgroundColor = selectGraphColors()
|
||||
accountChart.update()
|
||||
}
|
||||
@ -1499,13 +1513,16 @@
|
||||
});
|
||||
}
|
||||
|
||||
let isChartVisible = false
|
||||
const chartObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
refreshBalance()
|
||||
accountChart = renderChart()
|
||||
refreshBalance()
|
||||
isChartVisible = true
|
||||
} else if (!entry.isIntersecting && accountChart) {
|
||||
accountChart.destroy()
|
||||
isChartVisible = false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user