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

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-04-03 16:02:11 +05:30
parent 5170870c82
commit dbf71f2506
4 changed files with 71 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/css/main.css
View File

@ -613,9 +613,9 @@ sm-checkbox {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
overflow-y: auto; overflow-y: auto;
padding: 0 1.5rem;
} }
#pages_container > * { #pages_container > * {
padding: 0 1.5rem;
width: min(42rem, 100%); width: min(42rem, 100%);
} }
@ -664,6 +664,10 @@ sm-checkbox {
min-width: 8ch; min-width: 8ch;
} }
#exchange {
padding: 0;
}
#exchange_wrapper { #exchange_wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -673,10 +677,11 @@ sm-checkbox {
#asset_page { #asset_page {
height: 100%; height: 100%;
} }
#asset_page nav {
#asset_page__nav {
padding: 1rem 0; padding: 1rem 0;
} }
#asset_page nav .icon-only { #asset_page__nav .icon-only {
margin-left: -0.7rem; margin-left: -0.7rem;
} }
@ -1033,6 +1038,16 @@ sm-checkbox {
display: none !important; 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 { #asset_page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1043,7 +1058,7 @@ sm-checkbox {
border-bottom: solid thin rgba(var(--text-color), 0.1); border-bottom: solid thin rgba(var(--text-color), 0.1);
} }
#price_chart_wrapper { #price_chart_container {
flex: 1; flex: 1;
} }
} }
@ -1128,6 +1143,7 @@ sm-checkbox {
.is-signed-in #exchange { .is-signed-in #exchange {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 1.5rem;
} }
.is-signed-in #exchange_wrapper { .is-signed-in #exchange_wrapper {
display: grid; display: grid;
@ -1182,7 +1198,8 @@ sm-checkbox {
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 20rem; grid-template-columns: minmax(0, 1fr) 20rem;
} }
#asset_page nav {
#asset_page__nav {
grid-column: 1/-1; grid-column: 1/-1;
} }
} }

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

File diff suppressed because one or more lines are too long

25
docs/css/main.scss
View File

@ -588,8 +588,8 @@ sm-checkbox {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
overflow-y: auto; overflow-y: auto;
padding: 0 1.5rem;
& > * { & > * {
padding: 0 1.5rem;
width: min(42rem, 100%); width: min(42rem, 100%);
} }
} }
@ -633,7 +633,9 @@ sm-checkbox {
font-weight: 500; font-weight: 500;
min-width: 8ch; min-width: 8ch;
} }
#exchange {
padding: 0;
}
#exchange_wrapper { #exchange_wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -641,13 +643,13 @@ sm-checkbox {
} }
#asset_page { #asset_page {
height: 100%; height: 100%;
nav { }
#asset_page__nav {
padding: 1rem 0; padding: 1rem 0;
.icon-only { .icon-only {
margin-left: -0.7rem; margin-left: -0.7rem;
} }
} }
}
#trade_form { #trade_form {
height: 100%; height: 100%;
&::part(form) { &::part(form) {
@ -960,6 +962,14 @@ sm-checkbox {
.hide-on-mobile { .hide-on-mobile {
display: none !important; 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 { #asset_page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -968,7 +978,7 @@ sm-checkbox {
border-radius: 0; border-radius: 0;
border-bottom: solid thin rgba(var(--text-color), 0.1); border-bottom: solid thin rgba(var(--text-color), 0.1);
} }
#price_chart_wrapper { #price_chart_container {
flex: 1; flex: 1;
} }
} }
@ -1043,6 +1053,7 @@ sm-checkbox {
#exchange { #exchange {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 1.5rem;
} }
#exchange_wrapper { #exchange_wrapper {
display: grid; display: grid;
@ -1096,9 +1107,9 @@ sm-checkbox {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 20rem; 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) { @media screen and (min-width: 72rem) {

39
docs/index.html
View File

@ -99,7 +99,7 @@
<ul id="listed_assets" class="user-content hide"></ul> <ul id="listed_assets" class="user-content hide"></ul>
</div> </div>
<div id="asset_page" class="hide-on-mobile"> <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"> <a href="#/exchange" class="button icon-only">
<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">
@ -112,8 +112,8 @@
<strip-option value="chart">Chart</strip-option> <strip-option value="chart">Chart</strip-option>
</strip-select> </strip-select>
</nav> </nav>
<div id="price_chart_wrapper" 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 class="flex align-center space-between"> <div id="chart_header" class="flex align-center space-between">
<div id="chart_asset"></div> <div id="chart_asset"></div>
<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
@ -121,7 +121,7 @@
<strip-option value="day" title="1 Day price interval">Day</strip-option> <strip-option value="day" title="1 Day price interval">Day</strip-option>
</strip-select> </strip-select>
</div> </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 id="price_history_chart"></div>
</div> </div>
</div> </div>
@ -947,6 +947,7 @@
}); });
lineSeries = chart.addLineSeries(); lineSeries = chart.addLineSeries();
setChartTheme() setChartTheme()
chartObserver.observe(getRef('price_chart_wrapper'))
} }
render.chart(params.asset) render.chart(params.asset)
} else { } else {
@ -1129,6 +1130,11 @@
function formatAmount(amount) { function formatAmount(amount) {
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 }) return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
} }
const chartDimensions = {
height: 0,
width: 0
}
const render = { const render = {
listedAsset(name, rate) { listedAsset(name, rate) {
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
@ -1215,19 +1221,17 @@
} }
}) })
lineSeries.setData(data); lineSeries.setData(data);
let width
let height
new ResizeObserver(entries => { new ResizeObserver(entries => {
height = entries[0].contentRect.height; chartDimensions.height = entries[0].contentRect.height;
width = entries[0].contentRect.width; chartDimensions.width = entries[0].contentRect.width;
chart.applyOptions({ width, height }); chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
}).observe(getRef('price_history_chart').parentNode); }).observe(getRef('price_chart_wrapper'));
function setLastBarText() { function setLastBarText() {
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`; getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(data[data.length - 1].value)}</p>`;
} }
setLastBarText(); setLastBarText();
chart.subscribeCrosshairMove(function (param) { 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(); setLastBarText();
} else { } else {
const price = param.seriesPrices.get(lineSeries); const price = param.seriesPrices.get(lineSeries);
@ -1343,6 +1347,15 @@
getRef(id).querySelector('sm-spinner')?.remove() 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 chart
let lineSeries let lineSeries
function getChartTheme() { function getChartTheme() {
@ -1386,11 +1399,11 @@
getRef('trading_view_switcher').addEventListener('change', e => { getRef('trading_view_switcher').addEventListener('change', e => {
if (e.target.value === 'trade') { 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') getRef('trade_form').classList.remove('hide-on-mobile')
} else { } else {
getRef('trade_form').classList.add('hide-on-mobile') 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')
} }
}) })