Making exchange mobile friendly
This commit is contained in:
sairaj mote
parent
883a698248
commit
0df9290e15
@ -332,11 +332,11 @@ ul {
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) + .empty-state {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@ -664,6 +664,37 @@ sm-checkbox {
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
#exchange_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page nav {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
#asset_page nav .icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
}
|
||||
#trade_form::part(form) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
#trade_form > * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#trade_form > :last-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(42rem, 100%);
|
||||
@ -675,14 +706,6 @@ sm-checkbox {
|
||||
width: 1.2rem;
|
||||
}
|
||||
|
||||
#orders_section__header--primary sm-tab-header {
|
||||
--gap: 1.5rem;
|
||||
}
|
||||
#orders_section__header--primary sm-tab {
|
||||
font-size: 0.9rem;
|
||||
--padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.list__item {
|
||||
padding: 0.5rem 0;
|
||||
display: grid;
|
||||
@ -990,7 +1013,7 @@ sm-checkbox {
|
||||
}
|
||||
@media screen and (max-width: 40rem) and (any-hover: none) {
|
||||
.cancel-order span {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
@ -1007,7 +1030,16 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#price_chart_wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
@ -1044,7 +1076,7 @@ sm-checkbox {
|
||||
}
|
||||
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#home {
|
||||
@ -1132,22 +1164,27 @@ sm-checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
.main_navbar__item .item__title {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 64rem) {
|
||||
#home {
|
||||
grid-template-columns: 10rem 1fr;
|
||||
}
|
||||
|
||||
#asset_page {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
}
|
||||
#asset_page nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
.is-signed-in #exchange_wrapper {
|
||||
grid-template-columns: 16rem minmax(0, 1fr) 20rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 120rem) {
|
||||
.page-layout {
|
||||
|
||||
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
@ -325,11 +325,11 @@ ul {
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) + .empty-state {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@ -633,6 +633,36 @@ sm-checkbox {
|
||||
font-weight: 500;
|
||||
min-width: 8ch;
|
||||
}
|
||||
|
||||
#exchange_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#asset_page {
|
||||
height: 100%;
|
||||
nav {
|
||||
padding: 1rem 0;
|
||||
.icon-only {
|
||||
margin-left: -0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#trade_form {
|
||||
height: 100%;
|
||||
&::part(form) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
& > * {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
& > :last-child {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#my_orders,
|
||||
#market {
|
||||
width: min(42rem, 100%);
|
||||
@ -642,15 +672,6 @@ sm-checkbox {
|
||||
width: 1.2rem;
|
||||
}
|
||||
}
|
||||
#orders_section__header--primary {
|
||||
sm-tab-header {
|
||||
--gap: 1.5rem;
|
||||
}
|
||||
sm-tab {
|
||||
font-size: 0.9rem;
|
||||
--padding: 0.8rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list__item {
|
||||
padding: 0.5rem 0;
|
||||
@ -919,7 +940,7 @@ sm-checkbox {
|
||||
@media screen and (max-width: 40rem) and (any-hover: none) {
|
||||
.cancel-order {
|
||||
span {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -937,7 +958,14 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
#asset_page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#price_chart_wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
@ -969,7 +997,7 @@ sm-checkbox {
|
||||
grid-template-columns: 1fr 90vw 1fr;
|
||||
}
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
#home {
|
||||
display: grid;
|
||||
@ -1052,7 +1080,7 @@ sm-checkbox {
|
||||
margin-right: 0;
|
||||
}
|
||||
.item__title {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1060,16 +1088,19 @@ sm-checkbox {
|
||||
#home {
|
||||
grid-template-columns: 10rem 1fr;
|
||||
}
|
||||
#asset_page {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr) 20rem;
|
||||
nav {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 72rem) {
|
||||
.page-layout {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
.is-signed-in {
|
||||
#exchange_wrapper {
|
||||
grid-template-columns: 16rem minmax(0, 1fr) 20rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 120rem) {
|
||||
.page-layout {
|
||||
|
||||
150
docs/index.html
150
docs/index.html
@ -93,62 +93,73 @@
|
||||
</div>
|
||||
<sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
|
||||
</sm-form>
|
||||
<section id="exchange_wrapper">
|
||||
<div id="asset_list_wrapper" class="grid gap-1 align-start hide user-content">
|
||||
<section id="exchange_wrapper" class="hide user-content">
|
||||
<div id="asset_list_wrapper" class="grid gap-1 align-start">
|
||||
<ul id="listed_assets" class="user-content hide"></ul>
|
||||
</div>
|
||||
<div id="price_chart_wrapper" class="flex direction-column gap-0-5 hide user-content">
|
||||
<div class="flex align-center space-between" style="z-index: 5;">
|
||||
<div id="chart_asset"></div>
|
||||
<strip-select>
|
||||
<strip-option value="day" selected>D</strip-option>
|
||||
<strip-option value="week">W</strip-option>
|
||||
<strip-option value="month">M</strip-option>
|
||||
<strip-option value="year">Y</strip-option>
|
||||
<strip-option value="all-time">ALL</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<div class="flex" style="position: relative;">
|
||||
<div id="price_history_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-form id="trade_form" class="user-content hide hide-on-mobile">
|
||||
<div class="flex space-between align-center">
|
||||
<a href="#/exchange" class="button icon-only hide-on-desktop">
|
||||
<div id="asset_page" class="hide-on-mobile">
|
||||
<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">
|
||||
<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_wrapper" class="flex direction-column gap-0-5 hide-on-mobile">
|
||||
<div 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>H</strip-option>
|
||||
<strip-option value="day" title="1 Day price interval">D</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<div class="flex" style="position: relative; flex: 1">
|
||||
<div id="price_history_chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
<sm-form id="trade_form">
|
||||
<div class="flex space-between align-center">
|
||||
<h4 id="traded_asset">Trade FLO</h4>
|
||||
<strip-select id="trade_type_selector" class="tab">
|
||||
<strip-option value="buy" selected>Buy</strip-option>
|
||||
<strip-option value="sell">Sell</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required animate>
|
||||
</sm-input>
|
||||
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required animate>
|
||||
</sm-input>
|
||||
</sm-input>
|
||||
<sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" required
|
||||
<sm-input id="get_price" placeholder="Max price (₹)" type="number" step="0.01" required
|
||||
animate>
|
||||
</sm-input>
|
||||
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.0001" required
|
||||
animate>
|
||||
</sm-input>
|
||||
</sm-input>
|
||||
<sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01"
|
||||
required animate>
|
||||
</sm-input>
|
||||
<div id="quantity_selector" class="flex align-center quantity-selector">
|
||||
<span id="quantity_type">Rupee</span>
|
||||
<button class="button" value="0.25" title="Buy FLO worth 25% of total rupee">25%</button>
|
||||
<button class="button" value="0.25"
|
||||
title="Buy FLO worth 25% of total rupee">25%</button>
|
||||
<button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button>
|
||||
<button class="button" value="0.75" title="Buy FLO worth 75% of total rupee">75%</button>
|
||||
<button class="button" value="0.75"
|
||||
title="Buy FLO worth 75% of total rupee">75%</button>
|
||||
<button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</button>
|
||||
</div>
|
||||
<div id="trade_button_wrapper" class="stateful-button-wrapper flex align-center justify-center">
|
||||
<sm-button id="trade_button" class="uppercase w-100" variant="primary" onclick="tradeFlo()">
|
||||
<div id="trade_button_wrapper"
|
||||
class="stateful-button-wrapper flex align-center justify-center">
|
||||
<sm-button id="trade_button" class="uppercase w-100" variant="primary"
|
||||
onclick="tradeFlo()">
|
||||
BUY
|
||||
FLO
|
||||
</sm-button>
|
||||
</div>
|
||||
</sm-form>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="my_orders" class="grid gap-1 hide mobile-page">
|
||||
@ -942,7 +953,8 @@
|
||||
}
|
||||
if (params.hasOwnProperty('asset') && params.asset !== '') {
|
||||
getRef('asset_list_wrapper').classList.add('hide-on-mobile')
|
||||
getRef('trade_form').classList.remove('hide-on-mobile')
|
||||
getRef('main_header').classList.add('hide-on-mobile')
|
||||
getRef('asset_page').classList.remove('hide-on-mobile')
|
||||
|
||||
if (!chart) {
|
||||
chart = LightweightCharts.createChart(getRef('price_history_chart'), {
|
||||
@ -954,37 +966,11 @@
|
||||
lineSeries = chart.addLineSeries();
|
||||
setChartTheme()
|
||||
}
|
||||
floExchangeAPI.getRateHistory(params.asset, '2 weeks').then(data => {
|
||||
data = data.map(({ time, rate }) => {
|
||||
return {
|
||||
time: new Date(time).getTime() / 1000,
|
||||
value: rate
|
||||
}
|
||||
})
|
||||
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);
|
||||
function setLastBarText() {
|
||||
getRef('chart_asset').innerHTML = `<h4> ${params.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) {
|
||||
setLastBarText();
|
||||
} else {
|
||||
const price = param.seriesPrices.get(lineSeries);
|
||||
getRef('chart_asset').innerHTML = `<h4> ${params.asset}/INR</h4><p>${formatAmount(price)}</p>`;
|
||||
}
|
||||
});
|
||||
})
|
||||
render.chart(params.asset)
|
||||
} else {
|
||||
getRef('main_header').classList.remove('hide-on-mobile')
|
||||
getRef('asset_list_wrapper').classList.remove('hide-on-mobile')
|
||||
getRef('trade_form').classList.add('hide-on-mobile')
|
||||
getRef('asset_page').classList.add('hide-on-mobile')
|
||||
}
|
||||
break;
|
||||
case 'my_orders':
|
||||
@ -1217,6 +1203,36 @@
|
||||
card.appendChild(assetBalance)
|
||||
return card
|
||||
},
|
||||
chart(asset, duration = '48 weeks') {
|
||||
floExchangeAPI.getRateHistory(asset, duration).then(data => {
|
||||
data = data.map(({ time, rate }) => {
|
||||
return {
|
||||
time: new Date(time).getTime() / 1000,
|
||||
value: rate
|
||||
}
|
||||
})
|
||||
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);
|
||||
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) {
|
||||
setLastBarText();
|
||||
} else {
|
||||
const price = param.seriesPrices.get(lineSeries);
|
||||
getRef('chart_asset').innerHTML = `<h4> ${asset}/INR</h4><p>${formatAmount(price)}</p>`;
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function showProcess(id) {
|
||||
@ -1229,6 +1245,17 @@
|
||||
getRef(id).children[0].disabled = false
|
||||
getRef(id).querySelector('sm-spinner')?.remove()
|
||||
}
|
||||
|
||||
getRef('trading_view_switcher').addEventListener('change', e => {
|
||||
if (e.target.value === 'trade') {
|
||||
getRef('price_chart_wrapper').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')
|
||||
}
|
||||
})
|
||||
|
||||
let tradeType = 'buy'
|
||||
getRef('trade_type_selector').addEventListener('change', e => {
|
||||
tradeType = e.detail.value
|
||||
@ -1245,6 +1272,9 @@
|
||||
}
|
||||
})
|
||||
})
|
||||
getRef('price_duration_selector').addEventListener('change', e => {
|
||||
render.chart(pagesData.params.asset, e.detail.value === 'hour' ? '48 weeks' : 'all-time')
|
||||
})
|
||||
async function tradeFlo() {
|
||||
const asset = pagesData.params.asset;
|
||||
const quantity = parseFloat(getRef('get_quantity').value)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user