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

making exchange UI mobile friendly

Browse Source
This commit is contained in:
sairaj mote 2022-03-30 20:18:42 +05:30
parent 6028e2b541
commit c35220df7e
1 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/index.html
View File

@ -93,11 +93,11 @@
<sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button> <sm-button onclick="floExchangeAPI.clearAllLocalData()">clear local data</sm-button>
</sm-form> </sm-form>
<section id="exchange_wrapper"> <section id="exchange_wrapper">
<div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content hide-on-mobile"> <div id="asset_list-wrapper" class="grid gap-1 align-start hide user-content">
<h4>Assets</h4> <h4>Assets</h4>
<ul id="listed_assets" class="user-content hide"></ul> <ul id="listed_assets" class="user-content hide"></ul>
</div> </div>
<sm-form id="trade_form" class="user-content hide "> <sm-form id="trade_form" class="user-content hide hide-on-mobile">
<div class="flex space-between align-center"> <div class="flex space-between align-center">
<a href="#/exchange" class="button icon-only hide-on-desktop"> <a href="#/exchange" class="button icon-only hide-on-desktop">
<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"
@ -889,9 +889,10 @@
} }
switch (pageId) { switch (pageId) {
case 'exchange': case 'exchange':
if (!params.hasOwnProperty('asset') || params.asset === '') { if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
params.asset = 'FLO' params.asset = 'FLO'
} }
if (params.hasOwnProperty('asset') && params.asset !== '') {
if (getRef('listed_assets').querySelector('.listed-asset--active')) if (getRef('listed_assets').querySelector('.listed-asset--active'))
getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active') getRef('listed_assets').querySelector('.listed-asset--active').classList.remove('listed-asset--active')
getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active') getRef('listed_assets').querySelector(`[href="#/exchange?asset=${params.asset}"]`).classList.add('listed-asset--active')
@ -906,6 +907,14 @@
button.title = `Sell ${button.textContent} of total ${params.asset}` button.title = `Sell ${button.textContent} of total ${params.asset}`
} }
}) })
}
if (params.hasOwnProperty('asset') && params.asset !== '') {
getRef('exchange_wrapper').children[0].classList.add('hide-on-mobile')
getRef('exchange_wrapper').children[1].classList.remove('hide-on-mobile')
} else {
getRef('exchange_wrapper').children[1].classList.add('hide-on-mobile')
getRef('exchange_wrapper').children[0].classList.remove('hide-on-mobile')
}
break; break;
case 'my_orders': case 'my_orders':
break; break;
@ -1010,6 +1019,26 @@
this.render() this.render()
} }
} }
function animateTo(element, keyframes, options) {
const anime = element.animate(keyframes, { ...options, fill: 'both' })
anime.finished.then(() => {
anime.commitStyles()
anime.cancel()
})
return anime
}
let isMobileView = false
const mobileQuery = window.matchMedia('(max-width: 40rem)')
function handleMobileChange(e) {
isMobileView = e.matches
if (!isMobileView) {
getRef('exchange_wrapper').children[0].style = ''
getRef('exchange_wrapper').children[1].style = ''
}
}
mobileQuery.addEventListener('change', handleMobileChange)
handleMobileChange(mobileQuery)
</script> </script>
<script> <script>
const listedAssets = { const listedAssets = {
@ -1815,7 +1844,7 @@
//My orders //My orders
renderUserOrders(); renderUserOrders();
proxy.secret.then(_ => null).catch(_ => null); proxy.secret.then(_ => null).catch(_ => null);
showPage(window.location.hash) showPage(window.location.hash, { firstLoad: true });
}).catch(error => console.error(error)) }).catch(error => console.error(error))
}; };