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

continued UI overhaul

Browse Source
This commit is contained in:
sairaj mote 2021-02-25 20:00:11 +05:30
parent 055b07761e
commit 443925e4f5
5 changed files with 303 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

221
css/main.css
View File

@ -14,8 +14,7 @@
}
body {
--accent-color: #3D5AFE;
--secondary-color: #ffac2e;
--accent-color: #6300d4;
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255;
@ -27,8 +26,7 @@ body {
}
body[data-theme=dark] {
--accent-color:#657cff;
--secondary-color: #d60739;
--accent-color:#d7b5ff;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
@ -155,38 +153,35 @@ sm-textarea {
cursor: pointer;
}
.popup__header__title {
font-size: 1.1rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
.close-icon {
height: 2rem;
width: 2rem;
}
.home_page__section {
backdrop-filter: blur(1rem);
}
.home_page__section--left {
background-color: rgba(var(--foreground-color), 0.8);
}
.home_page__section--right {
overflow: hidden;
background-color: rgba(var(--foreground-color), 0.9);
#main_card {
height: 100%;
grid-row: 1/3;
}
.home_page__header {
gap: 0.2rem 1rem;
}
.home_page__header--left {
#main_header {
grid-area: header;
height: max-content;
gap: 0.2rem 0.5rem;
padding: 1.5rem 0.7rem 1.5rem 1rem;
grid-template-columns: 1fr auto;
grid-template-areas: "company setting" "app setting";
}
.home_page__header--right {
padding: 1.5rem 1rem;
#page_container {
grid-area: page;
}
.page {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header__company-name {
@ -209,36 +204,29 @@ sm-textarea {
padding: 0.8rem;
}
.header__settings-button__icon {
transform: rotate(90deg);
#main_navbar {
grid-area: nav;
}
.home_page__nav {
padding: 1.5rem 1rem;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.nav-button {
.navbar__item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 4rem;
}
.nav-button__icon {
height: 3rem;
width: 3rem;
padding: 0.8rem;
border-radius: 0.8rem;
margin-bottom: 0.8rem;
border-radius: 0.5rem;
}
.navbar__item--active .navbar__item__icon {
fill: var(--accent-color);
background: rgba(var(--foreground-color), 1);
}
.navbar__item--active .navbar__item__title {
color: var(--accent-color);
}
.nav-button__name {
.navbar__item__icon {
margin-right: 1rem;
fill: rgba(var(--text-color), 0.7);
}
.navbar__item__title {
font-size: 0.9rem;
font-weight: 500;
color: rgba(var(--text-color), 0.7);
@ -265,8 +253,14 @@ sm-textarea {
}
.header__title {
font-weight: 500;
color: rgba(var(--text-color), 0.7);
font-size: 1.1rem;
font-weight: 700;
color: rgba(var(--text-color), 0.8);
}
#send_flo_form {
padding: 0 1.5rem;
gap: 1rem;
}
#search_contacts {
@ -313,13 +307,14 @@ sm-textarea {
}
#contacts_container {
display: grid;
gap: 1rem;
display: flex;
flex-wrap: wrap;
height: 100%;
align-content: flex-start;
min-height: 0;
overflow-y: auto;
list-style: none;
padding: 0 1rem 6rem 1rem;
align-content: flex-start;
padding: 0 0 6rem 1rem;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
@ -327,10 +322,12 @@ sm-textarea {
position: relative;
overflow: hidden;
display: flex;
width: 100%;
width: calc(50% - 1rem);
flex-direction: column;
padding: 1rem;
min-height: 8rem;
align-items: center;
margin: 0 1rem 1rem 0;
padding: 1.5rem 1rem;
flex-shrink: 0;
cursor: pointer;
align-self: flex-start;
justify-content: center;
@ -339,13 +336,16 @@ sm-textarea {
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
}
.contact-hidden-options {
position: absolute;
width: 100%;
top: 0;
padding: 0.5rem 0.8rem;
}
.contact-card__checkbox {
--border-radius: 0.5rem;
--border-color: rgba(var(--text-color), 0.6);
position: absolute;
top: 0;
right: 0;
margin: 1rem;
}
.contact-card__initial {
@ -357,13 +357,14 @@ sm-textarea {
text-align: center;
user-select: none;
border-radius: 1rem;
margin-bottom: 1.5rem;
margin: 1.5rem 0;
align-items: center;
justify-content: center;
background-color: rgba(var(--text-color), 0.1);
}
.contact-card__name {
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -372,11 +373,6 @@ sm-textarea {
color: rgba(var(--text-color), 0.8);
}
.contact__grid {
gap: 1rem;
grid-template-columns: 1fr auto;
}
.contact-card__more {
padding: 0.4rem;
}
@ -392,27 +388,41 @@ sm-textarea {
margin: 1.5rem;
}
.page__header {
padding: 1rem 1rem 2rem 1rem;
}
.page__title {
font-size: 1.1rem;
}
@media all and (max-width: 640px) {
#main_card {
body {
min-height: 100vh;
}
.fab {
position: fixed;
#main_card {
min-height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-areas: "header" "page" "nav";
background: rgba(var(--foreground-color), 0.9);
}
#home_page {
height: 100%;
grid-template-rows: auto 1fr;
#main_navbar {
flex-direction: row;
}
.home_page__section--right {
align-content: flex-start;
.navbar__item {
flex: 1;
flex-direction: column;
}
.home_page__nav {
padding: 0.5rem 1rem 2rem 1rem;
grid-template-columns: repeat(4, 1fr);
.navbar__item__icon {
margin: 0 0 0.5rem 0;
}
.navbar__item__icon {
margin: 0 0 0.5rem 0;
}
}
@media all and (min-width: 640px) {
@ -430,40 +440,51 @@ sm-textarea {
}
#main_card {
position: relative;
width: 80vw;
height: 80vh;
border-radius: 0.5rem;
overflow: hidden;
backdrop-filter: blur(1rem);
grid-template-columns: 15rem 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas: "header page" "nav page";
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
background: rgba(var(--foreground-color), 0.9);
}
#home_page {
#main_header {
padding: 1.5rem 1.2rem 1.5rem 2rem;
}
#main_navbar {
flex-direction: column;
height: 100%;
overflow-y: auto;
grid-template-columns: 20rem 1fr;
padding: 0 1rem;
align-content: flex-start;
}
.home_page__section--left {
border-radius: 0.5rem 0 0 0.5rem;
#page_container {
position: relative;
grid-row: 1/3;
}
.home_page__section--right {
grid-template-rows: auto 1fr;
border-radius: 0 0.5rem 0.5rem 0;
box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
#page_container::after {
content: "";
position: absolute;
left: 0;
height: 65%;
width: 1px;
background: rgba(var(--text-color), 0.2);
top: 50%;
transform: translateY(-50%);
}
.home_page__header--left {
padding: 1.8rem 1.7rem 2rem 2.5rem;
}
.home_page__header--right {
padding: 2rem 2.5rem;
}
.home_page__nav {
padding: 0 2.5rem;
.page__header {
padding: 2rem 1.5rem;
}
#contacts_container {
padding: 0 2.5rem 8rem 2.5rem;
padding: 0 1rem 8rem 2rem;
}
#add_contact_button {
@ -477,11 +498,15 @@ sm-textarea {
width: 65vw;
height: 85vh;
}
.contact-card {
width: calc(33.33% - 1rem);
}
}
@media all and (min-width: 1920px) {
#main_card {
width: 65vw;
height: 70vh;
width: 60vw;
height: 65vh;
}
}
@media (any-hover: hover) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

227
css/main.scss
View File

@ -12,8 +12,7 @@
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body{
--accent-color: #3D5AFE;
--secondary-color: #ffac2e;
--accent-color: #6300d4;
--text-color: 17, 17, 17;
--text-color-light: 100, 100, 100;
--foreground-color: 255, 255, 255;
@ -24,8 +23,7 @@ body{
background-size: cover;
}
body[data-theme='dark']{
--accent-color:#657cff;
--secondary-color: #d60739;
--accent-color:#d7b5ff;
--text-color: 240, 240, 240;
--text-color-light: 170, 170, 170;
--foreground-color: 20, 20, 20;
@ -129,38 +127,31 @@ sm-textarea{
padding: 0.5rem;
cursor: pointer;
}
.popup__header__title{
font-size: 1.1rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
.close-icon{
height: 2rem;
width: 2rem;
}
#main_card{
height: 100%;
grid-row: 1/3;
}
.home_page__section{
backdrop-filter: blur(1rem);
&--left{
background-color: rgba(var(--foreground-color), 0.8);
}
&--right{
overflow: hidden;
background-color: rgba(var(--foreground-color), 0.9);
}
#main_header{
grid-area: header;
height: max-content;
gap: 0.2rem 0.5rem;
padding: 1.5rem 0.7rem 1.5rem 1rem;
grid-template-columns: 1fr auto;
grid-template-areas: 'company setting' 'app setting';
}
.home_page__header{
gap: 0.2rem 1rem;
&--left{
padding: 1.5rem 0.7rem 1.5rem 1rem;
grid-template-columns: 1fr auto;
grid-template-areas: 'company setting' 'app setting';
}
&--right{
padding: 1.5rem 1rem;
}
#page_container{
grid-area: page;
}
.page{
position: relative;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.header__company-name{
grid-area: company;
@ -179,34 +170,30 @@ sm-textarea{
grid-area: setting;
padding: 0.8rem;
}
.header__settings-button__icon{
transform: rotate(90deg);
#main_navbar{
grid-area: nav;
}
.home_page__nav{
padding: 1.5rem 1rem;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
.nav-button{
.navbar__item{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 4rem;
padding: 0.8rem;
border-radius: 0.5rem;
&--active{
.navbar__item__icon{
fill: var(--accent-color);
}
.navbar__item__title{
color: var(--accent-color);
}
}
}
.nav-button__icon{
height: 3rem;
width: 3rem;
padding: 0.8rem;
border-radius: 0.8rem;
margin-bottom: 0.8rem;
fill: var(--accent-color);
background: rgba(var(--foreground-color), 1);
.navbar__item__icon{
margin-right: 1rem;
fill: rgba(var(--text-color), 0.7);
}
.nav-button__name{
.navbar__item__title{
font-size: 0.9rem;
font-weight: 500;
color: rgba(var(--text-color), 0.7);
@ -227,13 +214,21 @@ sm-textarea{
fill: white;
}
#base_header{
width: 100%;
}
.header__title{
font-weight: 500;
color: rgba(var(--text-color), 0.7);
font-size: 1.1rem;
font-weight: 700;
color: rgba(var(--text-color), 0.8);
}
#send_flo_form{
padding: 0 1.5rem;
gap: 1rem;
}
#search_contacts{
width: 14rem;
--padding: 0.5rem 0.6rem;
@ -274,23 +269,26 @@ sm-textarea{
}
#contacts_container{
display: grid;
gap: 1rem;
display: flex;
flex-wrap: wrap;
height: 100%;
align-content: flex-start;
min-height: 0;
overflow-y: auto;
list-style: none;
padding: 0 1rem 6rem 1rem;
align-content: flex-start;
padding: 0 0 6rem 1rem;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.contact-card{
position: relative;
overflow: hidden;
display: flex;
width: 100%;
width: calc(50% - 1rem);
flex-direction: column;
padding: 1rem;
min-height: 8rem;
align-items: center;
margin: 0 1rem 1rem 0;
padding: 1.5rem 1rem;
flex-shrink: 0;
cursor: pointer;
align-self: flex-start;
justify-content: center;
@ -298,13 +296,15 @@ sm-textarea{
background: rgba(var(--foreground-color), 1);
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
}
.contact-hidden-options{
position: absolute;
width: 100%;
top: 0;
padding: 0.5rem 0.8rem;
}
.contact-card__checkbox{
--border-radius: 0.5rem;
--border-color: rgba(var(--text-color), 0.6);
position: absolute;
top: 0;
right: 0;
margin: 1rem;
}
.contact-card__initial{
width: 3rem;
@ -315,12 +315,13 @@ sm-textarea{
text-align: center;
user-select: none;
border-radius: 1rem;
margin-bottom: 1.5rem;
margin: 1.5rem 0;
align-items: center;
justify-content: center;
background-color: rgba(var(--text-color), 0.1);
}
.contact-card__name{
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -328,10 +329,6 @@ sm-textarea{
font-size: 1rem;
color: rgba(var(--text-color), 0.8);
}
.contact__grid{
gap: 1rem;
grid-template-columns: 1fr auto;
}
.contact-card__more{
padding: 0.4rem;
}
@ -346,24 +343,36 @@ sm-textarea{
margin: 1.5rem;
}
.page__header{
padding: 1rem 1rem 2rem 1rem;
}
.page__title{
font-size: 1.1rem;
}
// mobile only styles
@media all and (max-width: 640px){
#main_card{
body{
min-height: 100vh;
}
.fab{
position: fixed;
#main_card{
min-height: 100%;
grid-template-rows: auto 1fr auto;
grid-template-areas: 'header' 'page' 'nav';
background: rgba(var(--foreground-color), 0.9);
}
#home_page{
height: 100%;
grid-template-rows: auto 1fr;
#main_navbar{
flex-direction: row;
}
.home_page__section--right{
align-content: flex-start;
.navbar__item{
flex: 1;
flex-direction: column;
}
.home_page__nav{
padding: 0.5rem 1rem 2rem 1rem;
grid-template-columns: repeat(4, 1fr);
.navbar__item__icon{
margin: 0 0 0.5rem 0;
}
.navbar__item__icon{
margin: 0 0 0.5rem 0;
}
}
@ -380,39 +389,46 @@ sm-textarea{
padding: 1rem 1.5rem 0 1rem;
}
#main_card{
position: relative;
width: 80vw;
height: 80vh;
border-radius: 0.5rem;
overflow: hidden;
backdrop-filter: blur(1rem);
grid-template-columns: 15rem 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas: 'header page' 'nav page';
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
background: rgba(var(--foreground-color), 0.9);
}
#home_page{
#main_header{
padding: 1.5rem 1.2rem 1.5rem 2rem;
}
#main_navbar{
flex-direction: column;
height: 100%;
overflow-y: auto;
grid-template-columns: 20rem 1fr;
padding: 0 1rem;
align-content: flex-start;
}
.home_page__section{
&--left{
border-radius: 0.5rem 0 0 0.5rem;
}
&--right{
grid-template-rows: auto 1fr;
border-radius: 0 0.5rem 0.5rem 0;
box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
#page_container{
position: relative;
grid-row: 1/3;
&::after{
content: '';
position: absolute;
left: 0;
height: 65%;
width: 1px;
background: rgba(var(--text-color), 0.2);
top: 50%;
transform: translateY(-50%);
}
}
.home_page__header{
&--left{
padding: 1.8rem 1.7rem 2rem 2.5rem;
}
&--right{
padding: 2rem 2.5rem;
}
}
.home_page__nav{
padding: 0 2.5rem;
.page__header{
padding: 2rem 1.5rem;
}
#contacts_container{
padding: 0 2.5rem 8rem 2.5rem;
padding: 0 1rem 8rem 2rem;
}
#add_contact_button{
right: 0;
@ -425,11 +441,14 @@ sm-textarea{
width: 65vw;
height: 85vh;
}
.contact-card{
width: calc(33.33% - 1rem);
}
}
@media all and (min-width: 1920px){
#main_card{
width: 65vw;
height: 70vh;
width: 60vw;
height: 65vh;
}
}
@media (any-hover: hover){

125
new.html
View File

@ -35,14 +35,6 @@
</sm-popup>
<sm-notifications id="notification_drawer"></sm-notifications>
<!-- Popups -->
<sm-popup id="check_balance_popup">
<h2 id="current_balance">0</h2>
<sm-input placeholder="FLO address" floID required></sm-input>
<sm-button variant="primary" disable>Check</sm-button>
</sm-popup>
<sm-popup id="contact_popup">
<h3 id="contact_popup__initial">S</h3>
<h4 id="contact_popup__name">Sairaj Mote</h4>
@ -51,73 +43,41 @@
</ul>
</sm-popup>
<sm-popup id="send_flo_popup" open>
<header slot="header" class="popup__header">
<button class="popup__header__close">
<svg class="icon close-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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
<h4 class="popup__header__title">Send FLO</h4>
</header>
<sm-input id="sender_adddress" placeholder="Sender's address" animate></sm-input>
<sm-input id="receiver_adddress" placeholder="Receiver's address" animate></sm-input>
<sm-input id="sent_amount" type="number" placeholder="Amount" animate></sm-input>
<sm-textarea id="sent_flo_data" rows="4" placeholder="FLO data"></sm-textarea>
<sm-button variant="primary" disable>Send</sm-button>
</sm-popup>
<!-- -->
<main id="main_card">
<div id="home_page" class="page grid">
<section class="home_page__section home_page__section--left">
<header class="home_page__header home_page__header--left grid align-center">
<h5 class="header__company-name">RanhiMall</h5>
<h4 class="header__app-name">FLO Web Wallet</h4>
<button class="header__settings-button" title="settings">
<svg class="icon header__settings-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</g>
</svg>
</button>
</header>
<nav class="home_page__nav grid">
<button id="send_flo_button" class="nav-button">
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/>
</g>
</svg>
<span class="nav-button__name">Send FLO</span>
</button>
<button id="check_balance_button" onclick="showPopup('check_balance_popup')" class="nav-button">
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M22 6h-7a6 6 0 1 0 0 12h7v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2zm-7 2h8v8h-8a4 4 0 1 1 0-8zm0 3v2h3v-2h-3z"/>
</g>
</svg>
<span class="nav-button__name">Check balance</span>
</button>
<button id="get_flo_button" class="nav-button">
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0H24V24H0z"/><path d="M6 21.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5c1.585 0 2.924 1.054 3.355 2.5H15v-2h2V9.242L14.757 7H9V9H3V3h6v2h5.757L18 1.756 22.243 6 19 9.241V15L21 15v6h-6v-2H9.355c-.43 1.446-1.77 2.5-3.355 2.5zm0-5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm13 .5h-2v2h2v-2zM18 4.586L16.586 6 18 7.414 19.414 6 18 4.586zM7 5H5v2h2V5z"/></svg>
<span class="nav-button__name">Get FLO address</span>
</button>
<button id="recover_flo_button" class="nav-button">
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g>
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M8 7v4L2 6l6-5v4h5a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H8z"/>
</g>
</svg>
<span class="nav-button__name">Recover FLO address</span>
</button>
</nav>
</section>
<section class="home_page__section home_page__section--right grid">
<header class="home_page__header home_page__header--right flex direction-column">
<main id="main_card" class="grid">
<header id="main_header" class="grid align-center">
<h5 class="header__company-name">RanhiMall</h5>
<h4 class="header__app-name">FLO Web Wallet</h4>
<button class="header__settings-button" title="settings">
<svg class="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="M5.334 4.545a9.99 9.99 0 0 1 3.542-2.048A3.993 3.993 0 0 0 12 3.999a3.993 3.993 0 0 0 3.124-1.502 9.99 9.99 0 0 1 3.542 2.048 3.993 3.993 0 0 0 .262 3.454 3.993 3.993 0 0 0 2.863 1.955 10.043 10.043 0 0 1 0 4.09c-1.16.178-2.23.86-2.863 1.955a3.993 3.993 0 0 0-.262 3.455 9.99 9.99 0 0 1-3.542 2.047A3.993 3.993 0 0 0 12 20a3.993 3.993 0 0 0-3.124 1.502 9.99 9.99 0 0 1-3.542-2.047 3.993 3.993 0 0 0-.262-3.455 3.993 3.993 0 0 0-2.863-1.954 10.043 10.043 0 0 1 0-4.091 3.993 3.993 0 0 0 2.863-1.955 3.993 3.993 0 0 0 .262-3.454zM13.5 14.597a3 3 0 1 0-3-5.196 3 3 0 0 0 3 5.196z"/></svg>
</button>
</header>
<nav id="main_navbar" class="flex">
<button id="home_button" class="navbar__item navbar__item--active">
<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="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
<span class="navbar__item__title">Dashboard</span>
</button>
<button id="send_flo_button" class="navbar__item">
<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="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
<span class="navbar__item__title">Send FLO</span>
</button>
<button id="check_balance_button" class="navbar__item">
<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="get_flo_button" class="navbar__item">
<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">Get FLO 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>
</button>
</nav>
<div id="page_container" class="flex">
<section class="page">
<header class="page__header flex direction-column">
<div id="base_header" class="flex space-between align-center">
<h4 class="header__title">Saved addresses</h4>
<sm-input id="search_contacts" placeholder="Search" type="search">
@ -147,14 +107,14 @@
</header>
<ul id="contacts_container">
<li class="contact-card" data-flo-id="f1234">
<sm-checkbox class="contact-card__checkbox"></sm-checkbox>
<h3 class="contact-card__initial">S</h3>
<div class="grid contact__grid align-center">
<h4 class="contact-card__name">Sairaj</h4>
<button class="contact-card__more">
<div class="contact-hidden-options flex space-between align-center">
<sm-checkbox class="contact-card__checkbox"></sm-checkbox>
<button class="contact-card__more" aria-label="Contact details">
<svg class="icon more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
</button>
</div>
<h3 class="contact-card__initial">S</h3>
<h4 class="contact-card__name">Sairaj</h4>
</li>
</ul>
<button id="add_contact_button" class="fab" title="Add FLO address as a contact to monitor">
@ -166,6 +126,15 @@
</svg>
</button>
</section>
<section id="send_flo_page" class="page hide-completely">
<form id="send_flo_form" class="grid" onsubmit="return false">
<sm-input id="sender_adddress" placeholder="Sender's address" required></sm-input>
<sm-input id="receiver_adddress" placeholder="Receiver's address" required></sm-input>
<sm-input id="sent_amount" class="amount-input" type="number" step="0.0000001" placeholder="Amount" required></sm-input>
<sm-textarea id="sent_flo_data" placeholder="FLO data" rows="4" required></sm-textarea>
<sm-button variant="primary" disable>Send</sm-button>
</form>
</section>
</div>
</main>
<script src="script/components.js"></script>

13
script/components.js
View File

@ -195,6 +195,7 @@ border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
--font-size: 1rem;
--border-radius: 0.3rem;
--padding: 0.7rem 1rem;
--background: rgba(var(--text-color), 0.06);
@ -262,7 +263,7 @@ border: none;
.label {
opacity: .7;
font-weight: 400;
font-size: 1rem;
font-size: var(--font-size);
position: absolute;
top: 0;
-webkit-transition: -webkit-transform 0.3s;
@ -300,7 +301,7 @@ border: none;
flex: 1;
}
input{
font-size: 1rem;
font-size: var(--font-size);
border: none;
background: transparent;
outline: none;
@ -510,13 +511,17 @@ customElements.define('sm-input',
this.max = parseInt(maxValue)
}
if (this.hasAttribute('minlength')) {
let minValue = this.getAttribute('minlength')
const minValue = this.getAttribute('minlength')
this.input.setAttribute('minlength', minValue)
}
if (this.hasAttribute('maxlength')) {
let maxValue = this.getAttribute('maxlength')
const maxValue = this.getAttribute('maxlength')
this.input.setAttribute('maxlength', maxValue)
}
if (this.hasAttribute('step')) {
const steps = this.getAttribute('step')
this.input.setAttribute('step', steps)
}
if (this.hasAttribute('pattern')) {
this.input.setAttribute('pattern', this.getAttribute('pattern'))
}