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

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-04-03 20:21:26 +05:30
parent 5c6fcf4685
commit 371c4c5bcd
4 changed files with 90 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/css/main.css
View File

@ -345,10 +345,11 @@ ul {
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
} }
.button__icon--left { .margin-right-0-5 {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.button__icon--right {
.margin-left-0-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -494,6 +495,16 @@ sm-checkbox {
line-height: 1.5; line-height: 1.5;
} }
.tip {
border-radius: 2rem;
background-color: rgba(var(--text-color), 0.06);
padding: 0.3rem 0.8rem;
font-size: 0.85rem;
}
.tip .icon {
fill: var(--accent-color);
}
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@ -642,16 +653,16 @@ sm-checkbox {
width: 1.5rem; width: 1.5rem;
} }
#flo_rate {
font-weight: 700;
}
.quantity-selector .button { .quantity-selector .button {
flex: 1; flex: 1;
padding: 0.5rem 0.6rem; padding: 0.5rem 0.6rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
#quantity_selector_tip::first-letter {
text-transform: uppercase;
}
#quantity_type, #quantity_type,
#wallet_quantity_type { #wallet_quantity_type {
font-size: 0.8rem; font-size: 0.8rem;

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
docs/css/main.scss
View File

@ -338,14 +338,11 @@ ul {
fill: rgba(var(--text-color), 0.8); fill: rgba(var(--text-color), 0.8);
} }
.button__icon { .margin-right-0-5 {
&--left { margin-right: 0.5rem;
margin-right: 0.5rem; }
} .margin-left-0-5 {
margin-left: 0.5rem;
&--right {
margin-left: 0.5rem;
}
} }
.icon-only { .icon-only {
padding: 0.6rem; padding: 0.6rem;
@ -475,6 +472,15 @@ sm-checkbox {
border-radius: 0.5rem; border-radius: 0.5rem;
line-height: 1.5; line-height: 1.5;
} }
.tip {
border-radius: 2rem;
background-color: rgba(var(--text-color), 0.06);
padding: 0.3rem 0.8rem;
font-size: 0.85rem;
.icon {
fill: var(--accent-color);
}
}
.page-layout { .page-layout {
display: grid; display: grid;
grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem; grid-template-columns: 1.5rem minmax(0, 1fr) 1.5rem;
@ -613,9 +619,6 @@ sm-checkbox {
} }
} }
} }
#flo_rate {
font-weight: 700;
}
.quantity-selector { .quantity-selector {
.button { .button {
flex: 1; flex: 1;
@ -623,6 +626,12 @@ sm-checkbox {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
} }
#quantity_selector_tip {
&::first-letter {
text-transform: uppercase;
}
}
#quantity_type, #quantity_type,
#wallet_quantity_type { #wallet_quantity_type {
font-size: 0.8rem; font-size: 0.8rem;

84
docs/index.html
View File

@ -76,7 +76,7 @@
error-text="Invalid private key" data-private-key animate required> error-text="Invalid private key" data-private-key animate required>
</sm-input> </sm-input>
<sm-checkbox id="remember_me" checked> <sm-checkbox id="remember_me" checked>
<span class="button__icon--right"> <span class="margin-left-0-5">
Remember me Remember me
</span> </span>
</sm-checkbox> </sm-checkbox>
@ -143,14 +143,30 @@
<sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01" <sm-input id="get_total" placeholder="Total (₹)" type="number" min="0.01" step="0.01"
required animate> required animate>
</sm-input> </sm-input>
<div id="quantity_selector" class="flex align-center quantity-selector"> <div class="grid gap-0-5">
<span id="quantity_type">Rupee</span> <div id="quantity_selector" class="flex align-center quantity-selector">
<button class="button" value="0.25" <span id="quantity_type">Rupee</span>
title="Buy FLO worth 25% of total rupee">25%</button> <button class="button" value="0.25"
<button class="button" value="0.5" title="Buy FLO worth 50% of total rupee">50%</button> title="Buy FLO worth 25% of total rupee">25%</button>
<button class="button" value="0.75" <button class="button" value="0.5"
title="Buy FLO worth 75% of total rupee">75%</button> title="Buy FLO worth 50% of total rupee">50%</button>
<button class="button" value="1" title="Buy FLO worth 100% of total rupee">100%</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 class="flex align-center tip">
<svg class="icon margin-right-0-5" style="height: 1em; width: 1em;"
xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<rect fill="none" height="24" width="24" y="0" />
<path
d="M7,20h4c0,1.1-0.9,2-2,2S7,21.1,7,20z M5,19h8v-2H5V19z M16.5,9.5c0,3.82-2.66,5.86-3.77,6.5H5.27 C4.16,15.36,1.5,13.32,1.5,9.5C1.5,5.36,4.86,2,9,2S16.5,5.36,16.5,9.5z M14.5,9.5C14.5,6.47,12.03,4,9,4S3.5,6.47,3.5,9.5 c0,2.47,1.49,3.89,2.35,4.5h6.3C13.01,13.39,14.5,11.97,14.5,9.5z M21.37,7.37L20,8l1.37,0.63L22,10l0.63-1.37L24,8l-1.37-0.63L22,6 L21.37,7.37z M19,6l0.94-2.06L22,3l-2.06-0.94L19,0l-0.94,2.06L16,3l2.06,0.94L19,6z" />
</svg>
<p id="quantity_selector_tip" style="font-size: inherit;">
Buy FLO worth of above percentage rupee
</p>
</div>
</div> </div>
<div id="trade_button_wrapper" <div id="trade_button_wrapper"
class="stateful-button-wrapper flex align-center justify-center"> class="stateful-button-wrapper flex align-center justify-center">
@ -177,7 +193,7 @@
</div> </div>
<div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide"> <div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide">
<button class="" onclick="clearSelection()" title="Clear all selection"> <button class="" onclick="clearSelection()" title="Clear all selection">
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px"
viewBox="0 0 24 24" width="24px"> viewBox="0 0 24 24" width="24px">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
@ -222,7 +238,7 @@
</section> </section>
<section id="wallet" class="grid mobile-page hide"> <section id="wallet" class="grid mobile-page hide">
<h4 class="flex align-center user_section__header"> <h4 class="flex align-center user_section__header">
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px"
viewBox="0 0 24 24" width="24px"> viewBox="0 0 24 24" width="24px">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path <path
@ -591,8 +607,8 @@
<div class="stateful-result stateful-result--success"> <div class="stateful-result stateful-result--success">
<div class="result__background result__background--success"></div> <div class="result__background result__background--success"></div>
<div class="icon-wrapper flex align-center"> <div class="icon-wrapper flex align-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
viewBox="0 0 24 24" width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
</svg> </svg>
@ -604,8 +620,8 @@
<div class="stateful-result stateful-result--failure"> <div class="stateful-result stateful-result--failure">
<div class="result__background"></div> <div class="result__background"></div>
<div class="icon-wrapper flex align-center"> <div class="icon-wrapper flex align-center">
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" height="24px" <svg xmlns="http://www.w3.org/2000/svg" class="icon margin-right-0-5" height="24px" viewBox="0 0 24 24"
viewBox="0 0 24 24" width="24px" fill="#000000"> width="24px" fill="#000000">
<path <path
d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" /> d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
</svg> </svg>
@ -916,13 +932,7 @@
getRef('traded_asset').textContent = `Trade ${params.asset}` getRef('traded_asset').textContent = `Trade ${params.asset}`
getRef('trade_button').textContent = `${tradeType} ${params.asset}` getRef('trade_button').textContent = `${tradeType} ${params.asset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}` getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[params.asset].net.toFixed(4))} ${params.asset}`
getRef('quantity_selector').querySelectorAll('.button').forEach(button => { updateTooltip(params.asset, tradeType)
if (tradeType === 'buy') {
button.title = `Buy ${params.asset} worth ${button.textContent} of total rupee`
} else {
button.title = `Sell ${button.textContent} of total ${params.asset}`
}
})
} }
const animOptions = { const animOptions = {
duration: 150, duration: 150,
@ -1135,8 +1145,14 @@
icon: `<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"> icon: `<svg class="icon" width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0861 14.6534C22.3924 14.3472 22.7898 14.1486 23.2186 14.0876L44.6946 11.0319C45.2676 10.9504 45.8455 11.1432 46.2547 11.5524C47.2381 12.5358 46.8168 14.2128 45.4853 14.6146L28.6869 19.6843C28.3711 19.7796 28.0838 19.9515 27.8505 20.1848L27.0092 21.0261L28.3236 22.3404C29.0306 23.0475 29.0976 24.1522 28.5245 24.9346L52.2562 48.6662C53.0372 49.4473 53.0372 50.7136 52.2562 51.4946L51.4947 52.2561C50.7137 53.0372 49.4473 53.0372 48.6663 52.2561L24.9346 28.5245C24.1522 29.0976 23.0475 29.0306 22.3404 28.3236L21.0261 27.0092L20.1848 27.8505C19.9515 28.0838 19.7796 28.3711 19.6843 28.6869L14.6146 45.4853C14.2128 46.8168 12.5358 47.2381 11.5524 46.2547C11.1432 45.8455 10.9504 45.2675 11.0319 44.6946L14.0876 23.2186C14.1486 22.7898 14.3472 22.3924 14.6534 22.0861L15.3949 21.3447C14.8777 20.6386 14.8818 19.67 15.4072 18.9681C14.8209 18.1848 14.8837 17.0693 15.5958 16.3572L16.3573 15.5958C17.0694 14.8837 18.1848 14.8208 18.9681 15.4072C19.6701 14.8818 20.6386 14.8777 21.3447 15.3949L22.0861 14.6534Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M22.0861 14.6534C22.3924 14.3472 22.7898 14.1486 23.2186 14.0876L44.6946 11.0319C45.2676 10.9504 45.8455 11.1432 46.2547 11.5524C47.2381 12.5358 46.8168 14.2128 45.4853 14.6146L28.6869 19.6843C28.3711 19.7796 28.0838 19.9515 27.8505 20.1848L27.0092 21.0261L28.3236 22.3404C29.0306 23.0475 29.0976 24.1522 28.5245 24.9346L52.2562 48.6662C53.0372 49.4473 53.0372 50.7136 52.2562 51.4946L51.4947 52.2561C50.7137 53.0372 49.4473 53.0372 48.6663 52.2561L24.9346 28.5245C24.1522 29.0976 23.0475 29.0306 22.3404 28.3236L21.0261 27.0092L20.1848 27.8505C19.9515 28.0838 19.7796 28.3711 19.6843 28.6869L14.6146 45.4853C14.2128 46.8168 12.5358 47.2381 11.5524 46.2547C11.1432 45.8455 10.9504 45.2675 11.0319 44.6946L14.0876 23.2186C14.1486 22.7898 14.3472 22.3924 14.6534 22.0861L15.3949 21.3447C14.8777 20.6386 14.8818 19.67 15.4072 18.9681C14.8209 18.1848 14.8837 17.0693 15.5958 16.3572L16.3573 15.5958C17.0694 14.8837 18.1848 14.8208 18.9681 15.4072C19.6701 14.8818 20.6386 14.8777 21.3447 15.3949L22.0861 14.6534Z"/>
</svg>` </svg>`
},
default: {
icon: `<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="M15 4c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zM3 12c0-2.61 1.67-4.83 4-5.65V4.26C3.55 5.15 1 8.27 1 12s2.55 6.85 6 7.74v-2.09c-2.33-.82-4-3.04-4-5.65z"/></svg>`
} }
} }
function getIcon(asset) {
return listedAssets.hasOwnProperty(asset) ? listedAssets[asset].icon : listedAssets.default.icon;
}
function formatAmount(amount) { function formatAmount(amount) {
return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 }) return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR', maximumFractionDigits: 5 })
@ -1151,7 +1167,7 @@
const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild const clone = getRef('listed_asset_template').content.cloneNode(true).firstElementChild.firstElementChild
clone.href = `#/exchange?asset=${name}` clone.href = `#/exchange?asset=${name}`
clone.dataset.listedAsset = name clone.dataset.listedAsset = name
clone.querySelector('.listed-asset__icon').innerHTML = listedAssets[name] ? listedAssets[name].icon : '' clone.querySelector('.listed-asset__icon').innerHTML = getIcon(name)
clone.querySelector('.listed-asset__rate').textContent = rate clone.querySelector('.listed-asset__rate').textContent = rate
clone.querySelector('.listed-asset__name').textContent = name clone.querySelector('.listed-asset__name').textContent = name
return clone return clone
@ -1213,7 +1229,7 @@
const card = getRef('asset_balance_card_template').content.cloneNode(true).firstElementChild const card = getRef('asset_balance_card_template').content.cloneNode(true).firstElementChild
card.className = `balance-card ${locked ? 'is-locked' : ''}` card.className = `balance-card ${locked ? 'is-locked' : ''}`
card.querySelector('.balance-card__token').textContent = asset card.querySelector('.balance-card__token').textContent = asset
card.querySelector('.balance-card__icon').innerHTML = listedAssets[asset] ? listedAssets[asset].icon : '' card.querySelector('.balance-card__icon').innerHTML = getIcon(asset)
const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template'; const templateToClone = locked ? 'locked_balance_template' : 'net_balance_template';
const assetBalance = getRef(templateToClone).content.cloneNode(true) const assetBalance = getRef(templateToClone).content.cloneNode(true)
assetBalance.querySelector('.available-balance').textContent = asset === 'rupee' ? formatAmount(net) : parseFloat(net.toFixed(4)) assetBalance.querySelector('.available-balance').textContent = asset === 'rupee' ? formatAmount(net) : parseFloat(net.toFixed(4))
@ -1418,6 +1434,17 @@
} }
}) })
function updateTooltip(asset, tradeType) {
getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
if (tradeType === 'buy') {
button.title = `Buy ${asset} worth ${button.textContent} of total rupee`
} else {
button.title = `Sell ${button.textContent} of total ${asset}`
}
})
getRef('quantity_selector_tip').textContent = `${tradeType} ${asset} worth of above percentage`
}
let tradeType = 'buy' let tradeType = 'buy'
getRef('trade_type_selector').addEventListener('change', e => { getRef('trade_type_selector').addEventListener('change', e => {
tradeType = e.detail.value tradeType = e.detail.value
@ -1425,14 +1452,7 @@
getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price') getRef('get_price').setAttribute('placeholder', tradeType === 'buy' ? 'Max price' : 'Min price')
getRef('trade_button').textContent = `${tradeType} ${selectedAsset}` getRef('trade_button').textContent = `${tradeType} ${selectedAsset}`
getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}` getRef('quantity_type').textContent = tradeType === 'buy' ? formatAmount(allTokens.rupee.net) : `${parseFloat(allTokens[selectedAsset].net.toFixed(4))} ${selectedAsset}`
updateTooltip(selectedAsset, tradeType)
getRef('quantity_selector').querySelectorAll('.button').forEach(button => {
if (tradeType === 'buy') {
button.title = `Buy ${selectedAsset} worth ${button.textContent} of total rupee`
} else {
button.title = `Sell ${button.textContent} of total ${selectedAsset}`
}
})
}) })
getRef('price_duration_selector').addEventListener('change', e => { getRef('price_duration_selector').addEventListener('change', e => {
render.chart(pagesData.params.asset, e.detail.value === 'hour' ? '48 weeks' : 'all-time') render.chart(pagesData.params.asset, e.detail.value === 'hour' ? '48 weeks' : 'all-time')