Bug fixes and UI improvements

css/main.css

@@ -662,7 +662,6 @@ h3 {
   background: var(--accent-color);
   border-radius: 1rem 1rem 0 0;
   z-index: 1;
-  view-transition-name: indicator;
 }
 
 ::view-transition {
@@ -754,6 +753,16 @@ h3 {
   position: relative;
   height: 100%;
 }
+#search sm-chips,
+#search #pagination_wrapper {
+  background-color: rgba(var(--text-color), 0.06);
+  border-radius: 0.7rem;
+  padding: 0.3rem;
+}
+#search .pagination__item:not(.pagination__item--active) {
+  background-color: rgba(var(--text-color), 0.06);
+  color: rgba(var(--text-color), 1);
+}
 
 #queried_flo_address h4 {
   font-size: 1.1rem;
@@ -780,8 +789,6 @@ h3 {
   padding: 1rem;
   background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.3rem;
-  content-visibility: auto;
-  contain-intrinsic-size: 10rem;
 }
 .transaction:not(:last-of-type) {
   margin-bottom: 1rem;
@@ -1063,23 +1070,14 @@ h3 {
   padding-bottom: 4rem;
 }
 
-#pagination_wrapper {
+#pagination_wrapper:empty {
-  position: fixed;
+  display: none !important;
-  bottom: 0;
-  right: 0;
-  margin: 0 auto;
-  padding: 0.5rem;
-  background-color: rgba(var(--foreground-color), 1);
-  z-index: 5;
-  border-radius: 0.7rem;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-  margin: 0.5rem;
 }
 
 .pagination__item {
   display: flex;
   padding: 0.2rem 0.5rem;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
 }
 .pagination__item--active {
   background-color: var(--accent-color);
@@ -1252,18 +1250,6 @@ legend,
     transform: translateY(100%);
     opacity: 0;
   }
-  #pagination_wrapper {
-    margin: 0;
-    margin-bottom: 4.8rem;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    width: calc(100vw - 2rem);
-    flex-wrap: wrap;
-  }
-  #pagination_wrapper:empty {
-    display: none !important;
-  }
 }
 @media screen and (min-width: 40rem) {
   sm-popup {
@@ -1290,6 +1276,38 @@ legend,
   #pages_container {
     grid-area: main;
   }
+  ::view-transition-old(pages-container) {
+    -webkit-animation: slide-out-right 0.3s;
+            animation: slide-out-right 0.3s;
+  }
+  @-webkit-keyframes slide-out-right {
+    to {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+  }
+  @keyframes slide-out-right {
+    to {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+  }
+  ::view-transition-new(pages-container) {
+    -webkit-animation: slide-in-right 0.3s;
+            animation: slide-in-right 0.3s;
+  }
+  @-webkit-keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+  }
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+  }
   .page {
     padding: 0 1.5rem;
   }
@@ -1416,4 +1434,13 @@ legend,
 }
 .hidden {
   display: none !important;
+}
+
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+    -webkit-animation: none !important;
+            animation: none !important;
+  }
 }

css/main.scss

@@ -584,7 +584,6 @@ h3 {
   flex: 1;
   overflow-y: auto;
 }
-
 #main_navbar {
   display: flex;
   background: rgba(var(--text-color), 0.03);
