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

Minor UI update

Browse Source
This commit is contained in:
sairaj mote 2022-05-03 19:45:35 +05:30
parent 79a23399db
commit 4ff4f4356e
4 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/css/main.css
View File

@ -543,7 +543,7 @@ sm-checkbox {
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
} }
.tooltip:hover .banner { .tooltip:hover .banner {
display: flex; display: block;
} }
.page-layout { .page-layout {

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

File diff suppressed because one or more lines are too long

2
docs/css/main.scss
View File

@ -518,7 +518,7 @@ sm-checkbox {
border: solid thin rgba(var(--text-color), 0.2); border: solid thin rgba(var(--text-color), 0.2);
} }
&:hover .banner { &:hover .banner {
display: flex; display: block;
} }
} }
.page-layout { .page-layout {

37
docs/index.html
View File

@ -134,7 +134,7 @@
</nav> </nav>
<div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile"> <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_header" class="flex align-center space-between">
<div id="chart_asset"></div> <H4 id="chart_asset"></H4>
<strip-select id="price_duration_selector"> <strip-select id="price_duration_selector">
<strip-option value="hour" title="1 Hour price interval" selected>Hour <strip-option value="hour" title="1 Hour price interval" selected>Hour
</strip-option> </strip-option>
@ -488,15 +488,20 @@
<a href="#/help" class="main_navbar__item user-content hide interact"> <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" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <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> </svg>
<div class="item__title">Help</div> <div class="item__title">Help</div>
</a> </a>
</nav> </nav>
</article> </article>
* show all trades are happening at current price
* show max price allow
* remove graph price
*
<sm-popup id="confirm_trade_popup"> <sm-popup id="confirm_trade_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
<button class="popup__header__close" onclick="hidePopup()"> <button class="popup__header__close" onclick="hidePopup()">
@ -706,7 +711,7 @@
<div class="order-card__quantity"></div> <div class="order-card__quantity"></div>
</div> </div>
<div class="grid"> <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 class="order-card__price"></div>
</div> </div>
<time class="order-card__time"></time> <time class="order-card__time"></time>
@ -727,7 +732,7 @@
<div class="transaction-card__quantity"></div> <div class="transaction-card__quantity"></div>
</div> </div>
<div class="grid"> <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 class="transaction-card__price"></div>
</div> </div>
<div class="grid"> <div class="grid">
@ -750,7 +755,7 @@
<div class="transaction-card__quantity"></div> <div class="transaction-card__quantity"></div>
</div> </div>
<div class="grid"> <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 class="transaction-card__price"></div>
</div> </div>
<div class="grid"> <div class="grid">
@ -793,7 +798,7 @@
<template id="market_transaction_list_template"> <template id="market_transaction_list_template">
<h4 class="grid list__header"> <h4 class="grid list__header">
<div>Quantity</div> <div>Quantity</div>
<div>Unit price</div> <div>Ordered at</div>
<div>Total</div> <div>Total</div>
<div></div> <div></div>
</h4> </h4>
@ -1115,7 +1120,7 @@
if (getRef('listed_assets').querySelector('.listed-asset--active')) if (getRef('listed_assets').querySelector('.listed-asset--active'))
getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('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('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) showSuggestedPrice(params.asset)
getRef('traded_asset').textContent = `Trade ${params.asset}` getRef('traded_asset').textContent = `Trade ${params.asset}`
getRef('trade_button').textContent = `${tradeType} ${params.asset}` getRef('trade_button').textContent = `${tradeType} ${params.asset}`
@ -1385,13 +1390,13 @@
const tradeType = getRef('trade_type_selector').value const tradeType = getRef('trade_type_selector').value
getRef('get_price').innerHTML = ` getRef('get_price').innerHTML = `
<div class="grid"> <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> <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">
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> </p>
</div> </div>
` `
@ -1492,18 +1497,6 @@
chartDimensions.width = entries[0].contentRect.width; chartDimensions.width = entries[0].contentRect.width;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height }); chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
}).observe(getRef('price_chart_wrapper')); }).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() { userOrders() {