Bug fixes and UI improvements
This commit is contained in:
sairaj mote
parent
5dadcf1164
commit
332ff32e1c
81
css/main.css
81
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 {
|
||||
position: fixed;
|
||||
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_wrapper:empty {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
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;
|
||||
&:empty {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
260
index.html
260
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) {
|
||||
document.startViewTransition(() => {
|
||||
if (previousActiveElement) {
|
||||
previousActiveElement.classList.remove('nav-item--active');
|
||||
previousActiveElement.querySelector('.nav-item__indicator')?.remove()
|
||||
}
|
||||
if (currentActiveElement) {
|
||||
if (getRef('main_navbar').classList.contains('hidden')) {
|
||||
getRef('main_navbar').classList.remove('hide-away')
|
||||
getRef('main_navbar').classList.remove('hidden')
|
||||
}
|
||||
getRef('main_header').classList.remove('hidden')
|
||||
currentActiveElement.classList.add('nav-item--active')
|
||||
currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
|
||||
const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
|
||||
const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
|
||||
// if (document.startViewTransition) {
|
||||
// document.startViewTransition(() => {
|
||||
// if (previousActiveElement) {
|
||||
// previousActiveElement.classList.remove('nav-item--active');
|
||||
// previousActiveElement.querySelector('.nav-item__indicator')?.remove()
|
||||
// }
|
||||
// if (currentActiveElement) {
|
||||
// if (getRef('main_navbar').classList.contains('hidden')) {
|
||||
// getRef('main_navbar').classList.remove('hide-away')
|
||||
// getRef('main_navbar').classList.remove('hidden')
|
||||
// }
|
||||
// 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')) {
|
||||
getRef('main_navbar').classList.add('hide-away')
|
||||
getRef('main_navbar').classList.add('hidden')
|
||||
getRef('main_header').classList.add('hidden')
|
||||
}
|
||||
moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
|
||||
}
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
|
||||
getRef(pageId).classList.remove('hidden')
|
||||
pagesData.lastPage = pageId
|
||||
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 {
|
||||
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'
|
||||
})
|
||||
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.remove('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
|
||||
getRef('main_header').classList.add('hidden')
|
||||
}
|
||||
}
|
||||
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'.`
|
||||
}
|
||||
})
|
||||
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) => {
|
||||
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 => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user