@@ -632,7 +631,7 @@ h3 {
     background: var(--accent-color);
     border-radius: 1rem 1rem 0 0;
     z-index: 1;
-    view-transition-name: indicator;
+    // view-transition-name: indicator;
   }
 }
 ::view-transition {
@@ -720,6 +719,18 @@ h3 {
 #search {
   position: relative;
   height: 100%;
+  sm-chips,
+  #pagination_wrapper {
+    background-color: rgba(var(--text-color), 0.06);
+    border-radius: 0.7rem;
+    padding: 0.3rem;
+  }
+  .pagination__item {
+    &:not(.pagination__item--active) {
+      background-color: rgba(var(--text-color), 0.06);
+      color: rgba(var(--text-color), 1);
+    }
+  }
 }
 #queried_flo_address {
   h4 {
@@ -745,8 +756,6 @@ h3 {
   padding: 1rem;
   background-color: rgba(var(--text-color), 0.03);
   border-radius: 0.3rem;
-  content-visibility: auto;
-  contain-intrinsic-size: 10rem;
   &:not(:last-of-type) {
     margin-bottom: 1rem;
   }
@@ -1008,21 +1017,14 @@ h3 {
   padding-bottom: 4rem;
 }
 #pagination_wrapper {
-  position: fixed;
+  &:empty {
-  bottom: 0;
+    display: none !important;
-  right: 0;
+  }
-  margin: 0 auto;
-  padding: 0.5rem;
-  background-color: rgba(var(--foreground-color), 1);
-  z-index: 5;
-  border-radius: 0.7rem;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-  margin: 0.5rem;
 }
 .pagination__item {
   display: flex;
   padding: 0.2rem 0.5rem;
-  border-radius: 0.3rem;
+  border-radius: 0.5rem;
   &--active {
     background-color: var(--accent-color);
     color: rgba(var(--background-color), 1);
@@ -1196,18 +1198,6 @@ legend,
       }
     }
   }
-  #pagination_wrapper {
-    margin: 0;
-    margin-bottom: 4.8rem;
-    left: 50%;
-    right: auto;
-    transform: translateX(-50%);
-    width: calc(100vw - 2rem);
-    flex-wrap: wrap;
-    &:empty {
-      display: none !important;
-    }
-  }
 }
 @media screen and (min-width: 40rem) {
   sm-popup {
@@ -1236,6 +1226,24 @@ legend,
   #pages_container {
     grid-area: main;
   }
+  ::view-transition-old(pages-container) {
+    animation: slide-out-right 0.3s;
+  }
+  @keyframes slide-out-right {
+    to {
+      opacity: 0;
+      transform: translateX(1rem);
+    }
+  }
+  ::view-transition-new(pages-container) {
+    animation: slide-in-right 0.3s;
+  }
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(-1rem);
+    }
+  }
   .page {
     padding: 0 1.5rem;
   }
@@ -1371,3 +1379,10 @@ legend,
 .hidden {
   display: none !important;
 }
+@media (prefers-reduced-motion) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}

index.html

@@ -184,14 +184,15 @@
                     </div>
                     <section class="grid gap-1">
                         <div class="flex align-center space-between sticky top-0 flex-wrap gap-1"
-                            style="background-color: rgba(var(--foreground-color), 1);transition: background-color .3s; padding-bottom: 0.5rem; z-index: 2">
+                            style="background-color: rgba(var(--foreground-color), 1); padding-bottom: 0.5rem; z-index: 2">
                             <h4>Transactions</h4>
                             <sm-chips id="filter_selector" class="hidden">
-                                <sm-chip value="all" selected>All</sm-chip>
+                                <sm-chip value="all" selected="true">All</sm-chip>
                                 <sm-chip value="sent">Sent</sm-chip>
                                 <sm-chip value="received">Received</sm-chip>
                                 <sm-chip value="mined">Mined</sm-chip>
                             </sm-chips>
+                            <div id="pagination_wrapper" class="flex gap-0-3 align-center"></div>
                         </div>
                         <ul id="queried_address_transactions" class="observe-empty-state"></ul>
                         <div class="empty-state">
@@ -204,7 +205,6 @@
                             class="button justify-self-center hidden">Load more</button>
                     </section>
                 </div>
-                <div id="pagination_wrapper" class="flex gap-0-3 align-center"></div>
             </div>
             <div id="contacts" class="page flex h-100">
                 <div class="flex direction-column gap-2 h-100">
@@ -1482,141 +1482,141 @@
             }
             let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
             const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
