UI improvements
This commit is contained in:
sairaj mote
parent
41f708ee31
commit
4e36d26c18
49
css/main.css
49
css/main.css
@ -600,6 +600,7 @@ ul {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_navbar {
|
#main_navbar {
|
||||||
@ -727,23 +728,51 @@ ul {
|
|||||||
|
|
||||||
#wallet_section {
|
#wallet_section {
|
||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
padding: 1rem;
|
|
||||||
background: url(bg-art2.svg) no-repeat right bottom, rgba(var(--text-color), 0.03);
|
|
||||||
background-size: contain;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#rupee_balance span:first-of-type {
|
#wallet_cards_wrapper {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
-ms-scroll-snap-type: x proximity;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
}
|
||||||
|
|
||||||
|
.balance-card {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
width: min(16rem, 90%);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.balance-card h5 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
.balance-card:not(:last-of-type) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
.balance-card:nth-of-type(1) {
|
||||||
|
background: url("bg-art2.svg") no-repeat bottom right, rgba(var(--foreground-color), 1);
|
||||||
|
background-size: contain;
|
||||||
|
border: solid medium #10ddc2;
|
||||||
|
}
|
||||||
|
.balance-card:nth-of-type(2) {
|
||||||
|
background: url("back.svg") no-repeat bottom right, rgba(var(--foreground-color), 1);
|
||||||
|
background-size: contain;
|
||||||
|
border: solid medium #ffc446;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rupee_balance span:first-of-type,
|
||||||
|
#flo_balance span:first-of-type {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
#rupee_balance span:last-of-type {
|
#rupee_balance span:last-of-type,
|
||||||
|
#flo_balance span:last-of-type {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#wallet_actions_wrapper {
|
#wallet_actions_wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.3rem;
|
gap: 0.5rem;
|
||||||
margin-top: 1rem;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1016,6 +1045,9 @@ ul {
|
|||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.transaction__amount {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
.transaction.sent .icon {
|
.transaction.sent .icon {
|
||||||
fill: rgba(var(--text-color), 0.8);
|
fill: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
@ -1343,7 +1375,6 @@ ul {
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: rgba(var(--background-color), 1);
|
|
||||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
#main_card:not(.nav-hidden) {
|
#main_card:not(.nav-hidden) {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -558,6 +558,7 @@ ul {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
|
background-color: rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_navbar {
|
#main_navbar {
|
||||||
@ -681,13 +682,39 @@ ul {
|
|||||||
}
|
}
|
||||||
#wallet_section {
|
#wallet_section {
|
||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
padding: 1rem;
|
|
||||||
background: url(bg-art2.svg) no-repeat right bottom,
|
|
||||||
rgba(var(--text-color), 0.03);
|
|
||||||
background-size: contain;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
}
|
}
|
||||||
#rupee_balance {
|
#wallet_cards_wrapper {
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
}
|
||||||
|
.balance-card {
|
||||||
|
scroll-snap-align: start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-radius: 1rem;
|
||||||
|
width: min(16rem, 90%);
|
||||||
|
flex-shrink: 0;
|
||||||
|
h5 {
|
||||||
|
margin-top: 1rem;
|
||||||
|
}
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
background: url("bg-art2.svg") no-repeat bottom right,
|
||||||
|
rgba(var(--foreground-color), 1);
|
||||||
|
background-size: contain;
|
||||||
|
border: solid medium #10ddc2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
background: url("back.svg") no-repeat bottom right,
|
||||||
|
rgba(var(--foreground-color), 1);
|
||||||
|
background-size: contain;
|
||||||
|
border: solid medium #ffc446;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#rupee_balance,
|
||||||
|
#flo_balance {
|
||||||
span:first-of-type {
|
span:first-of-type {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
@ -697,8 +724,7 @@ ul {
|
|||||||
}
|
}
|
||||||
#wallet_actions_wrapper {
|
#wallet_actions_wrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.3rem;
|
gap: 0.5rem;
|
||||||
margin-top: 1rem;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
||||||
}
|
}
|
||||||
.wallet-action {
|
.wallet-action {
|
||||||
@ -955,6 +981,9 @@ ul {
|
|||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
gap: 0.5rem 1rem;
|
gap: 0.5rem 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
&__amount {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
&.sent {
|
&.sent {
|
||||||
.icon {
|
.icon {
|
||||||
fill: rgba(var(--text-color), 0.8);
|
fill: rgba(var(--text-color), 0.8);
|
||||||
@ -1266,8 +1295,6 @@ ul {
|
|||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: rgba(var(--background-color), 1);
|
|
||||||
|
|
||||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
|
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
|
||||||
0 1rem 3rem rgba(0, 0, 0, 0.2);
|
0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|||||||
117
index.html
117
index.html
@ -170,60 +170,71 @@
|
|||||||
<h5>Welcome</h5>
|
<h5>Welcome</h5>
|
||||||
<sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
|
<sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
|
||||||
</div>
|
</div>
|
||||||
<div id="wallet_section" class="grid gap-1">
|
<div id="wallet_section" class="grid gap-2">
|
||||||
<div class="flex align-center space-between">
|
<div class="grid gap-1">
|
||||||
<h4>My wallet</h4>
|
<div class="flex align-center space-between">
|
||||||
<a href="#/wallet" class="interact user-element">See history</a>
|
<h4>My wallet</h4>
|
||||||
|
<a href="#/wallet" class="interact user-element">See history</a>
|
||||||
|
</div>
|
||||||
|
<div id="wallet_cards_wrapper">
|
||||||
|
<div class="grid gap-0-5 balance-card">
|
||||||
|
<h5>Rupee token</h5>
|
||||||
|
<h1 class="h1" id="rupee_balance"></h1>
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-0-5 balance-card">
|
||||||
|
<h5>FLO</h5>
|
||||||
|
<h1 class="h1" id="flo_balance"></h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid gap-0-5">
|
<div class="grid gap-1 user-element">
|
||||||
<h5>Balance</h5>
|
<h4>Rupee token actions</h4>
|
||||||
<h1 class="h1" id="rupee_balance"></h1>
|
<div id="wallet_actions_wrapper">
|
||||||
</div>
|
<button class="wallet-action" onclick="showTokenTransfer('send')">
|
||||||
<div id="wallet_actions_wrapper" class="user-element">
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||||
<button class="wallet-action" onclick="showTokenTransfer('send')">
|
width="24px" fill="#000000">
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
<path d="M0 0h24v24H0z" fill="none" />
|
||||||
width="24px" fill="#000000">
|
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
</svg>
|
||||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
Send
|
||||||
</svg>
|
</button>
|
||||||
Send
|
<button class="wallet-action" onclick="showTokenTransfer('request')">
|
||||||
</button>
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||||
<button class="wallet-action" onclick="showTokenTransfer('request')">
|
width="24px" fill="#000000">
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
<path d="M0 0h24v24H0z" fill="none" />
|
||||||
width="24px" fill="#000000">
|
<path
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" />
|
||||||
<path
|
</svg>
|
||||||
d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z" />
|
Request
|
||||||
</svg>
|
</button>
|
||||||
Request
|
<button class="wallet-action cashier-option" onclick="showPopup('topup_wallet_popup')">
|
||||||
</button>
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||||
<button class="wallet-action cashier-option" onclick="showPopup('topup_wallet_popup')">
|
width="24px" fill="#000000">
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
<path d="M0 0h24v24H0z" fill="none" />
|
||||||
width="24px" fill="#000000">
|
<path
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
|
||||||
<path
|
</svg>
|
||||||
d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
|
Top-up
|
||||||
</svg>
|
</button>
|
||||||
Top-up
|
<button class="wallet-action cashier-option" onclick="showPopup('withdraw_wallet_popup')">
|
||||||
</button>
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||||
<button class="wallet-action cashier-option" onclick="showPopup('withdraw_wallet_popup')">
|
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||||
<svg class="icon" 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">
|
|
||||||
<g>
|
|
||||||
<rect fill="none" height="24" width="24" />
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<rect height="7" width="3" x="4" y="10" />
|
<rect fill="none" height="24" width="24" />
|
||||||
<rect height="7" width="3" x="10.5" y="10" />
|
|
||||||
<rect height="3" width="20" x="2" y="19" />
|
|
||||||
<rect height="7" width="3" x="17" y="10" />
|
|
||||||
<polygon points="12,1 2,6 2,8 22,8 22,6" />
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<g>
|
||||||
</svg>
|
<g>
|
||||||
Withdraw
|
<rect height="7" width="3" x="4" y="10" />
|
||||||
</button>
|
<rect height="7" width="3" x="10.5" y="10" />
|
||||||
|
<rect height="3" width="20" x="2" y="19" />
|
||||||
|
<rect height="7" width="3" x="17" y="10" />
|
||||||
|
<polygon points="12,1 2,6 2,8 22,8 22,6" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Withdraw
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="user" class="hide grid user-element">
|
<div id="user" class="hide grid user-element">
|
||||||
@ -1056,6 +1067,10 @@
|
|||||||
const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
|
const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
|
||||||
getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
|
getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
|
||||||
})
|
})
|
||||||
|
floBlockchainAPI.getBalance(myFloID).then(balance => {
|
||||||
|
const [beforeDecimal, afterDecimal] = String(balance).split('.')
|
||||||
|
getRef('flo_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
|
||||||
|
})
|
||||||
if (floGlobals.isSubAdmin) {
|
if (floGlobals.isSubAdmin) {
|
||||||
cashierUI.renderRequests(Cashier.Requests);
|
cashierUI.renderRequests(Cashier.Requests);
|
||||||
Cashier.init().then(result => {
|
Cashier.init().then(result => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user