Minor UI update
This commit is contained in:
parent
79a23399db
commit
4ff4f4356e
@ -543,7 +543,7 @@ sm-checkbox {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.tooltip:hover .banner {
|
||||
display: flex;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page-layout {
|
||||
|
||||
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
@ -518,7 +518,7 @@ sm-checkbox {
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
&:hover .banner {
|
||||
display: flex;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.page-layout {
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
</nav>
|
||||
<div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile">
|
||||
<div id="chart_header" class="flex align-center space-between">
|
||||
<div id="chart_asset"></div>
|
||||
<H4 id="chart_asset"></H4>
|
||||
<strip-select id="price_duration_selector">
|
||||
<strip-option value="hour" title="1 Hour price interval" selected>Hour
|
||||
</strip-option>
|
||||
@ -488,15 +488,20 @@
|
||||
<a href="#/help" class="main_navbar__item user-content hide interact">
|
||||
<svg class="icon" 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 d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
|
||||
d="M11 18h2v-2h-2v2zm1-16C6.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 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" />
|
||||
</svg>
|
||||
<div class="item__title">Help</div>
|
||||
</a>
|
||||
</nav>
|
||||
</article>
|
||||
|
||||
* show all trades are happening at current price
|
||||
* show max price allow
|
||||
* remove graph price
|
||||
*
|
||||
|
||||
<sm-popup id="confirm_trade_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<button class="popup__header__close" onclick="hidePopup()">
|
||||
@ -706,7 +711,7 @@
|
||||
<div class="order-card__quantity"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label order-card__price-type">Unit price</span>
|
||||
<span class="label order-card__price-type">Ordered at</span>
|
||||
<div class="order-card__price"></div>
|
||||
</div>
|
||||
<time class="order-card__time"></time>
|
||||
@ -727,7 +732,7 @@
|
||||
<div class="transaction-card__quantity"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label transaction-card__price-type">Unit price</span>
|
||||
<span class="label transaction-card__price-type">Ordered at</span>
|
||||
<div class="transaction-card__price"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
@ -750,7 +755,7 @@
|
||||
<div class="transaction-card__quantity"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label transaction-card__price-type">Unit price</span>
|
||||
<span class="label transaction-card__price-type">Ordered at</span>
|
||||
<div class="transaction-card__price"></div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
@ -793,7 +798,7 @@
|
||||
<template id="market_transaction_list_template">
|
||||
<h4 class="grid list__header">
|
||||
<div>Quantity</div>
|
||||
<div>Unit price</div>
|
||||
<div>Ordered at</div>
|
||||
<div>Total</div>
|
||||
<div></div>
|
||||
</h4>
|
||||
@ -1115,7 +1120,7 @@
|
||||
if (getRef('listed_assets').querySelector('.listed-asset--active'))
|
||||
getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
|
||||
getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
|
||||
getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(floGlobals.exchangeRates[params.asset])}</p>`
|
||||
getRef('chart_asset').textContent = `${params.asset}/INR`
|
||||
showSuggestedPrice(params.asset)
|
||||
getRef('traded_asset').textContent = `Trade ${params.asset}`
|
||||
getRef('trade_button').textContent = `${tradeType} ${params.asset}`
|
||||
@ -1385,13 +1390,13 @@
|
||||
const tradeType = getRef('trade_type_selector').value
|
||||
getRef('get_price').innerHTML = `
|
||||
<div class="grid">
|
||||
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Buy upto' : 'Sell till'}</div>
|
||||
<div style="font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem;">${tradeType === 'buy' ? 'Buy order valid upto' : 'Sell order valid until'}</div>
|
||||
<h3>${formatAmount(getSuggestedPrice(asset))}</h3>
|
||||
</div>
|
||||
<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>
|
||||
<p class="banner">
|
||||
This is the ${tradeType === 'buy' ? 'Highest price upto' : 'Lowest price until'} which your order will be considered valid. System will always try to match your order with the best price.
|
||||
This is the ${tradeType === 'buy' ? `<b>Highest price</b> upto` : `<b>Lowest price</b> until`} which your order will be considered valid. System will always try to match your order with the best price.
|
||||
</p>
|
||||
</div>
|
||||
`
|
||||
@ -1492,18 +1497,6 @@
|
||||
chartDimensions.width = entries[0].contentRect.width;
|
||||
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
|
||||
}).observe(getRef('price_chart_wrapper'));
|
||||
function setLastBarText() {
|
||||
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
|
||||
}
|
||||
setLastBarText();
|
||||
chart.subscribeCrosshairMove(function (param) {
|
||||
if (param === undefined || param.time === undefined || param.point.x < 0 || param.point.x > chartDimensions.width || param.point.y < 0 || param.point.y > chartDimensions.height) {
|
||||
setLastBarText();
|
||||
} else {
|
||||
const price = param.seriesPrices.get(lineSeries);
|
||||
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(price)}</p>`;
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
userOrders() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user