v1.0.9

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;

css/main.scss

@@ -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;

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(tabMounted && currentBody.isEqualNode(targetBody))
-                if(activeTabRank < currentTabRank){
+                return
-                    targetBody.classList.add('fly-in-from-right')
+            if(activeTabRank < currentTabRank){
-                    currentBody.classList.add('fly-out-to-left')
+                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`)
             }
+            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')