UI fixes
This commit is contained in:
sairaj mote
parent
5170870c82
commit
dbf71f2506
@ -613,9 +613,9 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#pages_container > * {
|
||||
padding: 0 1.5rem;
|
||||
width: min(42rem, 100%);
|
||||
}
|
||||
|
||||
@ -664,6 +664,10 @@ sm-checkbox {
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
#exchange {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#exchange_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -673,10 +677,11 @@ sm-checkbox {
|
||||
#asset_page {
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page nav {
|
||||
|
||||
#asset_page__nav {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#asset_page nav .icon-only {
|
||||
#asset_page__nav .icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
@ -1033,6 +1038,16 @@ sm-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#asset_page__nav {
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
#trade_form,
|
||||
#asset_list_wrapper,
|
||||
#chart_header {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1043,7 +1058,7 @@ sm-checkbox {
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#price_chart_wrapper {
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@ -1128,6 +1143,7 @@ sm-checkbox {
|
||||
.is-signed-in #exchange {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.is-signed-in #exchange_wrapper {
|
||||
display: grid;
|
||||
@ -1182,7 +1198,8 @@ sm-checkbox {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
#asset_page nav {
|
||||
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
|
||||
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
@ -588,8 +588,8 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
& > * {
|
||||
padding: 0 1.5rem;
|
||||
width: min(42rem, 100%);
|
||||
}
|
||||
}
|
||||
@ -633,7 +633,9 @@ sm-checkbox {
|
||||
font-weight: 500;
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
#exchange {
|
||||
padding: 0;
|
||||
}
|
||||
#exchange_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -641,12 +643,12 @@ sm-checkbox {
|
||||
}
|
||||
#asset_page {
|
||||
height: 100%;
|
||||
nav {
|
||||
}
|
||||
#asset_page__nav {
|
||||
padding: 1rem 0;
|
||||
.icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
@ -960,6 +962,14 @@ sm-checkbox {
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
#asset_page__nav {
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
#trade_form,
|
||||
#asset_list_wrapper,
|
||||
#chart_header {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#asset_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -968,7 +978,7 @@ sm-checkbox {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#price_chart_wrapper {
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@ -1043,6 +1053,7 @@ sm-checkbox {
|
||||
#exchange {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#exchange_wrapper {
|
||||
display: grid;
|
||||
@ -1096,9 +1107,9 @@ sm-checkbox {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
|
||||
@ -99,7 +99,7 @@
|
||||
<ul id="listed_assets" class="user-content hide"></ul>
|
||||
</div>
|
||||
<div id="asset_page" class="hide-on-mobile">
|
||||
<nav class="flex align-center space-between hide-on-desktop">
|
||||
<nav id="asset_page__nav" class="flex align-center space-between hide-on-desktop">
|
||||
<a href="#/exchange" class="button icon-only">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
@ -112,8 +112,8 @@
|
||||
<strip-option value="chart">Chart</strip-option>
|
||||
</strip-select>
|
||||
</nav>
|
||||
<div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide-on-mobile">
|
||||
<div class="flex align-center space-between">
|
||||
<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>
|
||||
<strip-select id="price_duration_selector">
|
||||
<strip-option value="hour" title="1 Hour price interval" selected>Hour
|
||||
@ -121,7 +121,7 @@
|
||||
<strip-option value="day" title="1 Day price interval">Day</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<div class="flex" style="position: relative; flex: 1">
|
||||
<div id="price_chart_wrapper" class="flex" style="position: relative; flex: 1">
|
||||
<div id="price_history_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -947,6 +947,7 @@
|
||||
});
|
||||
lineSeries = chart.addLineSeries();
|
||||
setChartTheme()
|
||||
chartObserver.observe(getRef('price_chart_wrapper'))
|
||||
}
|
||||
render.chart(params.asset)
|
||||
} else {
|
||||
@ -1129,6 +1130,11 @@
|
||||
function formatAmount(amount) {
|
||||
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
|
||||
}
|
||||
|
||||
const chartDimensions = {
|
||||
height: 0,
|
||||
width: 0
|
||||
}
|
||||
const render = {
|
||||
listedAsset(name, rate) {
|
||||
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
|
||||
@ -1215,19 +1221,17 @@
|
||||
}
|
||||
})
|
||||
lineSeries.setData(data);
|
||||
let width
|
||||
let height
|
||||
new ResizeObserver(entries => {
|
||||
height = entries[0].contentRect.height;
|
||||
width = entries[0].contentRect.width;
|
||||
chart.applyOptions({ width, height });
|
||||
}).observe(getRef('price_history_chart').parentNode);
|
||||
chartDimensions.height = entries[0].contentRect.height;
|
||||
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 > width || param.point.y < 0 || param.point.y > height) {
|
||||
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);
|
||||
@ -1343,6 +1347,15 @@
|
||||
getRef(id).querySelector('sm-spinner')?.remove()
|
||||
}
|
||||
|
||||
const chartObserver = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting && chart) {
|
||||
const { width, height } = entries[0].target.getBoundingClientRect()
|
||||
chartDimensions.height = height;
|
||||
chartDimensions.width = width;
|
||||
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
|
||||
}
|
||||
})
|
||||
|
||||
let chart
|
||||
let lineSeries
|
||||
function getChartTheme() {
|
||||
@ -1386,11 +1399,11 @@
|
||||
|
||||
getRef('trading_view_switcher').addEventListener('change', e => {
|
||||
if (e.target.value === 'trade') {
|
||||
getRef('price_chart_wrapper').classList.add('hide-on-mobile')
|
||||
getRef('price_chart_container').classList.add('hide-on-mobile')
|
||||
getRef('trade_form').classList.remove('hide-on-mobile')
|
||||
} else {
|
||||
getRef('trade_form').classList.add('hide-on-mobile')
|
||||
getRef('price_chart_wrapper').classList.remove('hide-on-mobile')
|
||||
getRef('price_chart_container').classList.remove('hide-on-mobile')
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user