UI/UX update
-- New design for completed trades with time shown
This commit is contained in:
sairaj mote
parent
a0731450ac
commit
9dcfd1b5e7
@ -347,7 +347,7 @@ ul {
|
||||
}
|
||||
|
||||
.icon-only {
|
||||
padding: 0.6rem;
|
||||
padding: 0.5rem;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -447,7 +447,6 @@ ul {
|
||||
}
|
||||
.logo h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.logo .main-logo {
|
||||
@ -814,7 +813,7 @@ sm-checkbox {
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(42rem, 100%);
|
||||
width: min(46rem, 100%);
|
||||
}
|
||||
|
||||
#my_orders {
|
||||
@ -882,46 +881,78 @@ sm-checkbox {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
.completed-trade,
|
||||
.transaction-card,
|
||||
.live-order {
|
||||
gap: 0 1rem;
|
||||
}
|
||||
.completed-trade__type,
|
||||
.transaction-card__type,
|
||||
.live-order__type {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
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--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--buy .transaction-card__type,
|
||||
.live-order[data-type=Bought] .live-order__type,
|
||||
.live-order--buy .live-order__type {
|
||||
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--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--sell .transaction-card__type,
|
||||
.live-order[data-type=Sold] .live-order__type,
|
||||
.live-order--sell .live-order__type {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.completed-trade__total,
|
||||
.transaction-card__total,
|
||||
.live-order__total {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
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__price {
|
||||
font-size: 0.9rem;
|
||||
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,
|
||||
.live-order .more-info {
|
||||
padding: 0.3rem;
|
||||
@ -933,6 +964,16 @@ sm-checkbox {
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1378,6 +1419,23 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
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) {
|
||||
#home {
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -333,7 +333,7 @@ ul {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.icon-only {
|
||||
padding: 0.6rem;
|
||||
padding: 0.5rem;
|
||||
aspect-ratio: 1/1;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -422,7 +422,6 @@ ul {
|
||||
margin-right: auto;
|
||||
h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -769,7 +768,7 @@ sm-checkbox {
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(42rem, 100%);
|
||||
width: min(46rem, 100%);
|
||||
}
|
||||
#my_orders {
|
||||
grid-template-rows: auto 1fr;
|
||||
@ -832,7 +831,7 @@ sm-checkbox {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.completed-trade,
|
||||
.transaction-card,
|
||||
.live-order {
|
||||
gap: 0 1rem;
|
||||
@ -859,6 +858,10 @@ sm-checkbox {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
&__time {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.more-info {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
@ -868,6 +871,15 @@ sm-checkbox {
|
||||
contain-intrinsic-size: 2.5rem;
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1253,6 +1265,22 @@ sm-checkbox {
|
||||
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) {
|
||||
#home {
|
||||
|
||||
113
docs/index.html
113
docs/index.html
@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
@ -256,7 +256,7 @@
|
||||
<h4 id="market_orders__title" class="flex align-center">
|
||||
Market-wide trades
|
||||
</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"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
@ -758,7 +758,7 @@
|
||||
</template>
|
||||
<template id="market_order_template">
|
||||
<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>
|
||||
<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">
|
||||
@ -781,40 +781,52 @@
|
||||
</li>
|
||||
</template>
|
||||
<template id="transaction_template">
|
||||
<li class="list__item transaction-card align-center">
|
||||
<div class="grid">
|
||||
<div class="transaction-card__type capitalize"></div>
|
||||
<div class="transaction-card__quantity"></div>
|
||||
<li class="completed-trade align-center">
|
||||
<div class="grid quantity-block">
|
||||
<div class="completed-trade__type capitalize"></div>
|
||||
<b class="completed-trade__quantity"></b>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label transaction-card__price-type">Unit price</span>
|
||||
<div class="transaction-card__price"></div>
|
||||
<div class="flex align-center info-block">
|
||||
<time class="completed-trade__time"></time>
|
||||
<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 class="grid">
|
||||
<span class="label transaction-card__price-type">Amount</span>
|
||||
<div class="transaction-card__total"></div>
|
||||
<div class="grid price-block">
|
||||
<span class="label">Unit price</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>
|
||||
<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>
|
||||
</template>
|
||||
<template id="market_transaction_template">
|
||||
<li class="list__item transaction-card align-center">
|
||||
<div class="transaction-card__quantity"></div>
|
||||
<div class="transaction-card__price"></div>
|
||||
<div class="transaction-card__total"></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 class="completed-trade align-center">
|
||||
<b class="completed-trade__quantity quantity-block"></b>
|
||||
<div class="flex align-center info-block">
|
||||
<time class="completed-trade__time"></time>
|
||||
<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 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>
|
||||
</template>
|
||||
<template id="market_order_list_template">
|
||||
@ -1145,12 +1157,13 @@
|
||||
history.replaceState(null, null, '#/exchange')
|
||||
}
|
||||
pagesData.currentPage = pageId
|
||||
if (!firstLoad)
|
||||
if (!firstLoad) {
|
||||
switch (pageId) {
|
||||
case 'exchange':
|
||||
if (!document.body.classList.contains('is-signed-in')) break;
|
||||
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 (getRef('listed_assets').querySelector('.listed-asset--active'))
|
||||
@ -1226,6 +1239,7 @@
|
||||
case 'wallet':
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
document.querySelectorAll('.mobile-page').forEach(elem => elem.classList.add('hide'))
|
||||
getRef(pageId).classList.remove('hide')
|
||||
@ -1529,14 +1543,14 @@
|
||||
const { buyer, seller, type, other, asset, quantity, unitValue, time } = transactionDetails
|
||||
const card = getRef('transaction_template').content.cloneNode(true).firstElementChild
|
||||
card.dataset.type = type
|
||||
card.querySelector('.transaction-card__type').textContent = type
|
||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.transaction-card__price').textContent = formatAmount(unitValue)
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.completed-trade__type').textContent = type
|
||||
card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
|
||||
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.seller = seller
|
||||
card.querySelector('.more-info').dataset.other = other
|
||||
card.querySelector('.more-info').dataset.time = time
|
||||
return card
|
||||
},
|
||||
marketOrderCard(orderDetails = {}) {
|
||||
@ -1557,10 +1571,10 @@
|
||||
marketTransactionCard(transactionDetails = {}) {
|
||||
const { buyer, seller, asset, quantity, unitValue, time } = transactionDetails
|
||||
const card = getRef('market_transaction_template').content.cloneNode(true).firstElementChild
|
||||
card.querySelector('.transaction-card__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.transaction-card__price').textContent = `₹${unitValue}`
|
||||
card.querySelector('.transaction-card__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.more-info').dataset.time = time
|
||||
card.querySelector('.completed-trade__quantity').textContent = `${quantity} ${asset}`
|
||||
card.querySelector('.completed-trade__time').textContent = getFormattedTime(time)
|
||||
card.querySelector('.completed-trade__price').textContent = `₹${unitValue}`
|
||||
card.querySelector('.completed-trade__total').textContent = formatAmount(parseFloat(unitValue * quantity), true)
|
||||
card.querySelector('.more-info').dataset.buyer = buyer
|
||||
card.querySelector('.more-info').dataset.seller = seller
|
||||
return card
|
||||
@ -1650,6 +1664,7 @@
|
||||
marketOrders() {
|
||||
const frag = document.createDocumentFragment()
|
||||
const ordersType = getRef('market_orders_category_selector').value
|
||||
getRef('market_trades').innerHTML = '';
|
||||
if (ordersType === 'open') {
|
||||
getRef('market_orders__title').textContent = 'Market-wide orders';
|
||||
showChild('market_orders_wrapper', 0)
|
||||
@ -1697,8 +1712,8 @@
|
||||
frag.append(render.marketTransactionCard(transactionDetails))
|
||||
})
|
||||
getRef('market_trades').innerHTML = '';
|
||||
const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
|
||||
getRef('market_trades').append(marketTransactionList)
|
||||
// const marketTransactionList = getRef('market_transaction_list_template').content.cloneNode(true)
|
||||
// getRef('market_trades').append(marketTransactionList)
|
||||
getRef('market_trades').append(frag)
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
@ -2147,8 +2162,13 @@
|
||||
} else {
|
||||
getRef('transaction__seller_wrapper').classList.add('hide')
|
||||
}
|
||||
getRef('transaction_time__label').textContent = target.dataset.pending === 'true' ? 'Placed on' : 'Completed on'
|
||||
getRef('transaction_time').textContent = getFormattedTime(target.dataset.time)
|
||||
if (target.dataset.time !== undefined) {
|
||||
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 => {
|
||||
@ -2487,7 +2507,6 @@
|
||||
// save login time
|
||||
localStorage.setItem(`${acc.floID}_last_login`, Date.now());
|
||||
getRef("login_form").classList.add('hide')
|
||||
getRef('user_popup_button').classList.remove('hide')
|
||||
accountDetails = acc
|
||||
console.debug(acc);
|
||||
//Element display
|
||||
|
||||
Loading…
Reference in New Issue
Block a user