v1.0.9
This commit is contained in:
sairaj mote
parent
72bc223ba0
commit
9a2aa627c2
13
css/main.css
13
css/main.css
@ -614,7 +614,7 @@ ul .balance:last-of-type {
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 1rem 0;
|
||||
padding: 0.5rem 0;
|
||||
-webkit-animation: fade 0.3s;
|
||||
animation: fade 0.3s;
|
||||
}
|
||||
@ -756,21 +756,20 @@ p {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
white-space: nowrap;
|
||||
border-bottom: transparent;
|
||||
/*&.active{
|
||||
opacity: 1;
|
||||
border-bottom: 0.1em solid rgba(var(--text), 0.8);
|
||||
}*/
|
||||
}
|
||||
|
||||
.tabs .tab:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tabs .tab.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tabs .line {
|
||||
position: absolute;
|
||||
height: 0.1em;
|
||||
height: 0.1rem;
|
||||
background: rgba(var(--text), 1);
|
||||
width: 1px;
|
||||
bottom: 0;
|
||||
-webkit-transition: width 0.4s, -webkit-transform 0.4s;
|
||||
transition: width 0.4s, -webkit-transform 0.4s;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -173,7 +173,6 @@ ul{
|
||||
.card{
|
||||
padding: 2rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
//border: solid 1px rgba(var(--text), 0.16);
|
||||
background: rgba(var(--text), 0.06);
|
||||
margin: 1.5rem 0;
|
||||
h4{
|
||||
@ -231,7 +230,6 @@ ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
//text-align: center;
|
||||
h1{
|
||||
align-self: flex-start;
|
||||
margin-top: 2rem;
|
||||
@ -343,9 +341,6 @@ ul{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
//border-radius: 0.5rem;
|
||||
//background: rgba(var(--text), 0.1);
|
||||
//border: 1px solid rgba(var(--text), 0.2);
|
||||
border-left: 0.1rem solid rgba(var(--text), 0.2);
|
||||
.label{
|
||||
margin-top: auto;
|
||||
@ -404,7 +399,7 @@ ul{
|
||||
}
|
||||
}
|
||||
.page{
|
||||
padding: 1rem 0;
|
||||
padding: 0.5rem 0;
|
||||
animation: fade 0.3s;
|
||||
h3.heading{
|
||||
text-transform: capitalize;
|
||||
@ -514,16 +509,14 @@ p{
|
||||
&:last-of-type{
|
||||
margin-right: 0;
|
||||
}
|
||||
/*&.active{
|
||||
&.active{
|
||||
opacity: 1;
|
||||
border-bottom: 0.1em solid rgba(var(--text), 0.8);
|
||||
}*/
|
||||
}
|
||||
}
|
||||
.line{
|
||||
position: absolute;
|
||||
height: 0.1em;
|
||||
height: 0.1rem;
|
||||
background: rgba(var(--text), 1);
|
||||
width: 1px;
|
||||
bottom: 0;
|
||||
transition: transform 0.4s, width 0.4s;
|
||||
}
|
||||
@ -559,7 +552,6 @@ p{
|
||||
.transaction{
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
//border: solid 1px rgba(var(--text), 0.1);
|
||||
background: rgba(var(--text), 0.06);
|
||||
h4{
|
||||
font-weight: 500;
|
||||
|
||||
69
index.html
69
index.html
@ -12,7 +12,7 @@
|
||||
<title>Loading</title>
|
||||
<circle cx="32" cy="32" r="32"/>
|
||||
</svg>
|
||||
<h4>Loading</h4>`
|
||||
<h4>Loading</h4>
|
||||
</div>
|
||||
<header id="page_header" class="flex margin">
|
||||
<h3 id="page_title">Block</h3>
|
||||
@ -487,6 +487,8 @@
|
||||
}
|
||||
window.scrollTo(0,0);
|
||||
|
||||
if(prevField === field)
|
||||
return;
|
||||
removePage(currentPage)
|
||||
|
||||
if(pageId === 'address_page'){
|
||||
@ -597,6 +599,9 @@
|
||||
currentPage = pageId;
|
||||
prevField = field;
|
||||
loading()
|
||||
if(pageContainer.querySelector('.tab.active'))
|
||||
pageContainer.querySelector('.tab.active').click()
|
||||
tabMounted = false;
|
||||
}
|
||||
|
||||
function renderTransactions(){
|
||||
@ -608,28 +613,28 @@
|
||||
history.pushState(appState, null, null)
|
||||
|
||||
document.querySelector('main').addEventListener('click', e => {
|
||||
if(e.target.closest('.address') && prevField !== e.target.textContent){
|
||||
if(e.target.closest('.address')){
|
||||
loading(true)
|
||||
render("address_page", e.target.textContent)
|
||||
appState = {page: 'address_page', thisField: e.target.textContent};
|
||||
history.pushState(appState, null, `?address=${e.target.textContent}`)
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if(e.target.closest('.token') && prevField !== e.target.textContent){
|
||||
if(e.target.closest('.token')){
|
||||
render("token_page", e.target.textContent)
|
||||
appState = {page: 'token_page', thisField: e.target.textContent};
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if(e.target.closest('.hash') && prevField !== e.target.textContent){
|
||||
if(e.target.closest('.hash')){
|
||||
render("transaction_page", e.target.textContent)
|
||||
appState = {page: 'transaction_page', thisField: e.target.textContent};
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if(e.target.closest('.block-height') && prevField !== e.target.textContent){
|
||||
if(e.target.closest('.block-height')){
|
||||
render("block_page", e.target.textContent)
|
||||
appState = {page: 'block_page', thisField: e.target.textContent};
|
||||
history.pushState(appState, null, null)
|
||||
}
|
||||
if(e.target.closest('.contract') && prevField !== e.target.textContent){
|
||||
if(e.target.closest('.contract')){
|
||||
render("contract_page", e.target.textContent)
|
||||
appState = {page: 'contract_page', thisField: e.target.textContent};
|
||||
history.pushState(appState, null, null)
|
||||
@ -644,6 +649,7 @@
|
||||
})
|
||||
})
|
||||
|
||||
let tabMounted = false;
|
||||
function showTab(tab){
|
||||
let targetTab = tab.getAttribute('data-target'),
|
||||
activeTabRank = parseInt(tab.parentNode.querySelector('.active').dataset.rank),
|
||||
@ -654,31 +660,32 @@
|
||||
tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
|
||||
allTabs = tab.parentNode.querySelectorAll('.tab'),
|
||||
line = tab.parentNode.querySelector('.line')
|
||||
if(!currentBody.isEqualNode(targetBody)){
|
||||
if(activeTabRank < currentTabRank){
|
||||
targetBody.classList.add('fly-in-from-right')
|
||||
currentBody.classList.add('fly-out-to-left')
|
||||
}
|
||||
else{
|
||||
targetBody.classList.add('fly-in-from-left')
|
||||
currentBody.classList.add('fly-out-to-right')
|
||||
}
|
||||
setTimeout(() => {
|
||||
tabGroupMembers.forEach(member => {
|
||||
member.classList.add('hide-completely')
|
||||
})
|
||||
targetBody.classList.remove('hide-completely')
|
||||
currentBody.classList.remove('fly-out-to-right', 'fly-out-to-left')
|
||||
},200)
|
||||
setTimeout(() => {
|
||||
targetBody.classList.remove('fly-in-from-right', 'fly-in-from-left')
|
||||
},400)
|
||||
allTabs.forEach(thisTab => {
|
||||
thisTab.classList.remove('active')
|
||||
})
|
||||
tab.classList.add('active')
|
||||
line.setAttribute('style', `transform: translateX(${tab.offsetLeft}px); width: ${tab.getBoundingClientRect().width}px`)
|
||||
if(tabMounted && currentBody.isEqualNode(targetBody))
|
||||
return
|
||||
if(activeTabRank < currentTabRank){
|
||||
targetBody.classList.add('fly-in-from-right')
|
||||
currentBody.classList.add('fly-out-to-left')
|
||||
}
|
||||
else{
|
||||
targetBody.classList.add('fly-in-from-left')
|
||||
currentBody.classList.add('fly-out-to-right')
|
||||
}
|
||||
setTimeout(() => {
|
||||
tabGroupMembers.forEach(member => {
|
||||
member.classList.add('hide-completely')
|
||||
})
|
||||
targetBody.classList.remove('hide-completely')
|
||||
currentBody.classList.remove('fly-out-to-right', 'fly-out-to-left')
|
||||
},200)
|
||||
setTimeout(() => {
|
||||
targetBody.classList.remove('fly-in-from-right', 'fly-in-from-left')
|
||||
},400)
|
||||
allTabs.forEach(thisTab => {
|
||||
thisTab.classList.remove('active')
|
||||
})
|
||||
tab.classList.add('active')
|
||||
line.setAttribute('style', `transform: translateX(${tab.offsetLeft}px); width: ${tab.getBoundingClientRect().width}px`)
|
||||
tabMounted = true;
|
||||
}
|
||||
|
||||
let loader = document.getElementById('loader_page')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user