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

Bug fixes and UI improvements

Browse Source 
-- fixed calculation error when rounding to 8 decimal places
This commit is contained in:
sairaj mote 2022-05-15 00:12:10 +05:30
parent c9ea1e00bb
commit 83df56f259
5 changed files with 195 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
docs/css/main.css
View File

@ -16,7 +16,7 @@ body {
} }
body { body {
--accent-color: #504dff; --accent-color: #516beb;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--foreground-color: 252, 253, 255; --foreground-color: 252, 253, 255;
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
@ -30,7 +30,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #a3a1ff; --accent-color: #a4b3ff;
--text-color: 220, 220, 220; --text-color: 220, 220, 220;
--foreground-color: 27, 28, 29; --foreground-color: 27, 28, 29;
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
@ -62,11 +62,22 @@ a:where([class]):focus-visible {
} }
a { a {
text-decoration: none;
color: var(--accent-color); color: var(--accent-color);
} }
a:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
}
button, a.button {
.button { padding: 0.4rem 0.6rem;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: inherit;
}
button {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -77,31 +88,47 @@ button,
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
cursor: pointer;
transition: transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
align-items: center; align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 700; font-weight: 500;
text-transform: uppercase; white-space: nowrap;
letter-spacing: 0.02em; padding: 0.8rem;
border-radius: 0.3rem;
justify-content: center;
}
button:focus-visible {
outline: var(--accent-color) solid medium;
}
button:not(:disabled) {
cursor: pointer;
} }
.button { .button {
white-space: nowrap;
padding: 0.6rem 1rem;
border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
color: rgba(var(--text-color), 0.8); }
justify-content: center; .button--primary, .button--danger {
color: rgba(var(--background-color), 1) !important;
}
.button--primary .icon, .button--danger .icon {
fill: rgba(var(--background-color), 1);
} }
.button--primary { .button--primary {
background-color: var(--accent-color); background-color: var(--accent-color);
color: rgba(var(--background-color), 1); }
.button--danger {
background-color: var(--danger-color);
}
.button--small {
padding: 0.4rem 0.6rem;
} }
button:disabled { .cta {
opacity: 0.5; text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0.8rem 1rem;
} }
a:-webkit-any-link:focus-visible { a:-webkit-any-link:focus-visible {
@ -151,23 +178,6 @@ ul {
list-style: none; list-style: none;
} }
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.grid {
display: grid;
}
.hide {
opacity: 0;
pointer-events: none;
}
.hide { .hide {
display: none !important; display: none !important;
} }
@ -193,26 +203,6 @@ ul {
grid-column: 1/4; grid-column: 1/4;
} }
.h1 {
font-size: 1.5rem;
}
.h2 {
font-size: 1.2rem;
}
.h3 {
font-size: 1rem;
}
.h4 {
font-size: 0.9rem;
}
.h5 {
font-size: 0.8rem;
}
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@ -443,10 +433,9 @@ ul {
.logo { .logo {
display: grid; display: grid;
align-items: center; align-items: center;
width: 100%;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0 0.3rem; gap: 0 0.3rem;
margin-right: 1rem; margin-right: auto;
} }
.logo h4 { .logo h4 {
text-transform: capitalize; text-transform: capitalize;
@ -635,13 +624,18 @@ sm-checkbox {
} }
#main_header { #main_header {
display: grid; display: flex;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 1.5rem; padding: 1rem 1.5rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
grid-template-columns: 1fr auto auto; }
grid-column: 1/-1;
#user_popup_button {
background-color: rgba(var(--text-color), 0.06);
border-radius: 2rem;
font-size: 0.8rem;
} }
#main_navbar { #main_navbar {
@ -732,13 +726,13 @@ sm-checkbox {
.listed-asset__countdown .icon { .listed-asset__countdown .icon {
margin-left: 0.3rem; margin-left: 0.3rem;
overflow: visible; overflow: visible;
stroke-width: 4; stroke-width: 3;
fill: none; fill: none;
} }
.listed-asset__countdown .icon .path-a { .listed-asset__countdown .icon .path-a {
stroke: var(--accent-color); stroke: var(--accent-color);
stroke-dashoffset: var(--path-length, 0); stroke-dashoffset: var(--path-length, 0);
stroke-dasharray: 65; stroke-dasharray: 63;
} }
.listed-asset__countdown .icon .path-b { .listed-asset__countdown .icon .path-b {
stroke: rgba(var(--text-color), 0.2); stroke: rgba(var(--text-color), 0.2);
@ -1212,6 +1206,14 @@ sm-checkbox {
align-self: center; align-self: center;
} }
#main_header {
padding: 1.5rem;
}
#user_popup_button {
width: 100%;
}
.main_navbar__item--active .item__title { .main_navbar__item--active .item__title {
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;
@ -1220,10 +1222,6 @@ sm-checkbox {
transform: translateY(50%) scale(1.2); transform: translateY(50%) scale(1.2);
} }
.hide-on-mobile {
display: none !important;
}
.listed-asset { .listed-asset {
border-radius: 0; border-radius: 0;
border-bottom: solid thin rgba(var(--text-color), 0.1); border-bottom: solid thin rgba(var(--text-color), 0.1);
@ -1232,28 +1230,16 @@ sm-checkbox {
#price_chart_container { #price_chart_container {
flex: 1; flex: 1;
} }
.hide-on-mobile {
display: none !important;
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
sm-popup { sm-popup {
--width: 24rem; --width: 24rem;
} }
.h1 {
font-size: 2rem;
}
.h2 {
font-size: 1.8rem;
}
.h3 {
font-size: 1.3rem;
}
.h4 {
font-size: 1rem;
}
.popup__header { .popup__header {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
} }
@ -1287,6 +1273,10 @@ sm-checkbox {
grid-area: header; grid-area: header;
} }
#user_popup_button {
justify-self: flex-end;
}
#main_navbar { #main_navbar {
grid-area: nav; grid-area: nav;
flex-direction: column; flex-direction: column;

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

152
docs/css/main.scss
View File

@ -16,7 +16,7 @@ body {
} }
body { body {
--accent-color: #504dff; --accent-color: #516beb;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--foreground-color: 252, 253, 255; --foreground-color: 252, 253, 255;
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
@ -30,7 +30,7 @@ body {
} }
body[data-theme="dark"] { body[data-theme="dark"] {
--accent-color: #a3a1ff; --accent-color: #a4b3ff;
--text-color: 220, 220, 220; --text-color: 220, 220, 220;
--foreground-color: 27, 28, 29; --foreground-color: 27, 28, 29;
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
@ -63,11 +63,21 @@ a:where([class]) {
} }
a { a {
text-decoration: none;
color: var(--accent-color); color: var(--accent-color);
&:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
}
}
a.button {
padding: 0.4rem 0.6rem;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: inherit;
} }
button, button {
.button {
user-select: none; user-select: none;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -75,30 +85,46 @@ button,
background-color: transparent; background-color: transparent;
overflow: hidden; overflow: hidden;
color: inherit; color: inherit;
cursor: pointer;
transition: transform 0.3s;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
align-items: center; align-items: center;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 700; font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.button {
white-space: nowrap; white-space: nowrap;
padding: 0.6rem 1rem; padding: 0.8rem;
border-radius: 0.3rem; border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
color: rgba(var(--text-color), 0.8);
justify-content: center; justify-content: center;
&--primary { &:focus-visible {
background-color: var(--accent-color); outline: var(--accent-color) solid medium;
color: rgba(var(--background-color), 1); }
&:not(:disabled) {
cursor: pointer;
} }
} }
.button {
button:disabled { background-color: rgba(var(--text-color), 0.06);
opacity: 0.5; &--primary,
&--danger {
color: rgba(var(--background-color), 1) !important;
.icon {
fill: rgba(var(--background-color), 1);
}
}
&--primary {
background-color: var(--accent-color);
}
&--danger {
background-color: var(--danger-color);
}
&--small {
padding: 0.4rem 0.6rem;
}
}
.cta {
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0.8rem 1rem;
} }
a:any-link:focus-visible { a:any-link:focus-visible {
@ -140,22 +166,6 @@ ul {
list-style: none; list-style: none;
} }
.flex {
display: flex;
}
.flex-1 {
flex: 1;
}
.grid {
display: grid;
}
.hide {
opacity: 0;
pointer-events: none;
}
.hide { .hide {
display: none !important; display: none !important;
} }
@ -182,26 +192,6 @@ ul {
grid-column: 1/4; grid-column: 1/4;
} }
.h1 {
font-size: 1.5rem;
}
.h2 {
font-size: 1.2rem;
}
.h3 {
font-size: 1rem;
}
.h4 {
font-size: 0.9rem;
}
.h5 {
font-size: 0.8rem;
}
.uppercase { .uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@ -422,11 +412,9 @@ ul {
.logo { .logo {
display: grid; display: grid;
align-items: center; align-items: center;
width: 100%;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0 0.3rem; gap: 0 0.3rem;
margin-right: 1rem; margin-right: auto;
h4 { h4 {
text-transform: capitalize; text-transform: capitalize;
font-size: 0.9rem; font-size: 0.9rem;
@ -601,13 +589,17 @@ sm-checkbox {
} }
#main_header { #main_header {
display: grid; display: flex;
flex-wrap: wrap;
gap: 1rem; gap: 1rem;
padding: 1.5rem; padding: 1rem 1.5rem;
width: 100%; width: 100%;
align-items: center; align-items: center;
grid-template-columns: 1fr auto auto; }
grid-column: 1/-1; #user_popup_button {
background-color: rgba(var(--text-color), 0.06);
border-radius: 2rem;
font-size: 0.8rem;
} }
#main_navbar { #main_navbar {
width: 100%; width: 100%;
@ -692,12 +684,12 @@ sm-checkbox {
.icon { .icon {
margin-left: 0.3rem; margin-left: 0.3rem;
overflow: visible; overflow: visible;
stroke-width: 4; stroke-width: 3;
fill: none; fill: none;
.path-a { .path-a {
stroke: var(--accent-color); stroke: var(--accent-color);
stroke-dashoffset: var(--path-length, 0); stroke-dashoffset: var(--path-length, 0);
stroke-dasharray: 65; stroke-dasharray: 63;
} }
.path-b { .path-b {
stroke: rgba(var(--text-color), 0.2); stroke: rgba(var(--text-color), 0.2);
@ -1110,6 +1102,12 @@ sm-checkbox {
.empty-state { .empty-state {
align-self: center; align-self: center;
} }
#main_header {
padding: 1.5rem;
}
#user_popup_button {
width: 100%;
}
.main_navbar__item--active { .main_navbar__item--active {
.item__title { .item__title {
transform: translateY(100%); transform: translateY(100%);
@ -1119,9 +1117,6 @@ sm-checkbox {
transform: translateY(50%) scale(1.2); transform: translateY(50%) scale(1.2);
} }
} }
.hide-on-mobile {
display: none !important;
}
.listed-asset { .listed-asset {
border-radius: 0; border-radius: 0;
border-bottom: solid thin rgba(var(--text-color), 0.1); border-bottom: solid thin rgba(var(--text-color), 0.1);
@ -1129,26 +1124,14 @@ sm-checkbox {
#price_chart_container { #price_chart_container {
flex: 1; flex: 1;
} }
.hide-on-mobile {
display: none !important;
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
sm-popup { sm-popup {
--width: 24rem; --width: 24rem;
} }
.h1 {
font-size: 2rem;
}
.h2 {
font-size: 1.8rem;
}
.h3 {
font-size: 1.3rem;
}
.h4 {
font-size: 1rem;
}
.popup__header { .popup__header {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
} }
@ -1175,6 +1158,9 @@ sm-checkbox {
#main_header { #main_header {
grid-area: header; grid-area: header;
} }
#user_popup_button {
justify-self: flex-end;
}
#main_navbar { #main_navbar {
grid-area: nav; grid-area: nav;
flex-direction: column; flex-direction: column;

42
docs/index.html
View File

@ -75,12 +75,13 @@
</div> </div>
<theme-toggle id="theme_toggle"></theme-toggle> <theme-toggle id="theme_toggle"></theme-toggle>
<button id="user_popup_button" class="hide" onclick="showPopup('user_popup')"> <button id="user_popup_button" class="hide" onclick="showPopup('user_popup')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /> d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" />
</svg> </svg>
<div class="my-flo-id"></div>
</button> </button>
</header> </header>
<section id="pages_container"> <section id="pages_container">
@ -1447,8 +1448,14 @@
return [`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`, ((diff % 3600000) / 60000).toFixed(2)] return [`${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`, ((diff % 3600000) / 60000).toFixed(2)]
} }
// remove digitals after specified decimal places without rounding
function toFixed(num, fixed = 8) {
var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
return parseFloat(num.toString().match(re)[0]);
}
function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') { function getSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
return parseFloat((parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType]).toFixed(8)) return toFixed(parseFloat(floGlobals.exchangeRates[asset]) * deviation[tradeType], 8)
} }
function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') { function showSuggestedPrice(asset = pagesData.params.asset || 'FLO') {
@ -1497,7 +1504,7 @@
floGlobals.countDowns.intervals[asset] = setInterval(() => { floGlobals.countDowns.intervals[asset] = setInterval(() => {
const [timeLeft, minutes] = getTimeLeft(countDown) const [timeLeft, minutes] = getTimeLeft(countDown)
clone.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft; clone.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
const pathLength = 65 - Math.ceil((minutes / 60) * 65) const pathLength = 63 - Math.ceil((minutes / 60) * 63)
clone.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength) clone.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
}, 1000); }, 1000);
floGlobals.countDowns.timeouts[asset] = setTimeout(() => { floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
@ -1725,7 +1732,7 @@
function getChartTheme() { function getChartTheme() {
const theme = getRef('theme_toggle').value const theme = getRef('theme_toggle').value
const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color') const textColor = window.getComputedStyle(document.body).getPropertyValue('--text-color')
const accentColor = theme === 'dark' ? '#a3a1ff' : '#504dff' const accentColor = window.getComputedStyle(document.body).getPropertyValue('--accent-color')
return { return {
chart: { chart: {
layout: { layout: {
@ -1841,11 +1848,11 @@
const unitValue = getSuggestedPrice() const unitValue = getSuggestedPrice()
const fraction = parseFloat(target.value) const fraction = parseFloat(target.value)
if (tradeType === 'buy') { if (tradeType === 'buy') {
getRef('get_total').value = parseFloat((fraction * allTokens['rupee'].net).toFixed(8)) getRef('get_total').value = toFixed(fraction * allTokens['rupee'].net)
getRef('get_quantity').value = parseFloat(((allTokens['rupee'].net * fraction) / getSuggestedPrice()).toFixed(8)) getRef('get_quantity').value = toFixed((allTokens['rupee'].net * fraction) / getSuggestedPrice())
} else { } else {
getRef('get_total').value = parseFloat((fraction * allTokens[selectedAsset].net * getSuggestedPrice()).toFixed(8)) getRef('get_total').value = toFixed(fraction * allTokens[selectedAsset].net * getSuggestedPrice())
getRef('get_quantity').value = parseFloat((allTokens[selectedAsset].net * fraction).toFixed(8)) getRef('get_quantity').value = toFixed(allTokens[selectedAsset].net * fraction)
} }
} }
@ -1866,11 +1873,11 @@
}) })
getRef('get_quantity').addEventListener('keyup', e => { getRef('get_quantity').addEventListener('keyup', e => {
const unitValue = getSuggestedPrice() const unitValue = getSuggestedPrice()
getRef('get_total').value = parseFloat((parseFloat(e.target.value) * unitValue).toFixed(8)) || 0 getRef('get_total').value = toFixed(parseFloat(e.target.value) * unitValue)
}) })
getRef('get_total').addEventListener('keyup', e => { getRef('get_total').addEventListener('keyup', e => {
const unitValue = getSuggestedPrice() const unitValue = getSuggestedPrice()
getRef('get_quantity').value = parseFloat((parseFloat(e.target.value) / unitValue).toFixed(8)) || 0 getRef('get_quantity').value = toFixed(parseFloat(e.target.value) / unitValue)
}) })
getRef('wallet_actions').addEventListener('click', e => { getRef('wallet_actions').addEventListener('click', e => {
@ -1879,7 +1886,7 @@
const type = target.value const type = target.value
const asset = getRef('wallet_asset_selector').value const asset = getRef('wallet_asset_selector').value
getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${parseFloat(allTokens[asset].net.toFixed(8))} ${asset}` getRef('wallet_quantity_type').textContent = getRef('quantity_type').textContent = asset === 'rupee' ? formatAmount(allTokens.rupee.net, true) : `${toFixed(allTokens[asset].net)} ${asset}`
getRef('wallet_popup__cta').textContent = `${type} ${asset}` getRef('wallet_popup__cta').textContent = `${type} ${asset}`
getRef('wallet_popup__cta').setAttribute('value', type) getRef('wallet_popup__cta').setAttribute('value', type)
getRef('wallet_popup__title').textContent = `${type} ${asset}` getRef('wallet_popup__title').textContent = `${type} ${asset}`
@ -1966,7 +1973,7 @@
const target = e.target.closest('button') const target = e.target.closest('button')
const asset = getRef('wallet_asset_selector').value const asset = getRef('wallet_asset_selector').value
const fraction = parseFloat(target.value) const fraction = parseFloat(target.value)
let total = parseFloat((allTokens[asset].net * fraction).toFixed(8)); let total = toFixed(allTokens[asset].net * fraction);
if (asset == 'FLO' && fraction === 1 & total > 0.1) { if (asset == 'FLO' && fraction === 1 & total > 0.1) {
total -= 0.1; total -= 0.1;
} }
@ -2242,10 +2249,10 @@
case 'confirm_trade_popup': case 'confirm_trade_popup':
const asset = pagesData.params.asset; const asset = pagesData.params.asset;
const quantity = parseFloat(getRef('get_quantity').value) const quantity = parseFloat(getRef('get_quantity').value)
const currentPrice = parseFloat(floGlobals.exchangeRates[asset].toFixed(8)); const currentPrice = toFixed(floGlobals.exchangeRates[asset]);
const price = parseFloat(getSuggestedPrice().toFixed(8)); const price = toFixed(getSuggestedPrice());
const total = formatAmount(parseFloat(getRef('get_total').value)) const total = formatAmount(parseFloat(getRef('get_total').value))
const minTotal = formatAmount(parseFloat((currentPrice * quantity).toFixed(8))) const minTotal = formatAmount(toFixed(currentPrice * quantity))
getRef('confirm_trade__title').textContent = `${tradeType} ${asset}` getRef('confirm_trade__title').textContent = `${tradeType} ${asset}`
getRef('confirm_trade__details').innerHTML = ` getRef('confirm_trade__details').innerHTML = `
<div class="grid"> <div class="grid">
@ -2421,7 +2428,7 @@
floGlobals.countDowns.intervals[asset] = setInterval(() => { floGlobals.countDowns.intervals[asset] = setInterval(() => {
const [timeLeft, minutes] = getTimeLeft(countDown[asset]) const [timeLeft, minutes] = getTimeLeft(countDown[asset])
listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft; listedAsset.querySelector('.listed-asset__countdown').firstChild.textContent = timeLeft;
const pathLength = 65 - Math.ceil((minutes / 60) * 65) const pathLength = 63 - Math.ceil((minutes / 60) * 63)
listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength) listedAsset.querySelector('.listed-asset__countdown').style.setProperty('--path-length', pathLength)
}, 1000) }, 1000)
if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) { if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
@ -2485,6 +2492,7 @@
console.debug(acc); console.debug(acc);
//Element display //Element display
document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide')) document.querySelectorAll(".user-content").forEach(elem => elem.classList.remove('hide'))
document.querySelectorAll(".my-flo-id").forEach(elem => elem.textContent = acc.floID)
getRef("user_id").value = acc.floID; getRef("user_id").value = acc.floID;
getRef("sink_id").value = acc.sinkID; getRef("sink_id").value = acc.sinkID;
if (acc.subAdmin) if (acc.subAdmin)

29
docs/scripts/components.js
View File

@ -743,6 +743,7 @@ smNotifications.innerHTML = `
max-width: 100%; max-width: 100%;
padding: 1rem; padding: 1rem;
align-items: center; align-items: center;
box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.14);
touch-action: none; touch-action: none;
} }
.icon-container:not(:empty){ .icon-container:not(:empty){
@ -803,6 +804,25 @@ smNotifications.innerHTML = `
.close:active{ .close:active{
transform: scale(0.9); transform: scale(0.9);
} }
.action{
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.8rem;
border-radius: 0.2rem;
border: none;
background-color: rgba(var(--text-color, (17,17,17)), 0.03);
font-family: inherit;
font-size: inherit;
color: var(--accent-color, teal);
font-weight: 500;
cursor: pointer;
}
@media screen and (max-width: 640px){
.notification-panel:not(:empty){
padding-bottom: 3rem;
}
}
@media screen and (min-width: 640px){ @media screen and (min-width: 640px){
.notification-panel{ .notification-panel{
max-width: 28rem; max-width: 28rem;
@ -880,7 +900,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
} }
createNotification(message, options = {}) { createNotification(message, options = {}) {
const { pinned = false, icon = '' } = options; const { pinned = false, icon = '', action } = options;
const notification = document.createElement('output') const notification = document.createElement('output')
notification.id = this.randString(8) notification.id = this.randString(8)
notification.classList.add('notification'); notification.classList.add('notification');
@ -889,6 +909,11 @@ customElements.define('sm-notifications', class extends HTMLElement {
<div class="icon-container">${icon}</div> <div class="icon-container">${icon}</div>
<p>${message}</p> <p>${message}</p>
`; `;
if (action) {
composition += `
<button class="action">${action.label}</button>
`
}
if (pinned) { if (pinned) {
notification.classList.add('pinned'); notification.classList.add('pinned');
composition += ` composition += `
@ -930,6 +955,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
e.target.commitStyles() e.target.commitStyles()
e.target.cancel() e.target.cancel()
} }
if (notification.querySelector('.action'))
notification.querySelector('.action').addEventListener('click', options.action.callback)
return notification.id; return notification.id;
} }