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

v2.11.6

Browse Source 
UI: moved FLO address generation and recovery to dashboard page
This commit is contained in:
sairaj mote 2021-03-09 20:10:04 +05:30
parent afab8170f8
commit c789ce2594
4 changed files with 172 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
css/main.css
View File

@ -23,6 +23,7 @@ body {
--error-color: red;
color: rgba(var(--text-color), 1);
height: calc(100%);
background: rgba(var(--text-color), 0.04);
}
body[data-theme=dark] {
@ -31,6 +32,7 @@ body[data-theme=dark] {
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--error-color: rgb(255, 106, 106);
background: rgba(var(--foreground-color), 1);
}
button {
@ -261,7 +263,6 @@ ul {
height: 100%;
width: 100%;
grid-row: 1/3;
background: rgba(var(--foreground-color), 0.9);
}
#main_header {
@ -281,6 +282,7 @@ ul {
#page_container {
grid-area: page;
overflow-y: hidden;
}
.page {
@ -353,6 +355,38 @@ ul {
fill: white;
}
#flo_options {
padding: 1rem;
}
.flo-options__item {
padding: 0.8rem;
max-width: 6rem;
justify-content: center;
color: rgba(var(--text-color), 0.8);
}
.option__icon {
height: 3rem;
width: 3rem;
padding: 0.8rem;
background: rgba(var(--text-color), 0.04);
border-radius: 1rem;
}
.coral {
fill: #ff5e78;
}
.violet {
fill: #845ec2;
}
.option__title {
margin-top: 0.5rem;
font-weight: 500;
}
#base_header {
position: relative;
width: 100%;
@ -364,9 +398,14 @@ ul {
color: rgba(var(--text-color), 0.8);
}
#search_contacts {
--padding: 0.5rem 0.6rem;
--background: rgba(var(--text-color), 0.1);
#search_contacts__input {
width: 100%;
--padding: 0.5rem;
}
.search__icon {
height: 1.2rem;
width: 1.2rem;
}
.expanding-search {
@ -470,6 +509,7 @@ ul {
}
.page__header {
min-height: 4rem;
padding: 1rem;
}
@ -478,12 +518,16 @@ ul {
}
#send_flo_form {
width: min(26rem, 100%);
width: 100%;
height: 100%;
padding: 0 1rem;
gap: 0.3;
}
.form__section {
align-content: flex-start;
}
.label {
font-size: 0.9rem;
margin-bottom: 0.3rem;
@ -502,10 +546,11 @@ ul {
}
#balance_card {
width: min(22rem, calc(100% - 2rem));
width: 100%;
padding: 1rem;
margin: 1rem;
margin-bottom: 1rem;
border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.04);
}
#balance_card__input {
@ -513,7 +558,8 @@ ul {
}
.balance_card__title {
font-size: 1.1rem;
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
@ -525,8 +571,9 @@ ul {
}
#flo_balance {
font-size: 3rem;
margin: 2rem 0 1rem 0;
word-break: break-all;
font-size: 2rem;
margin-bottom: 1rem;
}
.settings__section {
@ -560,7 +607,6 @@ ul {
min-height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header" "page" "nav";
background: rgba(var(--foreground-color), 1);
}
#main_navbar {
@ -595,8 +641,13 @@ ul {
body {
align-items: center;
justify-content: center;
background: url(lighthouse.svg) no-repeat center;
background-size: cover;
}
body #main_card {
background: rgba(var(--foreground-color), 1);
}
body[data-theme=dark] #main_card {
background: rgba(var(--text-color), 0.04);
}
sm-popup {
@ -615,9 +666,8 @@ ul {
position: relative;
width: 80vw;
height: 80vh;
border-radius: 0.5rem;
border-radius: 0.2rem;
overflow: hidden;
backdrop-filter: blur(1rem);
grid-template-columns: 15rem 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: "header page" "nav page";
@ -664,6 +714,8 @@ ul {
}
#send_flo_form {
gap: 1rem;
grid-template-columns: 1fr 1fr;
padding: 0 1.5rem 1.5rem 1.5rem;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

76
css/main.scss
View File

@ -21,6 +21,7 @@ body{
--error-color: red;
color: rgba(var(--text-color), 1);
height: calc(100%);
background: rgba(var(--text-color), 0.04);
}
body[data-theme='dark']{
--accent-color:#c64aff;
@ -28,6 +29,7 @@ body[data-theme='dark']{
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
--error-color: rgb(255, 106, 106);
background: rgba(var(--foreground-color), 1);
}
button{
position: relative;
@ -220,7 +222,6 @@ ul{
height: 100%;
width: 100%;
grid-row: 1/3;
background: rgba(var(--foreground-color), 0.9);
}
#main_header{
grid-area: header;
@ -237,6 +238,7 @@ ul{
}
#page_container{
grid-area: page;
overflow-y: hidden;
}
.page{
position: relative;
@ -303,6 +305,32 @@ ul{
width: 1.8rem;
fill: white;
}
#flo_options{
padding: 1rem;
}
.flo-options__item{
padding: 0.8rem;
max-width: 6rem;
justify-content: center;
color: rgba(var(--text-color), 0.8);
}
.option__icon{
height: 3rem;
width: 3rem;
padding: 0.8rem;
background: rgba(var(--text-color), 0.04);
border-radius: 1rem;
}
.coral{
fill: #ff5e78;
}
.violet{
fill: #845ec2;
}
.option__title{
margin-top: 0.5rem;
font-weight: 500;
}
#dashboard_page__header{
}
@ -318,14 +346,19 @@ ul{
#search_contacts{
--padding: 0.5rem 0.6rem;
--background: rgba(var(--text-color), 0.1);
#search_contacts__input{
width: 100%;
--padding: 0.5rem;
}
#search_contacts_button{
}
.search__icon{
height: 1.2rem;
width: 1.2rem;
}
.expanding-search{
width: 14rem;
}
@ -421,6 +454,7 @@ ul{
}
.page__header{
min-height: 4rem;
padding: 1rem;
}
.page__title{
@ -428,11 +462,14 @@ ul{
}
#send_flo_form{
width: min(26rem, 100%);
width: 100%;
height: 100%;
padding: 0 1rem;
gap: 0.3;
}
.form__section{
align-content: flex-start;
}
.label{
font-size: 0.9rem;
@ -452,16 +489,18 @@ ul{
#balance_card{
width: min(22rem, calc(100% - 2rem));
width: 100%;
padding: 1rem;
margin: 1rem;
margin-bottom: 1rem;
border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.04);
}
#balance_card__input{
margin-bottom: 1rem;
}
.balance_card__title{
font-size: 1.1rem;
font-size: 1rem;
font-weight: 500;
margin-bottom: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
@ -471,8 +510,9 @@ ul{
color: rgba(var(--text-color), 0.8);
}
#flo_balance{
font-size: 3rem;
margin: 2rem 0 1rem 0;
word-break: break-all;
font-size: 2rem;
margin-bottom: 1rem;
}
@ -506,7 +546,6 @@ ul{
min-height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-areas: 'header' 'page' 'nav';
background: rgba(var(--foreground-color), 1);
}
#main_navbar{
flex-direction: row;
@ -540,8 +579,14 @@ ul{
body{
align-items: center;
justify-content: center;
background: url(lighthouse.svg) no-repeat center;
background-size: cover;
#main_card{
background: rgba(var(--foreground-color), 1);
}
}
body[data-theme='dark']{
#main_card{
background: rgba(var(--text-color), 0.04);
}
}
sm-popup{
--width: 24rem;
@ -556,9 +601,8 @@ ul{
position: relative;
width: 80vw;
height: 80vh;
border-radius: 0.5rem;
border-radius: 0.2rem;
overflow: hidden;
backdrop-filter: blur(1rem);
grid-template-columns: 15rem 1fr;
grid-template-rows: auto 1fr;
grid-template-areas: 'header page' 'nav page';
@ -598,6 +642,8 @@ ul{
padding: 0 1rem 8rem 1.5rem;
}
#send_flo_form{
gap: 1rem;
grid-template-columns: 1fr 1fr;
padding: 0 1.5rem 1.5rem 1.5rem;
}
.settings__section{

65
new.html
View File

@ -87,7 +87,7 @@
<main id="main_card" class="grid">
<header id="main_header" class="grid align-center">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
<h5 class="header__company-name">RanhiMall</h5>
<h5 class="header__company-name">RanchiMall</h5>
<h4 class="header__app-name">FLO Web Wallet</h4>
</header>
<nav id="main_navbar" class="flex">
@ -103,10 +103,7 @@
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg>
<span class="navbar__item__title">Check balance</span>
</button>
<button id="generate_address_page_button" class="navbar__item" data-target-page="generate_address_page">
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
<span class="navbar__item__title">Generate address</span>
</button>
<button id="recover_flo_button" class="navbar__item hide-completely">
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
<span class="navbar__item__title">Recover FLO address</span>
@ -118,11 +115,25 @@
</nav>
<div id="page_container" class="flex">
<section id="dashboard_page" class="page hide-completely">
<ul id="flo_options" class="flex">
<li>
<button id="generate_address_button" class="flo-options__item flex direction-column align-center">
<svg class="icon option__icon coral" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
<span class="option__title">Generate<br>address</span>
</button>
</li>
<li>
<button id="recover_address_button" class="flo-options__item flex direction-column align-center">
<svg class="icon option__icon violet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14zm-7 5a5 5 0 1 0 .955 9.909L12 15a3 3 0 0 1 0-6c1.598 0 3 1.34 3 3h-2.5l2.128 4.254A5 5 0 0 0 12 7z"/></svg>
<span class="option__title">Recover<br>address</span>
</button>
</li>
</ul>
<header id="dashboard_page__header" class="page__header flex align-center">
<div id="base_header" class="flex space-between align-center">
<h4 class="header__title">Saved addresses</h4>
<button id="search_contacts_button" class="hide-on-desktop" onclick="searchBox('search_contacts', true)">
<svg class="icon icon-only search__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
<svg class="icon icon-only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
</button>
<div id="search_contacts" class="expanding-search flex align-center hide-on-mobile" data-trigger="search_contacts_button">
<button id="hide_search_contacts" class="back-button hide-on-desktop" onclick="searchBox('search_contacts', false)">
@ -166,19 +177,27 @@
<h4 class="header__title">Send FLO</h4>
</header>
<form id="send_flo_form" class="grid" onsubmit="return false">
<label class="label" for="sender_address">Sender's address</label>
<sm-input id="receiver_adddress" floID required></sm-input>
<label class="label" for="sender_address">Receiver's address</label>
<sm-input id="receiver_adddress" floID required></sm-input>
<label class="label" for="sent_amount">Amount</label>
<sm-input id="sent_amount" class="amount-input" type="number" min="0.0000001" step="0.0000001" required></sm-input>
<label class="label" for="sent_flo_data">FLO data</label>
<sm-textarea id="sent_flo_data" rows="4" required></sm-textarea>
<sm-button id="send_flo_button" variant="primary" disable>Send</sm-button>
<section class="form__section form__section--left grid">
<div id="balance_card">
<h4 class="balance_card__title">Balance</h4>
<h2 id="flo_balance">540052546541.024654</h2>
<p class="balance_card__description">Check your FLO balance.</p>
</div>
<label class="label" for="sender_address">Sender's address *</label>
<sm-input id="sent_adddress" floID required></sm-input>
</section>
<section class="form__section form__section--right grid">
<label class="label" for="sender_address">Receiver's address</label>
<sm-input id="receiver_adddress" floID required></sm-input>
<label class="label" for="sent_amount">Amount</label>
<sm-input id="sent_amount" class="amount-input" type="number" min="0.0000001" step="0.0000001" required></sm-input>
<label class="label" for="sent_flo_data">FLO data</label>
<sm-textarea id="sent_flo_data" rows="4" required></sm-textarea>
<sm-button id="send_flo_button" variant="primary" disable>Send</sm-button>
</section>
</form>
</section>
<section id="check_balance_page" class="page hide-completely">
@ -850,6 +869,7 @@
if(await confirmation('Delete selected?', 'Are you sure to delete all selected FLO addresses?', 'No', 'Yes')){
selectedContacts.forEach(contact => deleteContact(contact))
selectedContacts.clear()
selectedContactOptions({show: false})
notify('Deleted selected addresses', 'success')
}
}
@ -923,11 +943,12 @@
newName = 'Unknown'
this.value = newName
}
getRef('contact_popup__initial').textContent = newName.charAt(0)
clickedContact.card.querySelector('.contact-card__initial').textContent = newName.charAt(0)
clickedContact.card.querySelector('.contact-card__name').textContent = newName
floWebWallet.changeLabel(clickedContact.floID, newName)
.then(res => {
allContacts.set(clickedContact.floID, newName)
getRef('contact_popup__initial').textContent = newName.charAt(0)
clickedContact.card.querySelector('.contact-card__initial').textContent = newName.charAt(0)
clickedContact.card.querySelector('.contact-card__name').textContent = newName
notify('Name changed', 'success')
})
.catch(err => console.error(err))