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

UI and UX improvements

Browse Source
This commit is contained in:
sairaj mote 2022-05-14 14:38:18 +05:30
parent a77f7d77d6
commit 042d8a53ca
4 changed files with 74 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
docs/css/main.css
View File

@ -18,8 +18,8 @@ body {
body { body {
--accent-color: #504dff; --accent-color: #504dff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 240, 240, 240; --foreground-color: 252, 253, 255;
--foreground-color: 250, 250, 250; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
scrollbar-width: thin; scrollbar-width: thin;
@ -32,8 +32,8 @@ body {
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #a3a1ff; --accent-color: #a3a1ff;
--text-color: 220, 220, 220; --text-color: 220, 220, 220;
--background-color: 10, 10, 10; --foreground-color: 27, 28, 29;
--foreground-color: 24, 24, 24; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
} }
@ -689,7 +689,6 @@ sm-checkbox {
.listed-asset { .listed-asset {
position: relative; position: relative;
grid-template-columns: auto 1fr auto;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 0; padding: 1rem 0;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -701,22 +700,39 @@ sm-checkbox {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
color: inherit; color: inherit;
grid-template-columns: auto 1fr auto auto;
grid-template-areas: "icon name rate right-arrow" "icon name countdown right-arrow";
}
.listed-asset__icon {
grid-area: icon;
padding: 0.5rem;
border-radius: 1rem;
display: flex;
background-color: var(--accent-color);
}
.listed-asset__icon .icon {
height: 1.2rem;
width: 1.2rem;
fill: rgba(var(--background-color), 1);
}
.listed-asset__name {
grid-area: name;
margin-left: 0.3rem;
}
.listed-asset__rate {
grid-area: rate;
} }
.listed-asset__countdown { .listed-asset__countdown {
grid-area: countdown;
justify-self: flex-end; justify-self: flex-end;
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
grid-column: 1/-1;
font-size: 0.8rem; font-size: 0.8rem;
background-color: #f0e68cc0; background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
} }
.listed-asset__icon { .listed-asset__right-arrow {
display: flex; grid-area: right-arrow;
}
.listed-asset__icon .icon {
height: 1.5rem;
width: 1.5rem;
} }
.quantity-selector .button { .quantity-selector .button {
@ -1294,7 +1310,7 @@ sm-checkbox {
width: 100%; width: 100%;
height: 100%; height: 100%;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: 16rem minmax(0, 1fr); grid-template-columns: 17rem minmax(0, 1fr);
align-items: flex-start; align-items: flex-start;
} }

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

File diff suppressed because one or more lines are too long

42
docs/css/main.scss
View File

@ -18,8 +18,8 @@ body {
body { body {
--accent-color: #504dff; --accent-color: #504dff;
--text-color: 20, 20, 20; --text-color: 20, 20, 20;
--background-color: 240, 240, 240; --foreground-color: 252, 253, 255;
--foreground-color: 250, 250, 250; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
scrollbar-width: thin; scrollbar-width: thin;
@ -32,8 +32,8 @@ body {
body[data-theme="dark"] { body[data-theme="dark"] {
--accent-color: #a3a1ff; --accent-color: #a3a1ff;
--text-color: 220, 220, 220; --text-color: 220, 220, 220;
--background-color: 10, 10, 10; --foreground-color: 27, 28, 29;
--foreground-color: 24, 24, 24; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
sm-popup::part(popup) { sm-popup::part(popup) {
@ -654,7 +654,6 @@ sm-checkbox {
} }
.listed-asset { .listed-asset {
position: relative; position: relative;
grid-template-columns: auto 1fr auto;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem 0; padding: 1rem 0;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -663,21 +662,38 @@ sm-checkbox {
transition: background-color 0.3s; transition: background-color 0.3s;
user-select: none; user-select: none;
color: inherit; color: inherit;
grid-template-columns: auto 1fr auto auto;
grid-template-areas: "icon name rate right-arrow" "icon name countdown right-arrow";
&__icon {
grid-area: icon;
padding: 0.5rem;
border-radius: 1rem;
display: flex;
background-color: var(--accent-color);
.icon {
height: 1.2rem;
width: 1.2rem;
fill: rgba(var(--background-color), 1);
}
}
&__name {
grid-area: name;
margin-left: 0.3rem;
}
&__rate {
grid-area: rate;
}
&__countdown { &__countdown {
grid-area: countdown;
justify-self: flex-end; justify-self: flex-end;
border-radius: 0.3rem; border-radius: 0.3rem;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
grid-column: 1/-1;
font-size: 0.8rem; font-size: 0.8rem;
background-color: #f0e68cc0; background-color: #f0e68cc0;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, 0.9);
} }
&__icon { &__right-arrow {
display: flex; grid-area: right-arrow;
.icon {
height: 1.5rem;
width: 1.5rem;
}
} }
} }
.quantity-selector { .quantity-selector {
@ -1180,7 +1196,7 @@ sm-checkbox {
width: 100%; width: 100%;
height: 100%; height: 100%;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: 16rem minmax(0, 1fr); grid-template-columns: 17rem minmax(0, 1fr);
align-items: flex-start; align-items: flex-start;
} }
} }

24
docs/index.html
View File

@ -697,6 +697,11 @@
<h4 class="listed-asset__name"></h4> <h4 class="listed-asset__name"></h4>
<b class="listed-asset__rate"></b> <b class="listed-asset__rate"></b>
<div class="listed-asset__countdown"></div> <div class="listed-asset__countdown"></div>
<svg class="icon listed-asset__right-arrow hide-on-desktop" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
</svg>
</a> </a>
</li> </li>
</template> </template>
@ -1446,15 +1451,15 @@
<h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3> <h3>${formatAmount(floGlobals.exchangeRates[asset])}</h3>
</div> </div>
<div class="grid"> <div class="grid">
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Highest' : 'Lowest'} price</div> <div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">Valid ${tradeType === 'buy' ? 'upto' : 'until'}</div>
<h3>${formatAmount(getSuggestedPrice(asset))}</h3> <h3>${formatAmount(getSuggestedPrice(asset))}</h3>
</div> </div>
<div class="tooltip"> <div class="tooltip">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
<p class="banner"> <p class="banner">
${tradeType === 'buy' ? ${tradeType === 'buy' ?
`<b>Highest price</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> higher than current price.` : `<b>Valid upto</b> is the max price upto which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> higher than current price.` :
`<b>Lowest price</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> lower than current price.` `<b>Valid until</b> is the min price until which your order can be executed, which is <b>${DEFAULT_TRADE_PRICE_DEVIATION * 100}%</b> lower than current price.`
} System will always try to execute your order at the <b>nearest price possible to current price</b>. } System will always try to execute your order at the <b>nearest price possible to current price</b>.
</p> </p>
</div> </div>
@ -1483,7 +1488,7 @@
clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate) clone.querySelector('.listed-asset__rate').textContent = formatAmount(rate)
clone.querySelector('.listed-asset__name').textContent = asset clone.querySelector('.listed-asset__name').textContent = asset
floGlobals.countDowns.intervals[asset] = setInterval(() => { floGlobals.countDowns.intervals[asset] = setInterval(() => {
clone.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown)}`; clone.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown);
}, 1000); }, 1000);
floGlobals.countDowns.timeouts[asset] = setTimeout(() => { floGlobals.countDowns.timeouts[asset] = setTimeout(() => {
updateRate() updateRate()
@ -1510,7 +1515,7 @@
card.querySelector('.transaction-card__type').textContent = type card.querySelector('.transaction-card__type').textContent = type
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue) card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity)) card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
card.querySelector('.more-info').dataset.buyer = buyer card.querySelector('.more-info').dataset.buyer = buyer
card.querySelector('.more-info').dataset.seller = seller card.querySelector('.more-info').dataset.seller = seller
card.querySelector('.more-info').dataset.other = other card.querySelector('.more-info').dataset.other = other
@ -1525,7 +1530,7 @@
card.classList.add(`transaction-card--${type}`) card.classList.add(`transaction-card--${type}`)
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue) card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity)) card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
card.querySelector('.more-info').dataset.time = time_placed card.querySelector('.more-info').dataset.time = time_placed
card.querySelector('.more-info').dataset.buyer = type === 'buy' ? floID : undefined card.querySelector('.more-info').dataset.buyer = type === 'buy' ? floID : undefined
card.querySelector('.more-info').dataset.seller = type === 'sell' ? floID : undefined card.querySelector('.more-info').dataset.seller = type === 'sell' ? floID : undefined
@ -1537,7 +1542,7 @@
const card = getRef('market_transaction_template').content.cloneNode(true).firstElementChild const card = getRef('market_transaction_template').content.cloneNode(true).firstElementChild
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = `₹${unitValue}` card.querySelector('.transaction-card__price').textContent = `₹${unitValue}`
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity)) card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
card.querySelector('.more-info').dataset.time = time card.querySelector('.more-info').dataset.time = time
card.querySelector('.more-info').dataset.buyer = buyer card.querySelector('.more-info').dataset.buyer = buyer
card.querySelector('.more-info').dataset.seller = seller card.querySelector('.more-info').dataset.seller = seller
@ -1567,7 +1572,8 @@
value: rate value: rate
} }
}) })
lineSeries.setData(data); if (lineSeries)
lineSeries.setData(data);
new ResizeObserver(entries => { new ResizeObserver(entries => {
chartDimensions.height = entries[0].contentRect.height - 10; chartDimensions.height = entries[0].contentRect.height - 10;
chartDimensions.width = entries[0].contentRect.width; chartDimensions.width = entries[0].contentRect.width;
@ -2402,7 +2408,7 @@
clearInterval(floGlobals.countDowns.intervals[asset]); clearInterval(floGlobals.countDowns.intervals[asset]);
} }
floGlobals.countDowns.intervals[asset] = setInterval(() => { floGlobals.countDowns.intervals[asset] = setInterval(() => {
listedAsset.querySelector('.listed-asset__countdown').textContent = `Est. time left: ${getTimeLeft(countDown[asset])}` listedAsset.querySelector('.listed-asset__countdown').textContent = getTimeLeft(countDown[asset])
}, 1000) }, 1000)
if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) { if (floGlobals.countDowns.timeouts.hasOwnProperty(asset)) {
clearTimeout(floGlobals.countDowns.timeouts[asset]); clearTimeout(floGlobals.countDowns.timeouts[asset]);