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-form>
<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>
<ul id="listed_assets" class="user-content hide"></ul>
</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">
<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"
@ -889,9 +889,10 @@
}
switch (pageId) {
case 'exchange':
if (!params.hasOwnProperty('asset') || params.asset === '') {
if (!isMobileView && !params.hasOwnProperty('asset') || params.asset === '') {
params.asset = 'FLO'
}
if (params.hasOwnProperty('asset') && params.asset !== '') {
if (getRef('listed_assets').querySelector('.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')
@ -906,6 +907,14 @@
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;
case 'my_orders':
break;
@ -1010,6 +1019,26 @@
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>
const listedAssets = {
@ -1815,7 +1844,7 @@
//My orders
renderUserOrders();
proxy.secret.then(_ => null).catch(_ => null);
showPage(window.location.hash)
showPage(window.location.hash, { firstLoad: true });
}).catch(error => console.error(error))
};