New layout and UX for trading view on mobile
This commit is contained in:
sairaj mote
parent
e8943f73c0
commit
7f8334caa5
@ -682,9 +682,9 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#pages_container > * {
|
||||
padding: 0 1.5rem;
|
||||
min-width: min(26rem, 100%);
|
||||
}
|
||||
|
||||
@ -781,21 +781,12 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#asset_page__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#asset_page__nav .icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
}
|
||||
@ -1280,11 +1271,61 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
|
||||
#asset_list_wrapper {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#exchange {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#chart_header {
|
||||
padding: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
#trade_panel_backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(var(--text-color), 0.16);
|
||||
-webkit-backdrop-filter: blur(0.5rem);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#show_trade_panel {
|
||||
position: absolute;
|
||||
border-radius: 2rem;
|
||||
bottom: 0;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: auto;
|
||||
width: auto;
|
||||
z-index: 10;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1365,6 +1406,10 @@ sm-checkbox {
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
}
|
||||
#pages_container > * {
|
||||
margin: 0 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.is-signed-in #exchange {
|
||||
display: flex;
|
||||
@ -1399,7 +1444,7 @@ sm-checkbox {
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
height: 50%;
|
||||
height: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
@ -1449,10 +1494,6 @@ sm-checkbox {
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
#portfolio {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
|
||||
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
@ -643,8 +643,8 @@ sm-checkbox {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
padding: 0 1.5rem;
|
||||
& > * {
|
||||
padding: 0 1.5rem;
|
||||
min-width: min(26rem, 100%);
|
||||
}
|
||||
}
|
||||
@ -738,19 +738,11 @@ sm-checkbox {
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page__nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
.icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
}
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
&::part(form) {
|
||||
@ -765,7 +757,6 @@ sm-checkbox {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(46rem, 100%);
|
||||
@ -1139,10 +1130,53 @@ sm-checkbox {
|
||||
transform: translateY(50%) scale(1.2);
|
||||
}
|
||||
}
|
||||
#asset_list_wrapper {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.listed-asset {
|
||||
border-radius: 0;
|
||||
border-bottom: solid thin rgba(var(--text-color), 0.1);
|
||||
}
|
||||
#exchange {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#chart_header {
|
||||
padding: 1rem 1.5rem 0.5rem 1.5rem;
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
#trade_panel_backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background-color: rgba(var(--text-color), 0.16);
|
||||
backdrop-filter: blur(0.5rem);
|
||||
z-index: 3;
|
||||
}
|
||||
#show_trade_panel {
|
||||
position: absolute;
|
||||
border-radius: 2rem;
|
||||
bottom: 0;
|
||||
align-self: center;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 5;
|
||||
}
|
||||
#trade_form {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-top: auto;
|
||||
width: auto;
|
||||
z-index: 10;
|
||||
padding: 1.5rem 1.5rem 0 1.5rem;
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1210,6 +1244,10 @@ sm-checkbox {
|
||||
}
|
||||
#pages_container {
|
||||
grid-area: pages;
|
||||
& > * {
|
||||
margin: 0 1.5rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
}
|
||||
.is-signed-in {
|
||||
#exchange {
|
||||
@ -1241,7 +1279,7 @@ sm-checkbox {
|
||||
position: absolute;
|
||||
width: 0.25rem;
|
||||
border-radius: 0 0.2rem 0.2rem 0;
|
||||
height: 50%;
|
||||
height: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
@ -1292,9 +1330,6 @@ sm-checkbox {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
#asset_page__nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
#portfolio {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
|
||||
@ -120,22 +120,18 @@
|
||||
<ul id="listed_assets" class="user-content hide"></ul>
|
||||
</div>
|
||||
<div id="asset_page" class="hide-on-mobile">
|
||||
<nav id="asset_page__nav" class="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">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</a>
|
||||
<strip-select id="trading_view_switcher">
|
||||
<strip-option value="trade" selected>Trade</strip-option>
|
||||
<strip-option value="chart">Chart</strip-option>
|
||||
</strip-select>
|
||||
</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">
|
||||
<div id="chart_header" class="flex align-center space-between">
|
||||
<H4 id="chart_asset"></H4>
|
||||
<div class="flex align-center">
|
||||
<a href="#/exchange" class="button icon-only hide-on-desktop flex align-center">
|
||||
<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="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</a>
|
||||
<H4 id="chart_asset"></H4>
|
||||
</div>
|
||||
<strip-select id="price_duration_selector">
|
||||
<strip-option value="hour" title="1 Hour price interval" selected>Hour
|
||||
</strip-option>
|
||||
@ -146,7 +142,16 @@
|
||||
<div id="price_history_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-form id="trade_form">
|
||||
<sm-form id="trade_form" class="hide-on-mobile">
|
||||
<button class="popup__header__close hide-on-desktop" style="margin-right: auto;"
|
||||
onclick="hideTradePanel()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
|
||||
height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="flex space-between align-center">
|
||||
<h4 id="traded_asset">Trade FLO</h4>
|
||||
<strip-select id="trade_type_selector" class="tab">
|
||||
@ -194,6 +199,9 @@
|
||||
</sm-button>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div id="trade_panel_backdrop" onclick="hideTradePanel()" class="hide-on-mobile"></div>
|
||||
<button id="show_trade_panel" class="button button--primary hide-on-desktop cta"
|
||||
onclick="showTradePanel()">Buy / Sell</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -1778,16 +1786,44 @@
|
||||
}
|
||||
|
||||
document.addEventListener('themechange', setChartTheme)
|
||||
|
||||
getRef('trading_view_switcher').addEventListener('change', e => {
|
||||
if (e.target.value === 'trade') {
|
||||
getRef('price_chart_container').classList.add('hide-on-mobile')
|
||||
getRef('trade_form').classList.remove('hide-on-mobile')
|
||||
} else {
|
||||
function showTradePanel() {
|
||||
getRef('trade_form').classList.remove('hide-on-mobile')
|
||||
getRef('trade_form').animate([
|
||||
{ transform: 'translateY(100%)' },
|
||||
{ transform: 'translateY(0)' },
|
||||
], {
|
||||
duration: 150,
|
||||
easing: 'ease'
|
||||
})
|
||||
getRef('trade_panel_backdrop').classList.remove('hide-on-mobile')
|
||||
getRef('trade_panel_backdrop').animate([
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1 },
|
||||
], {
|
||||
duration: 150,
|
||||
easing: 'ease'
|
||||
})
|
||||
}
|
||||
function hideTradePanel() {
|
||||
getRef('trade_form').animate([
|
||||
{ transform: 'translateY(0)' },
|
||||
{ transform: 'translateY(100%)' },
|
||||
], {
|
||||
duration: 150,
|
||||
easing: 'ease'
|
||||
}).onfinish = () => {
|
||||
getRef('trade_form').classList.add('hide-on-mobile')
|
||||
getRef('price_chart_container').classList.remove('hide-on-mobile')
|
||||
}
|
||||
})
|
||||
getRef('trade_panel_backdrop').animate([
|
||||
{ opacity: 1 },
|
||||
{ opacity: 0 },
|
||||
], {
|
||||
duration: 150,
|
||||
easing: 'ease'
|
||||
}).onfinish = () => {
|
||||
getRef('trade_panel_backdrop').classList.add('hide-on-mobile')
|
||||
}
|
||||
}
|
||||
|
||||
function updateTooltip(asset, tradeType) {
|
||||
getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user