RanchiMall/flowallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI enhancements

Browse Source
This commit is contained in:
sairaj mote 2023-09-26 17:51:25 +05:30
parent 49a76c0f16
commit 8a94cffe27
5 changed files with 138 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -25,7 +25,6 @@ body {
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
transition: background-color 0.3s;
--dark-red: #d40e1e; --dark-red: #d40e1e;
--red: #f50000; --red: #f50000;
--kinda-pink: #e40273; --kinda-pink: #e40273;
@ -608,7 +607,6 @@ h3 {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
transition: background-color 0.3s;
} }
#pages_container { #pages_container {
@ -647,10 +645,7 @@ h3 {
border-radius: 0.3rem; border-radius: 0.3rem;
text-align: center; text-align: center;
} }
.nav-item .icon { .nav-item .icon, .nav-item__title {
transition: transform 0.2s;
}
.nav-item__title {
transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s;
} }
.nav-item--active { .nav-item--active {
@ -667,6 +662,11 @@ h3 {
background: var(--accent-color); background: var(--accent-color);
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
z-index: 1; z-index: 1;
view-transition-name: indicator;
}
::view-transition {
transition: 0.3s;
} }
#fix_invalid_button { #fix_invalid_button {
@ -1261,6 +1261,9 @@ legend,
width: calc(100vw - 2rem); width: calc(100vw - 2rem);
flex-wrap: wrap; flex-wrap: wrap;
} }
#pagination_wrapper:empty {
display: none !important;
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
sm-popup { sm-popup {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
css/main.scss
View File

@ -25,7 +25,6 @@ body {
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
transition: background-color 0.3s;
// Accent colors // Accent colors
--dark-red: #d40e1e; --dark-red: #d40e1e;
--red: #f50000; --red: #f50000;
@ -580,7 +579,6 @@ h3 {
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
transition: background-color 0.3s;
} }
#pages_container { #pages_container {
flex: 1; flex: 1;
@ -616,9 +614,7 @@ h3 {
font-size: 0.7rem; font-size: 0.7rem;
border-radius: 0.3rem; border-radius: 0.3rem;
text-align: center; text-align: center;
.icon { .icon,
transition: transform 0.2s;
}
&__title { &__title {
transition: opacity 0.2s, transform 0.2s; transition: opacity 0.2s, transform 0.2s;
} }
@ -636,8 +632,12 @@ h3 {
background: var(--accent-color); background: var(--accent-color);
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
z-index: 1; z-index: 1;
view-transition-name: indicator;
} }
} }
::view-transition {
transition: 0.3s;
}
#fix_invalid_button { #fix_invalid_button {
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
@ -1204,6 +1204,9 @@ legend,
transform: translateX(-50%); transform: translateX(-50%);
width: calc(100vw - 2rem); width: calc(100vw - 2rem);
flex-wrap: wrap; flex-wrap: wrap;
&:empty {
display: none !important;
}
} }
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {

209
index.html
View File

@ -54,7 +54,7 @@
routeTo(window.location.hash, { firstLoad: true }) routeTo(window.location.hash, { firstLoad: true })
}).catch(e => { }).catch(e => {
console.error(e) console.error(e)
routeTo(window.location.hash, { firstLoad: true, smartContractUnavailable: true }) routeTo(window.location.hash, { firstLoad: true, smartContractsUnavailable: true })
}).finally(() => { }).finally(() => {
loader(false) loader(false)
}) })
@ -204,7 +204,7 @@
class="button justify-self-center hidden">Load more</button> class="button justify-self-center hidden">Load more</button>
</section> </section>
</div> </div>
<div id="pagination_wrapper" class="flex gap-0-3 align-center"> </div> <div id="pagination_wrapper" class="flex gap-0-3 align-center"></div>
</div> </div>
<div id="contacts" class="page flex h-100"> <div id="contacts" class="page flex h-100">
<div class="flex direction-column gap-2 h-100"> <div class="flex direction-column gap-2 h-100">
@ -1178,7 +1178,7 @@
let tempData let tempData
async function routeTo(targetPage, options = {}) { async function routeTo(targetPage, options = {}) {
const { firstLoad, hashChange, smartContractUnavailable = false } = options const { firstLoad, hashChange, smartContractsUnavailable = false } = options
let pageId let pageId
let params = {} let params = {}
let searchParams let searchParams
@ -1475,100 +1475,129 @@
} }
break break
} }
const animOptions = {
duration: 100,
fill: 'forwards',
}
let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active') let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`) const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
if (currentActiveElement) { if (document.startViewTransition) {
if (getRef('main_navbar').classList.contains('hidden')) { document.startViewTransition(() => {
getRef('main_navbar').classList.remove('hide-away') if (previousActiveElement) {
getRef('main_navbar').classList.remove('hidden') previousActiveElement.classList.remove('nav-item--active');
getRef('main_navbar').animate([ previousActiveElement.querySelector('.nav-item__indicator')?.remove()
{ }
transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`, if (currentActiveElement) {
opacity: 0, if (getRef('main_navbar').classList.contains('hidden')) {
}, getRef('main_navbar').classList.remove('hide-away')
{ getRef('main_navbar').classList.remove('hidden')
transform: `none`, }
opacity: 1, getRef('main_header').classList.remove('hidden')
}, currentActiveElement.classList.add('nav-item--active')
], { currentActiveElement.append(createElement('div', { className: 'nav-item__indicator' }));
duration: 100,
fill: 'forwards',
easing: 'ease'
})
}
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 { } else {
moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height 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')
}
} }
indicatorObserver.observe(previousIndicator) if (pagesData.lastPage !== pageId) {
previousIndicator.animate([ document.querySelectorAll('.page').forEach(page => page.classList.add('hidden'))
{ getRef(pageId).classList.remove('hidden')
transform: 'none', pagesData.lastPage = pageId
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 { } else {
if (!getRef('main_navbar').classList.contains('hidden')) { const animOptions = {
getRef('main_navbar').classList.add('hide-away') duration: 100,
getRef('main_navbar').animate([ fill: 'forwards',
{ }
transform: `none`, if (currentActiveElement) {
opacity: 1, if (getRef('main_navbar').classList.contains('hidden')) {
}, getRef('main_navbar').classList.remove('hide-away')
{ getRef('main_navbar').classList.remove('hidden')
transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`, getRef('main_navbar').animate([
opacity: 0, {
}, transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
], { opacity: 0,
duration: 200, },
fill: 'forwards', {
easing: 'ease' transform: `none`,
}).onfinish = () => { opacity: 1,
getRef('main_navbar').classList.add('hidden') },
} ], {
getRef('main_header').classList.add('hidden') duration: 100,
fill: 'forwards',
easing: 'ease'
})
}
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
} }
}
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 = floCrypto.validateFloID) document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = floCrypto.validateFloID)
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex) document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = floCrypto.getPubKeyHex)

2
scripts/components.js
View File

File diff suppressed because one or more lines are too long