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

UI/UX update

Browse Source 
-- New design for completed trades with time shown
This commit is contained in:
sairaj mote 2022-05-15 16:50:47 +05:30
parent a0731450ac
commit 9dcfd1b5e7
4 changed files with 163 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
docs/css/main.css
View File

@ -347,7 +347,7 @@ ul {
} }
.icon-only { .icon-only {
padding: 0.6rem; padding: 0.5rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;
background-color: transparent; background-color: transparent;
} }
@ -447,7 +447,6 @@ ul {
} }
.logo h4 { .logo h4 {
text-transform: capitalize; text-transform: capitalize;
font-size: 0.9rem;
font-weight: 600; font-weight: 600;
} }
.logo .main-logo { .logo .main-logo {
@ -814,7 +813,7 @@ sm-checkbox {
#my_orders, #my_orders,
#market { #market {
width: min(42rem, 100%); width: min(46rem, 100%);
} }
#my_orders { #my_orders {
@ -882,46 +881,78 @@ sm-checkbox {
margin-left: 0.3rem; margin-left: 0.3rem;
} }
.completed-trade,
.transaction-card, .transaction-card,
.live-order { .live-order {
gap: 0 1rem; gap: 0 1rem;
} }
.completed-trade__type,
.transaction-card__type, .transaction-card__type,
.live-order__type { .live-order__type {
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
.transaction-card[data-type=Bought] .transaction-card__type, .transaction-card--buy .transaction-card__type, .completed-trade[data-type=Bought] .completed-trade__type, .completed-trade--buy .completed-trade__type,
.completed-trade[data-type=Bought] .transaction-card__type,
.completed-trade--buy .transaction-card__type,
.completed-trade[data-type=Bought] .live-order__type,
.completed-trade--buy .live-order__type,
.transaction-card[data-type=Bought] .completed-trade__type,
.transaction-card--buy .completed-trade__type,
.transaction-card[data-type=Bought] .transaction-card__type,
.transaction-card--buy .transaction-card__type,
.transaction-card[data-type=Bought] .live-order__type, .transaction-card[data-type=Bought] .live-order__type,
.transaction-card--buy .live-order__type, .transaction-card--buy .live-order__type,
.live-order[data-type=Bought] .completed-trade__type,
.live-order--buy .completed-trade__type,
.live-order[data-type=Bought] .transaction-card__type, .live-order[data-type=Bought] .transaction-card__type,
.live-order--buy .transaction-card__type, .live-order--buy .transaction-card__type,
.live-order[data-type=Bought] .live-order__type, .live-order[data-type=Bought] .live-order__type,
.live-order--buy .live-order__type { .live-order--buy .live-order__type {
color: var(--green); color: var(--green);
} }
.transaction-card[data-type=Sold] .transaction-card__type, .transaction-card--sell .transaction-card__type, .completed-trade[data-type=Sold] .completed-trade__type, .completed-trade--sell .completed-trade__type,
.completed-trade[data-type=Sold] .transaction-card__type,
.completed-trade--sell .transaction-card__type,
.completed-trade[data-type=Sold] .live-order__type,
.completed-trade--sell .live-order__type,
.transaction-card[data-type=Sold] .completed-trade__type,
.transaction-card--sell .completed-trade__type,
.transaction-card[data-type=Sold] .transaction-card__type,
.transaction-card--sell .transaction-card__type,
.transaction-card[data-type=Sold] .live-order__type, .transaction-card[data-type=Sold] .live-order__type,
.transaction-card--sell .live-order__type, .transaction-card--sell .live-order__type,
.live-order[data-type=Sold] .completed-trade__type,
.live-order--sell .completed-trade__type,
.live-order[data-type=Sold] .transaction-card__type, .live-order[data-type=Sold] .transaction-card__type,
.live-order--sell .transaction-card__type, .live-order--sell .transaction-card__type,
.live-order[data-type=Sold] .live-order__type, .live-order[data-type=Sold] .live-order__type,
.live-order--sell .live-order__type { .live-order--sell .live-order__type {
color: var(--danger-color); color: var(--danger-color);
} }
.completed-trade__total,
.transaction-card__total, .transaction-card__total,
.live-order__total { .live-order__total {
font-weight: 700; font-weight: 700;
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
.transaction-card__quantity, .transaction-card__price, .completed-trade__quantity, .completed-trade__price,
.transaction-card__quantity,
.transaction-card__price,
.live-order__quantity, .live-order__quantity,
.live-order__price { .live-order__price {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
.completed-trade__time,
.transaction-card__time,
.live-order__time {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
.completed-trade .more-info,
.transaction-card .more-info, .transaction-card .more-info,
.live-order .more-info { .live-order .more-info {
padding: 0.3rem; padding: 0.3rem;
@ -933,6 +964,16 @@ sm-checkbox {
grid-template-columns: repeat(3, 1fr) 2rem; grid-template-columns: repeat(3, 1fr) 2rem;
} }
.completed-trade {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr 1fr;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 0.5rem;
}
#market_asset_rates { #market_asset_rates {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1378,6 +1419,23 @@ sm-checkbox {
width: 100%; width: 100%;
grid-template-columns: 18rem 1fr; grid-template-columns: 18rem 1fr;
} }
.completed-trade {
grid-template-columns: 1fr 1fr 1fr 8rem;
grid-template-areas: "quantity price amount info";
}
.completed-trade .quantity-block {
grid-area: quantity;
}
.completed-trade .price-block {
grid-area: price;
}
.completed-trade .amount-block {
grid-area: amount;
}
.completed-trade .info-block {
grid-area: info;
}
} }
@media screen and (min-width: 64rem) { @media screen and (min-width: 64rem) {
#home { #home {

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

File diff suppressed because one or more lines are too long

36
docs/css/main.scss
View File

@ -333,7 +333,7 @@ ul {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.icon-only { .icon-only {
padding: 0.6rem; padding: 0.5rem;
aspect-ratio: 1/1; aspect-ratio: 1/1;
background-color: transparent; background-color: transparent;
} }
@ -422,7 +422,6 @@ ul {
margin-right: auto; margin-right: auto;
h4 { h4 {
text-transform: capitalize; text-transform: capitalize;
font-size: 0.9rem;
font-weight: 600; font-weight: 600;
} }
@ -769,7 +768,7 @@ sm-checkbox {
#my_orders, #my_orders,
#market { #market {
width: min(42rem, 100%); width: min(46rem, 100%);
} }
#my_orders { #my_orders {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
@ -832,7 +831,7 @@ sm-checkbox {
margin-left: 0.3rem; margin-left: 0.3rem;
} }
} }
.completed-trade,
.transaction-card, .transaction-card,
.live-order { .live-order {
gap: 0 1rem; gap: 0 1rem;
@ -859,6 +858,10 @@ sm-checkbox {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 0.9); color: rgba(var(--text-color), 0.9);
} }
&__time {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
.more-info { .more-info {
padding: 0.3rem; padding: 0.3rem;
} }
@ -868,6 +871,15 @@ sm-checkbox {
contain-intrinsic-size: 2.5rem; contain-intrinsic-size: 2.5rem;
grid-template-columns: repeat(3, 1fr) 2rem; grid-template-columns: repeat(3, 1fr) 2rem;
} }
.completed-trade {
display: grid;
gap: 0.5rem;
grid-template-columns: 1fr 1fr;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 0.5rem;
}
#market_asset_rates { #market_asset_rates {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1253,6 +1265,22 @@ sm-checkbox {
grid-template-columns: 18rem 1fr; grid-template-columns: 18rem 1fr;
} }
} }
.completed-trade {
grid-template-columns: 1fr 1fr 1fr 8rem;
grid-template-areas: "quantity price amount info";
.quantity-block {
grid-area: quantity;
}
.price-block {
grid-area: price;
}
.amount-block {
grid-area: amount;
}
.info-block {
grid-area: info;
}
}
} }
@media screen and (min-width: 64rem) { @media screen and (min-width: 64rem) {
#home { #home {

113
docs/index.html
View File

@ -74,7 +74,7 @@
</div> </div>
</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 user-content button--small" onclick="showPopup('user_popup')">
<svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -256,7 +256,7 @@
<h4 id="market_orders__title" class="flex align-center"> <h4 id="market_orders__title" class="flex align-center">
Market-wide trades Market-wide trades
</h4> </h4>
<button onclick="refresh();" title="Refresh" style="margin-left: 1rem;"> <button class="icon-only" onclick="refresh();" title="Refresh">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -758,7 +758,7 @@
</template> </template>
<template id="market_order_template"> <template id="market_order_template">
<li class="live-order align-center"> <li class="live-order align-center">
<div class="flex gap-1 space-between align-start"> <div class="flex gap-1 space-between align-center">
<b class="transaction-card__quantity"></b> <b class="transaction-card__quantity"></b>
<button class="more-info" title="View order details"> <button class="more-info" title="View order details">
<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" height="24px" viewBox="0 0 24 24" width="24px">
@ -781,40 +781,52 @@
</li> </li>
</template> </template>
<template id="transaction_template"> <template id="transaction_template">
<li class="list__item transaction-card align-center"> <li class="completed-trade align-center">
<div class="grid"> <div class="grid quantity-block">
<div class="transaction-card__type capitalize"></div> <div class="completed-trade__type capitalize"></div>
<div class="transaction-card__quantity"></div> <b class="completed-trade__quantity"></b>
</div> </div>
<div class="grid"> <div class="flex align-center info-block">
<span class="label transaction-card__price-type">Unit price</span> <time class="completed-trade__time"></time>
<div class="transaction-card__price"></div> <button class="more-info" title="View transaction details">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
<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>
</button>
</div> </div>
<div class="grid"> <div class="grid price-block">
<span class="label transaction-card__price-type">Amount</span> <span class="label">Unit price</span>
<div class="transaction-card__total"></div> <b class="completed-trade__price"></b>
</div>
<div class="grid amount-block">
<span class="label">Amount</span>
<b class="completed-trade__total"></b>
</div> </div>
<button class="more-info" title="View transaction details">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
<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>
</button>
</li> </li>
</template> </template>
<template id="market_transaction_template"> <template id="market_transaction_template">
<li class="list__item transaction-card align-center"> <li class="completed-trade align-center">
<div class="transaction-card__quantity"></div> <b class="completed-trade__quantity quantity-block"></b>
<div class="transaction-card__price"></div> <div class="flex align-center info-block">
<div class="transaction-card__total"></div> <time class="completed-trade__time"></time>
<button class="more-info" title="View transaction details"> <button class="more-info" title="View transaction details">
<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" height="24px" viewBox="0 0 24 24" width="24px">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <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" /> 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>
</button> </button>
</div>
<div class="grid price-block">
<span class="label">Traded at</span>
<b class="completed-trade__price"></b>
</div>
<div class="grid amount-block">
<span class="label">Amount</span>
<b class="completed-trade__total"></b>
</div>
</li> </li>
</template> </template>
<template id="market_order_list_template"> <template id="market_order_list_template">
@ -1145,12 +1157,13 @@
history.replaceState(null, null, '#/exchange') history.replaceState(null, null, '#/exchange')
} }
pagesData.currentPage = pageId pagesData.currentPage = pageId
if (!firstLoad) if (!firstLoad) {
switch (pageId) { switch (pageId) {
case 'exchange': case 'exchange':
if (!document.body.classList.contains('is-signed-in')) break; if (!document.body.classList.contains('is-signed-in')) break;
if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') { if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
params.asset = 'FLO' if (getRef('listed_assets').querySelector(`[href="#/exchange?asset=FLO"]`))
getRef('listed_assets').querySelector(`[href="#/exchange?asset=FLO"]`).click()
} }
if (params.hasOwnProperty('asset') && params.asset !== '') { if (params.hasOwnProperty('asset') && params.asset !== '') {
if (getRef('listed_assets').querySelector('.listed-asset--active')) if (getRef('listed_assets').querySelector('.listed-asset--active'))
@ -1226,6 +1239,7 @@
case 'wallet': case 'wallet':
break; break;
} }
}
if (pagesData.lastPage !== pageId) { if (pagesData.lastPage !== pageId) {
document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide')) document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide'))
getRef(pageId).classList.remove('hide') getRef(pageId).classList.remove('hide')
@ -1529,14 +1543,14 @@
const { buyer, seller, type, other, asset, quantity, unitValue, time } = transactionDetails const { buyer, seller, type, other, asset, quantity, unitValue, time } = transactionDetails
const card = getRef('transaction_template').content.cloneNode(true).firstElementChild const card = getRef('transaction_template').content.cloneNode(true).firstElementChild
card.dataset.type = type card.dataset.type = type
card.querySelector('.transaction-card__type').textContent = type card.querySelector('.completed-trade__type').textContent = type
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}` card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue) card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true) card.querySelector('.completed-trade__price').textContent = formatAmount(unitValue)
card.querySelector('.completed-trade__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
card.querySelector('.more-info').dataset.time = time
return card return card
}, },
marketOrderCard(orderDetails = {}) { marketOrderCard(orderDetails = {}) {
@ -1557,10 +1571,10 @@
marketTransactionCard(transactionDetails = {}) { marketTransactionCard(transactionDetails = {}) {
const { buyer, seller, asset, quantity, unitValue, time } = transactionDetails const { buyer, seller, asset, quantity, unitValue, time } = transactionDetails
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('.completed-trade__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.transaction-card__price').textContent = `₹${unitValue}` card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true) card.querySelector('.completed-trade__price').textContent = `₹${unitValue}`
card.querySelector('.more-info').dataset.time = time card.querySelector('.completed-trade__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
return card return card
@ -1650,6 +1664,7 @@
marketOrders() { marketOrders() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
const ordersType = getRef('market_orders_category_selector').value const ordersType = getRef('market_orders_category_selector').value
getRef('market_trades').innerHTML = '';
if (ordersType === 'open') { if (ordersType === 'open') {
getRef('market_orders__title').textContent = 'Market-wide orders'; getRef('market_orders__title').textContent = 'Market-wide orders';
showChild('market_orders_wrapper', 0) showChild('market_orders_wrapper', 0)
@ -1697,8 +1712,8 @@
frag.append(render.marketTransactionCard(transactionDetails)) frag.append(render.marketTransactionCard(transactionDetails))
}) })
getRef('market_trades').innerHTML = ''; getRef('market_trades').innerHTML = '';
const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true) // const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
getRef('market_trades').append(marketTransactionList) // getRef('market_trades').append(marketTransactionList)
getRef('market_trades').append(frag) getRef('market_trades').append(frag)
}).catch(err => { }).catch(err => {
console.log(err) console.log(err)
@ -2147,8 +2162,13 @@
} else { } else {
getRef('transaction__seller_wrapper').classList.add('hide') getRef('transaction__seller_wrapper').classList.add('hide')
} }
getRef('transaction_time__label').textContent = target.dataset.pending === 'true' ? 'Placed on' : 'Completed on' if (target.dataset.time !== undefined) {
getRef('transaction_time').textContent = getFormattedTime(target.dataset.time) getRef('transaction_time__label').textContent = target.dataset.pending === 'true' ? 'Placed on' : 'Completed on'
getRef('transaction_time').textContent = getFormattedTime(target.dataset.time)
getRef('transaction_time').parentNode.classList.remove('hide')
} else {
getRef('transaction_time').parentNode.classList.add('hide')
}
} }
getRef('orders_list').addEventListener('click', e => { getRef('orders_list').addEventListener('click', e => {
@ -2487,7 +2507,6 @@
// save login time // save login time
localStorage.setItem(`${acc.floID}_last_login`, Date.now()); localStorage.setItem(`${acc.floID}_last_login`, Date.now());
getRef("login_form").classList.add('hide') getRef("login_form").classList.add('hide')
getRef('user_popup_button').classList.remove('hide')
accountDetails = acc accountDetails = acc
console.debug(acc); console.debug(acc);
//Element display //Element display