minor UI fixes

This commit is contained in:
sairaj mote 2022-05-26 17:52:59 +05:30
parent fdc93ae18a
commit b5c20be089
5 changed files with 31 additions and 7 deletions

View File

@ -231,7 +231,7 @@ ul {
flex-wrap: wrap; flex-wrap: wrap;
} }
.direction-column { .flex-direction-column {
flex-direction: column; flex-direction: column;
} }
@ -690,12 +690,15 @@ sm-checkbox {
#pages_container { #pages_container {
display: flex; display: flex;
flex-direction: column;
flex: 1; flex: 1;
width: 100%; width: 100%;
justify-content: center; height: 100%;
align-items: center;
overflow-y: auto; overflow-y: auto;
} }
#pages_container > * { #pages_container > * {
flex: 1;
padding: 0 1.5rem; padding: 0 1.5rem;
min-width: min(26rem, 100%); min-width: min(26rem, 100%);
} }
@ -833,6 +836,12 @@ sm-checkbox {
.orders_section__header { .orders_section__header {
min-height: 2.8rem; min-height: 2.8rem;
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: rgba(var(--background-color), 1);
z-index: 2;
transition: background-color 0.3s;
} }
.list__item { .list__item {
@ -1577,6 +1586,10 @@ sm-checkbox {
grid-template-columns: auto 1fr 1fr 1fr auto; grid-template-columns: auto 1fr 1fr 1fr auto;
grid-template-areas: "checkbox quantity price amount time cancel"; grid-template-areas: "checkbox quantity price amount time cancel";
} }
.orders_section__header {
background-color: rgba(var(--foreground-color), 1);
}
} }
@media screen and (max-width: 80rem) and (min-width: 40rem) { @media screen and (max-width: 80rem) and (min-width: 40rem) {
.main_navbar__item { .main_navbar__item {

File diff suppressed because one or more lines are too long

View File

@ -214,7 +214,7 @@ ul {
.flex-wrap { .flex-wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.direction-column { .flex-direction-column {
flex-direction: column; flex-direction: column;
} }
@ -645,11 +645,14 @@ sm-checkbox {
} }
#pages_container { #pages_container {
display: flex; display: flex;
flex-direction: column;
flex: 1; flex: 1;
width: 100%; width: 100%;
justify-content: center; height: 100%;
align-items: center;
overflow-y: auto; overflow-y: auto;
& > * { & > * {
flex: 1;
padding: 0 1.5rem; padding: 0 1.5rem;
min-width: min(26rem, 100%); min-width: min(26rem, 100%);
} }
@ -779,6 +782,11 @@ sm-checkbox {
} }
.orders_section__header { .orders_section__header {
min-height: 2.8rem; min-height: 2.8rem;
position: sticky;
top: 0;
background-color: rgba(var(--background-color), 1);
z-index: 2;
transition: background-color 0.3s;
} }
.list__item { .list__item {
@ -1408,6 +1416,9 @@ sm-checkbox {
grid-template-columns: auto 1fr 1fr 1fr auto; grid-template-columns: auto 1fr 1fr 1fr auto;
grid-template-areas: "checkbox quantity price amount time cancel"; grid-template-areas: "checkbox quantity price amount time cancel";
} }
.orders_section__header {
background-color: rgba(var(--foreground-color), 1);
}
} }
@media screen and (max-width: 80rem) and (min-width: 40rem) { @media screen and (max-width: 80rem) and (min-width: 40rem) {
.main_navbar__item { .main_navbar__item {

View File

@ -130,7 +130,7 @@
</a> </a>
</nav> </nav>
<div id="asset_page_wrapper"> <div id="asset_page_wrapper">
<div id="price_chart_container" class="flex direction-column gap-0-5 hide-on-mobile"> <div id="price_chart_container" class="flex 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">
<H4 id="chart_asset"></H4> <H4 id="chart_asset"></H4>
<strip-select id="price_duration_selector"> <strip-select id="price_duration_selector">

View File

@ -647,7 +647,7 @@ customElements.define('sm-input',
} }
else if (name === 'type') { else if (name === 'type') {
if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
this.input.setAttribute('inputmode', 'numeric'); this.input.setAttribute('inputmode', 'decimal');
} }
} }
else if (name === 'helper-text') { else if (name === 'helper-text') {