-            if (document.startViewTransition) {
+            const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
-                document.startViewTransition(() => {
+            const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
-                    if (previousActiveElement) {
+            // if (document.startViewTransition) {
-                        previousActiveElement.classList.remove('nav-item--active');
+            //     document.startViewTransition(() => {
-                        previousActiveElement.querySelector('.nav-item__indicator')?.remove()
+            //         if (previousActiveElement) {
-                    }
+            //             previousActiveElement.classList.remove('nav-item--active');
-                    if (currentActiveElement) {
+            //             previousActiveElement.querySelector('.nav-item__indicator')?.remove()
-                        if (getRef('main_navbar').classList.contains('hidden')) {
+            //         }
-                            getRef('main_navbar').classList.remove('hide-away')
+            //         if (currentActiveElement) {
-                            getRef('main_navbar').classList.remove('hidden')
+            //             if (getRef('main_navbar').classList.contains('hidden')) {
-                        }
+            //                 getRef('main_navbar').classList.remove('hide-away')
-                        getRef('main_header').classList.remove('hidden')
+            //                 getRef('main_navbar').classList.remove('hidden')
-                        currentActiveElement.classList.add('nav-item--active')
+            //             }
-                        currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
+            //             getRef('main_header').classList.remove('hidden')
+            //             currentActiveElement.classList.add('nav-item--active')
+            //             currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
+            //         } else {
+            //             if (!getRef('main_navbar').classList.contains('hidden')) {
+            //                 getRef('main_navbar').classList.add('hide-away')
+            //                 getRef('main_navbar').classList.add('hidden')
+            //                 getRef('main_header').classList.add('hidden')
+            //             }
+            //         }
+            //         if (pagesData.lastPage !== pageId) {
+            //             document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+            //             getRef(pageId).classList.remove('hidden')
+            //             pagesData.lastPage = pageId
+            //         }
+            //     })
+            // } else {
+            const animOptions = {
+                duration: 100,
+                fill: 'forwards',
+            }
+            if (currentActiveElement) {
+                if (getRef('main_navbar').classList.contains('hidden')) {
+                    getRef('main_navbar').classList.remove('hide-away')
+                    getRef('main_navbar').classList.remove('hidden')
+                    getRef('main_navbar').animate([
+                        {
+                            transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                            opacity: 0,
+                        },
+                        {
+                            transform: `none`,
+                            opacity: 1,
+                        },
+                    ], {
+                        duration: 100,
+                        fill: 'forwards',
+                        easing: 'ease'
+                    })
+                }
+                getRef('main_header').classList.remove('hidden')
+                const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+                const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+                let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+                if (!previousIndicator) {
+                    previousIndicator = currentIndicator.cloneNode(true)
+                    previousActiveElement = currentActiveElement
+                    previousActiveElement.append(previousIndicator)
+                } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+                    const indicatorDimensions = previousIndicator.getBoundingClientRect()
+                    const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+                    let moveBy
+                    if (isMobileView) {
+                        moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
                     } else {
-                        if (!getRef('main_navbar').classList.contains('hidden')) {
+                        moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
-                            getRef('main_navbar').classList.add('hide-away')
-                            getRef('main_navbar').classList.add('hidden')
-                            getRef('main_header').classList.add('hidden')
-                        }
                     }
-                    if (pagesData.lastPage !== pageId) {
+                    indicatorObserver.observe(previousIndicator)
-                        document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
+                    previousIndicator.animate([
-                        getRef(pageId).classList.remove('hidden')
+                        {
-                        pagesData.lastPage = pageId
+                            transform: 'none',
+                            opacity: 1,
+                        },
+                        {
+                            transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+                            opacity: 0,
+                        },
+                    ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+                        previousIndicator.remove()
                     }
-                })
+                    tempData = {
+                        currentActiveElement,
+                        currentIndicator,
+                        isOnTop,
+                        animOptions,
+                        moveBy
+                    }
+                }
+                previousActiveElement.classList.remove('nav-item--active');
+                currentActiveElement.classList.add('nav-item--active')
             } else {
-                const animOptions = {
+                if (!getRef('main_navbar').classList.contains('hidden')) {
-                    duration: 100,
+                    getRef('main_navbar').classList.add('hide-away')
-                    fill: 'forwards',
+                    getRef('main_navbar').animate([
-                }
+                        {
-                if (currentActiveElement) {
+                            transform: `none`,
-                    if (getRef('main_navbar').classList.contains('hidden')) {
+                            opacity: 1,
-                        getRef('main_navbar').classList.remove('hide-away')
+                        },
-                        getRef('main_navbar').classList.remove('hidden')
+                        {
-                        getRef('main_navbar').animate([
+                            transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
-                            {
+                            opacity: 0,
-                                transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+                        },
-                                opacity: 0,
+                    ], {
-                            },
+                        duration: 200,
-                            {
+                        fill: 'forwards',
-                                transform: `none`,
+                        easing: 'ease'
-                                opacity: 1,
+                    }).onfinish = () => {
-                            },
+                        getRef('main_navbar').classList.add('hidden')
-                        ], {
-                            duration: 100,
-                            fill: 'forwards',
-                            easing: 'ease'
-                        })
                     }
-                    getRef('main_header').classList.remove('hidden')
+                    getRef('main_header').classList.add('hidden')
-                    const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
-                    const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
-                    const isOnTop = previousActiveElementIndex < currentActiveElementIndex
-                    const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
-                    let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
-                    if (!previousIndicator) {
-                        previousIndicator = currentIndicator.cloneNode(true)
-                        previousActiveElement = currentActiveElement
-                        previousActiveElement.append(previousIndicator)
-                    } else if (currentActiveElementIndex !== previousActiveElementIndex) {
-                        const indicatorDimensions = previousIndicator.getBoundingClientRect()
-                        const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
-                        let moveBy
-                        if (isMobileView) {
-                            moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
-                        } else {
-                            moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
-                        }
-                        indicatorObserver.observe(previousIndicator)
-                        previousIndicator.animate([
-                            {
-                                transform: 'none',
-                                opacity: 1,
-                            },
-                            {
-                                transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
-                                opacity: 0,
-                            },
-                        ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
-                            previousIndicator.remove()
-                        }
-                        tempData = {
-                            currentActiveElement,
-                            currentIndicator,
-                            isOnTop,
-                            animOptions,
-                            moveBy
-                        }
-                    }
-                    previousActiveElement.classList.remove('nav-item--active');
-                    currentActiveElement.classList.add('nav-item--active')
-                } else {
-                    if (!getRef('main_navbar').classList.contains('hidden')) {
-                        getRef('main_navbar').classList.add('hide-away')
-                        getRef('main_navbar').animate([
-                            {
-                                transform: `none`,
-                                opacity: 1,
-                            },
-                            {
-                                transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
-                                opacity: 0,
-                            },
-                        ], {
-                            duration: 200,
-                            fill: 'forwards',
-                            easing: 'ease'
-                        }).onfinish = () => {
-                            getRef('main_navbar').classList.add('hidden')
-                        }
-                        getRef('main_header').classList.add('hidden')
-                    }
-                }
-                if (pagesData.lastPage !== pageId) {
-                    document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
-                    getRef(pageId).classList.remove('hidden')
-                    getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
-                    pagesData.lastPage = pageId
                 }
             }
-            document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => {
+            if (pagesData.lastPage !== pageId) {
-                return {
+                document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
-                    isValid: floCrypto.validateAddr(value),
+                getRef(pageId).classList.remove('hidden')
-                    errorText: `Invalid FLO address.<br> It usually starts with "F"`
+                getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
-                }
+                pagesData.lastPage = pageId
-            })
+            }
-            document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = (value) => {
-                return {
-                    isValid: floCrypto.getPubKeyHex(value),
-                    errorText: `Invalid private key.<br> It's a long string of random characters usually starting with 'R'.`
-                }
-            })
         }
+        document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => {
+            return {
+                isValid: floCrypto.validateAddr(value),
+                errorText: `Invalid FLO address.<br> It usually starts with "F"`
+            }
+        })
+        document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = (value) => {
+            return {
+                isValid: floCrypto.getPubKeyHex(value),
+                errorText: `Invalid private key.<br> It's a long string of random characters usually starting with 'R'.`
+            }
+        })
+        // }
 
         const indicatorObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {