minor UI fixes

This commit is contained in:
sairaj mote 2022-04-03 16:33:01 +05:30
parent 0be1579231
commit 317d1eb210
4 changed files with 11 additions and 38 deletions

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,10 +664,6 @@ 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;
@ -675,6 +671,7 @@ sm-checkbox {
} }
#asset_page { #asset_page {
display: grid;
height: 100%; height: 100%;
} }
@ -1038,20 +1035,9 @@ sm-checkbox {
display: none !important; display: none !important;
} }
#asset_page__nav {
padding: 1rem 1.5rem 1.5rem 1.5rem;
}
#login_form,
#trade_form,
#asset_list_wrapper,
#chart_header {
padding: 0 1.5rem;
}
#asset_page { #asset_page {
display: flex; grid-template-columns: minmax(0, 1fr);
flex-direction: column; grid-template-rows: auto minmax(0, 1fr);
} }
.listed-asset { .listed-asset {
@ -1144,7 +1130,6 @@ 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;

File diff suppressed because one or more lines are too long

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%);
} }
} }
@ -634,15 +634,13 @@ 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;
height: 100%; height: 100%;
} }
#asset_page { #asset_page {
display: grid;
height: 100%; height: 100%;
} }
#asset_page__nav { #asset_page__nav {
@ -963,18 +961,9 @@ 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;
}
#login_form,
#trade_form,
#asset_list_wrapper,
#chart_header {
padding: 0 1.5rem;
}
#asset_page { #asset_page {
display: flex; grid-template-columns: minmax(0, 1fr);
flex-direction: column; grid-template-rows: auto minmax(0, 1fr);
} }
.listed-asset { .listed-asset {
border-radius: 0; border-radius: 0;
@ -1055,7 +1044,6 @@ sm-checkbox {
#exchange { #exchange {
display: flex; display: flex;
width: 100%; width: 100%;
padding: 0 1.5rem;
} }
#exchange_wrapper { #exchange_wrapper {
display: grid; display: grid;

View File

@ -1223,7 +1223,7 @@
}) })
lineSeries.setData(data); lineSeries.setData(data);
new ResizeObserver(entries => { new ResizeObserver(entries => {
chartDimensions.height = entries[0].contentRect.height; chartDimensions.height = entries[0].contentRect.height - 10;
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'));
@ -1351,7 +1351,7 @@
const chartObserver = new IntersectionObserver(entries => { const chartObserver = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && chart) { if (entries[0].isIntersecting && chart) {
const { width, height } = entries[0].target.getBoundingClientRect() const { width, height } = entries[0].target.getBoundingClientRect()
chartDimensions.height = height; chartDimensions.height = height - 10;
chartDimensions.width = width; chartDimensions.width = width;
chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height }); chart.applyOptions({ width: chartDimensions.width, height: chartDimensions.height });
} }