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%;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
@ -727,23 +728,51 @@ ul {
|
||||
|
||||
#wallet_section {
|
||||
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;
|
||||
}
|
||||
#rupee_balance span:last-of-type {
|
||||
#rupee_balance span:last-of-type,
|
||||
#flo_balance span:last-of-type {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#wallet_actions_wrapper {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
margin-top: 1rem;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
||||
}
|
||||
|
||||
@ -1016,6 +1045,9 @@ ul {
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.transaction__amount {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.transaction.sent .icon {
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -1343,7 +1375,6 @@ ul {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
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);
|
||||
}
|
||||
#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%;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
@ -681,13 +682,39 @@ ul {
|
||||
}
|
||||
#wallet_section {
|
||||
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 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
@ -697,8 +724,7 @@ ul {
|
||||
}
|
||||
#wallet_actions_wrapper {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
margin-top: 1rem;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
|
||||
}
|
||||
.wallet-action {
|
||||
@ -955,6 +981,9 @@ ul {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: center;
|
||||
&__amount {
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.sent {
|
||||
.icon {
|
||||
fill: rgba(var(--text-color), 0.8);
|
||||
@ -1266,8 +1295,6 @@ ul {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
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);
|
||||
}
|
||||
|
||||
117
index.html
117
index.html
@ -170,60 +170,71 @@
|
||||
<h5>Welcome</h5>
|
||||
<sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
|
||||
</div>
|
||||
<div id="wallet_section" class="grid gap-1">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>My wallet</h4>
|
||||
<a href="#/wallet" class="interact user-element">See history</a>
|
||||
<div id="wallet_section" class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<div class="flex align-center space-between">
|
||||
<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 class="grid gap-0-5">
|
||||
<h5>Balance</h5>
|
||||
<h1 class="h1" id="rupee_balance"></h1>
|
||||
</div>
|
||||
<div id="wallet_actions_wrapper" class="user-element">
|
||||
<button class="wallet-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send
|
||||
</button>
|
||||
<button class="wallet-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
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" />
|
||||
</svg>
|
||||
Request
|
||||
</button>
|
||||
<button class="wallet-action cashier-option" onclick="showPopup('topup_wallet_popup')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
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" />
|
||||
</svg>
|
||||
Top-up
|
||||
</button>
|
||||
<button class="wallet-action cashier-option" onclick="showPopup('withdraw_wallet_popup')">
|
||||
<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>
|
||||
<div class="grid gap-1 user-element">
|
||||
<h4>Rupee token actions</h4>
|
||||
<div id="wallet_actions_wrapper">
|
||||
<button class="wallet-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send
|
||||
</button>
|
||||
<button class="wallet-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
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" />
|
||||
</svg>
|
||||
Request
|
||||
</button>
|
||||
<button class="wallet-action cashier-option" onclick="showPopup('topup_wallet_popup')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
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" />
|
||||
</svg>
|
||||
Top-up
|
||||
</button>
|
||||
<button class="wallet-action cashier-option" onclick="showPopup('withdraw_wallet_popup')">
|
||||
<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 height="7" width="3" x="4" y="10" />
|
||||
<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" />
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Withdraw
|
||||
</button>
|
||||
<g>
|
||||
<g>
|
||||
<rect height="7" width="3" x="4" y="10" />
|
||||
<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 id="user" class="hide grid user-element">
|
||||
@ -1056,6 +1067,10 @@
|
||||
const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
|
||||
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) {
|
||||
cashierUI.renderRequests(Cashier.Requests);
|
||||
Cashier.init().then(result => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user