v2.8.5
feat: Add expandable search field for contacts
This commit is contained in:
sairaj mote
parent
64f2690c23
commit
3e33385646
175
css/main.css
175
css/main.css
@ -26,16 +26,12 @@ body {
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color:#d7b5ff;
|
||||
--accent-color:#c64aff;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
body[data-theme=dark] .contact-card {
|
||||
margin: 0.2rem 0;
|
||||
box-shadow: 0 0.1rem 0.5rem rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
@ -57,6 +53,10 @@ sm-textarea {
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -98,6 +98,13 @@ sm-textarea {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
@ -162,8 +169,68 @@ sm-textarea {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.initial {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#contact_popup {
|
||||
--body-padding: 0;
|
||||
}
|
||||
|
||||
#contact_popup__initial {
|
||||
align-self: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
padding: 1rem;
|
||||
margin: 4rem 0 1rem 0;
|
||||
font-size: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
#contact_popup__name {
|
||||
align-self: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.flo-id-grid {
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
#contact_popup__options {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.contact__option {
|
||||
font-size: 1rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
.button__title {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#main_card {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-row: 1/3;
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
@ -214,6 +281,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
.navbar__item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
@ -258,6 +326,7 @@ sm-textarea {
|
||||
}
|
||||
|
||||
#base_header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -267,13 +336,7 @@ sm-textarea {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#send_flo_form {
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#search_contacts {
|
||||
width: 14rem;
|
||||
z #search_contacts {
|
||||
--padding: 0.5rem 0.6rem;
|
||||
--background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
@ -282,8 +345,8 @@ sm-textarea {
|
||||
height: 1.2rem;
|
||||
}
|
||||
|
||||
#selected_contact_options {
|
||||
list-style: none;
|
||||
.expanding-search {
|
||||
width: 14rem;
|
||||
}
|
||||
|
||||
.contact-option:not(:last-of-type) {
|
||||
@ -318,9 +381,8 @@ sm-textarea {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
min-height: 0;
|
||||
align-content: flex-start;
|
||||
padding: 0 0 6rem 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
@ -331,17 +393,19 @@ sm-textarea {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: calc(50% - 1rem);
|
||||
aspect-ratio: 1/1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 1rem 1rem 0;
|
||||
padding: 1.5rem 1rem;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-self: flex-start;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||
background: rgba(var(--foreground-color), 0.6);
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@ -360,23 +424,14 @@ sm-textarea {
|
||||
.contact-card__initial {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
border-radius: 1rem;
|
||||
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;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -405,11 +460,49 @@ sm-textarea {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#send_flo_form {
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#balance_card {
|
||||
width: min(22rem, calc(100% - 2rem));
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
#balance_card__input {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.balance_card__title {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.balance_card__description {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
#flo_balance {
|
||||
font-size: 3rem;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#main_card {
|
||||
min-height: 100%;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas: "header" "page" "nav";
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
@ -428,6 +521,21 @@ sm-textarea {
|
||||
.navbar__item__icon {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
#dashboard_page__header {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.expanding-search {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 640px) {
|
||||
body {
|
||||
@ -441,6 +549,10 @@ sm-textarea {
|
||||
--width: 24rem;
|
||||
}
|
||||
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup__header {
|
||||
padding: 1rem 1.5rem 0 1rem;
|
||||
}
|
||||
@ -502,15 +614,16 @@ sm-textarea {
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1080px) {
|
||||
.contact-card {
|
||||
width: calc(33.33% - 1rem);
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1280px) {
|
||||
#main_card {
|
||||
width: 65vw;
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
width: calc(33.33% - 1rem);
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1920px) {
|
||||
#main_card {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
161
css/main.scss
161
css/main.scss
@ -23,15 +23,11 @@ body{
|
||||
height: calc(100%);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color:#d7b5ff;
|
||||
--accent-color:#c64aff;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
.contact-card{
|
||||
margin: 0.2rem 0;
|
||||
box-shadow: 0 0.1rem 0.5rem rgba(var(--text-color), 0.1);
|
||||
}
|
||||
}
|
||||
button{
|
||||
position: relative;
|
||||
@ -50,6 +46,9 @@ sm-input,
|
||||
sm-textarea{
|
||||
--border-radius: 0.5rem;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
@ -81,6 +80,12 @@ sm-textarea{
|
||||
.no-transformations{
|
||||
transform: none !important;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ripple{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
@ -134,8 +139,63 @@ sm-textarea{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
.initial{
|
||||
display: flex;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
#contact_popup{
|
||||
--body-padding: 0;
|
||||
}
|
||||
#contact_popup__initial{
|
||||
align-self: center;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
padding: 1rem;
|
||||
margin: 4rem 0 1rem 0;
|
||||
font-size: 2rem;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
#contact_popup__name{
|
||||
align-self: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.flo-id-grid{
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#contact__flo_id{
|
||||
}
|
||||
.copy-button{
|
||||
padding: 0.4rem;
|
||||
}
|
||||
#contact_popup__options{
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.contact__option{
|
||||
font-size: 1rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.button__icon{
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
.button__title{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
|
||||
#main_card{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-row: 1/3;
|
||||
background: rgba(var(--foreground-color), 0.9);
|
||||
}
|
||||
@ -178,6 +238,7 @@ sm-textarea{
|
||||
grid-area: nav;
|
||||
}
|
||||
.navbar__item{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
@ -221,6 +282,7 @@ sm-textarea{
|
||||
height: 7.5rem;
|
||||
}
|
||||
#base_header{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.header__title{
|
||||
@ -228,22 +290,22 @@ sm-textarea{
|
||||
font-weight: 700;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#send_flo_form{
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
z
|
||||
|
||||
|
||||
#search_contacts{
|
||||
width: 14rem;
|
||||
--padding: 0.5rem 0.6rem;
|
||||
--background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.search__icon{
|
||||
height: 1.2rem;
|
||||
}
|
||||
.expanding-search{
|
||||
width: 14rem;
|
||||
}
|
||||
#selected_contact_options{
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
.contact-option{
|
||||
&:not(:last-of-type){
|
||||
@ -276,9 +338,8 @@ sm-textarea{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
min-height: 0;
|
||||
align-content: flex-start;
|
||||
padding: 0 0 6rem 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
@ -288,17 +349,20 @@ sm-textarea{
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: calc(50% - 1rem);
|
||||
aspect-ratio: 1/1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 1rem 1rem 0;
|
||||
padding: 1.5rem 1rem;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-self: flex-start;
|
||||
justify-content: center;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||
background: rgba(var(--foreground-color), 0.6);
|
||||
// box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.contact-hidden-options{
|
||||
@ -314,22 +378,13 @@ sm-textarea{
|
||||
.contact-card__initial{
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
border-radius: 1rem;
|
||||
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;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -355,12 +410,47 @@ sm-textarea{
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
#send_flo_form{
|
||||
padding: 0 1rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#balance_card{
|
||||
width: min(22rem, calc(100% - 2rem));
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
#balance_card__input{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.balance_card__title{
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.balance_card__description{
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
#flo_balance{
|
||||
font-size: 3rem;
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
|
||||
// mobile only styles
|
||||
@media all and (max-width: 640px){
|
||||
.hide-on-mobile{
|
||||
display: none;
|
||||
}
|
||||
#main_card{
|
||||
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;
|
||||
@ -375,6 +465,18 @@ sm-textarea{
|
||||
.navbar__item__icon{
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
#dashboard_page__header{
|
||||
padding-top: 0;
|
||||
}
|
||||
.expanding-search{
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
}
|
||||
.back-button{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// desktop only styles
|
||||
@ -388,6 +490,9 @@ sm-textarea{
|
||||
sm-popup{
|
||||
--width: 24rem;
|
||||
}
|
||||
.hide-on-desktop{
|
||||
display: none;
|
||||
}
|
||||
.popup__header{
|
||||
padding: 1rem 1.5rem 0 1rem;
|
||||
}
|
||||
@ -441,14 +546,16 @@ sm-textarea{
|
||||
margin: 2rem;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1080px){
|
||||
.contact-card{
|
||||
width: calc(33.33% - 1rem);
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1280px){
|
||||
#main_card{
|
||||
width: 65vw;
|
||||
height: 85vh;
|
||||
}
|
||||
.contact-card{
|
||||
width: calc(33.33% - 1rem);
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 1920px){
|
||||
#main_card{
|
||||
|
||||
81
new.html
81
new.html
@ -36,10 +36,27 @@
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
|
||||
<sm-popup id="contact_popup">
|
||||
<h3 id="contact_popup__initial">S</h3>
|
||||
<h4 id="contact_popup__name">Sairaj Mote</h4>
|
||||
<h3 id="contact_popup__initial" class="initial">S</h3>
|
||||
<text-field id="contact_popup__name" value="Sairaj mote"></text-field>
|
||||
<div class="grid flo-id-grid align-center">
|
||||
<p id="contact__flo_id" class="overflow-ellipsis">FFS5hFXG7DBtdgzrLwixZLpenAmsCKRddm</p>
|
||||
<button class="flex align-center copy-button" title="Copy FLO address">
|
||||
<svg class="icon button__icon copy-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="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<ul id="contact_popup__options">
|
||||
|
||||
<li>
|
||||
<button class="contact__option flex align-center full-width">
|
||||
<svg class="icon button__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="button__title">Send FLO</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="contact__option flex align-center full-width">
|
||||
<svg class="icon button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.67,3.25H15.26L14,2H10L8.74,3.25H3.67V4.92H5.33V20.33A1.67,1.67,0,0,0,7,22H17a1.67,1.67,0,0,0,1.67-1.67V4.92h1.66V3.25Z"/></svg>
|
||||
<span class="button__title">Delete</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</sm-popup>
|
||||
|
||||
@ -62,7 +79,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="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">
|
||||
<button id="check_balance_page_button" class="navbar__item" data-target-page="check_balance_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="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>
|
||||
@ -80,14 +97,16 @@
|
||||
<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 class="back-button">
|
||||
<button id="search_contacts_button" class="back-button hide-on-desktop" onclick="searchBox('search_contacts', true)">
|
||||
<svg class="icon 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>
|
||||
</button>
|
||||
<div class="expanding-search flex align-center hide-completely">
|
||||
<button class="back-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)">
|
||||
<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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
|
||||
</button>
|
||||
<sm-input id="search_contacts" placeholder="Search" type="search"></sm-input>
|
||||
<sm-input id="search_contacts__input" placeholder="Search" type="search">
|
||||
<svg slot="icon" class="icon 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>
|
||||
</sm-input>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="selected_contact_options" class="flex align-center full-width hide-completely">
|
||||
@ -97,12 +116,6 @@
|
||||
<span id="selected_contacts_total" class="contact-option__name"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="contact-option">
|
||||
<button class="contact-option__button">
|
||||
<svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/></svg>
|
||||
<span class="contact-option__name">Edit</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="contact-option">
|
||||
<button class="contact-option__button">
|
||||
<svg class="icon contact-option__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.67,3.25H15.26L14,2H10L8.74,3.25H3.67V4.92H5.33V20.33A1.67,1.67,0,0,0,7,22H17a1.67,1.67,0,0,0,1.67-1.67V4.92h1.66V3.25Z"/></svg>
|
||||
@ -112,14 +125,14 @@
|
||||
</ul>
|
||||
</header>
|
||||
<ul id="contacts_container">
|
||||
<li class="contact-card" data-flo-id="f1234">
|
||||
<li class="contact-card overflow-ellipsis" data-flo-id="f1234">
|
||||
<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>
|
||||
<h3 class="initial contact-card__initial">S</h3>
|
||||
<h4 class="contact-card__name">Sairaj</h4>
|
||||
</li>
|
||||
</ul>
|
||||
@ -141,6 +154,17 @@
|
||||
<sm-button variant="primary" disable>Send</sm-button>
|
||||
</form>
|
||||
</section>
|
||||
<section id="check_balance_page" class="page hide-completely">
|
||||
<div id="balance_card" class="flex direction-column">
|
||||
<h4 class="balance_card__title">Balance</h4>
|
||||
<p class="balance_card__description">Enter FLO address and check your FLO crypto balance</p>
|
||||
<h2 id="flo_balance">0</h2>
|
||||
<form onsubmit="return false">
|
||||
<sm-input id="balance_card__input" placeholder="FLO address" required></sm-input>
|
||||
<sm-button variant="primary" disable>Check balance</sm-button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<script src="script/components.js"></script>
|
||||
@ -744,6 +768,31 @@
|
||||
selectedContacts.clear()
|
||||
}
|
||||
|
||||
function searchBox(inputId, expand){
|
||||
const options = {
|
||||
duration: 150,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
}
|
||||
const triggerButtonID = getRef(inputId).dataset.trigger
|
||||
if(expand){
|
||||
getRef(triggerButtonID).animate(slideOutLeft, options)
|
||||
.onfinish = () => {
|
||||
getRef(triggerButtonID).classList.add('hide-completely')
|
||||
getRef(inputId).classList.remove('hide-on-mobile')
|
||||
getRef(inputId).animate(slideInLeft, options)
|
||||
}
|
||||
}
|
||||
else{
|
||||
getRef(inputId).animate(slideOutRight, options)
|
||||
.onfinish = () => {
|
||||
getRef(inputId).classList.add('hide-on-mobile')
|
||||
getRef(triggerButtonID).classList.remove('hide-completely')
|
||||
getRef(triggerButtonID).animate(slideInRight, options)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
//UI for webWallet
|
||||
|
||||
@ -208,19 +208,14 @@ border: none;
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
fill: none;
|
||||
height: 1.6rem;
|
||||
width: 1.6rem;
|
||||
padding: 0.5rem;
|
||||
stroke: rgba(var(--text-color), 0.7);
|
||||
stroke-width: 10;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
fill: rgba(var(--text-color), 0.6);
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
border-radius: 1rem;
|
||||
stroke-linejoin: round;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:host(.round) .input{
|
||||
border-radius: 10rem;
|
||||
}
|
||||
@ -364,11 +359,7 @@ input{
|
||||
<input/>
|
||||
<div part="placeholder" class="label"></div>
|
||||
</div>
|
||||
<svg class="icon clear hide" viewBox="0 0 64 64">
|
||||
<title>clear</title>
|
||||
<line x1="64" y1="0" x2="0" y2="64"/>
|
||||
<line x1="64" y1="64" x2="0" y2="0"/>
|
||||
</svg>
|
||||
<svg class="icon clear hide" 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 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
|
||||
</label>
|
||||
<div class="feedback-text"></div>
|
||||
</div>
|
||||
@ -3631,22 +3622,20 @@ textField.innerHTML = `
|
||||
}
|
||||
.icon-container{
|
||||
position: relative;
|
||||
margin-left: 0.5rem;
|
||||
margin-left: 0.8rem;
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
fill: none;
|
||||
stroke-width: 8;
|
||||
stroke: rgba(var(--text-color), 1);
|
||||
fill: rgba(var(--text-color), 0.7);
|
||||
height: 1.8rem;
|
||||
width: 1.8rem;
|
||||
padding: 0.4rem;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
.save-button{
|
||||
padding: 0;
|
||||
}
|
||||
.hide{
|
||||
display: none;
|
||||
@ -3655,13 +3644,13 @@ textField.innerHTML = `
|
||||
<div class="text-field">
|
||||
<div class="text" part="text"></div>
|
||||
<div class="icon-container">
|
||||
<svg class="edit-button icon" viewBox="0 0 64 64">
|
||||
<svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>Edit</title>
|
||||
<path d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9"/>
|
||||
<path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>
|
||||
</svg>
|
||||
<svg class="save-button icon hide" viewBox="0 0 64 64">
|
||||
<svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<title>Save</title>
|
||||
<polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
|
||||
<path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user