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

Merge branch 'master' into dev

Browse Source
This commit is contained in:
Sai Raj 2023-05-12 01:22:39 +05:30 committed by GitHub
commit 5c2ce4f03e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 733 additions and 536 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
css/main.css
View File

@ -112,7 +112,6 @@ button,
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.3rem; border-radius: 0.3rem;
justify-content: center; justify-content: center;
text-transform: capitalize;
} }
button:focus-visible, button:focus-visible,
.button:focus-visible { .button:focus-visible {
@ -497,7 +496,7 @@ h3 {
} }
.observe-empty-state:empty { .observe-empty-state:empty {
display: none; display: none !important;
} }
.observe-empty-state:not(:empty) + .empty-state { .observe-empty-state:not(:empty) + .empty-state {
@ -709,13 +708,10 @@ h3 {
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
#home { #contacts > :first-child {
padding: 0;
}
#home > :first-child {
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
padding: 0.5rem 1.5rem 4rem 1.5rem; padding-bottom: 4rem;
} }
#primary_actions_wrapper { #primary_actions_wrapper {
@ -738,6 +734,67 @@ h3 {
fill: var(--accent-color); fill: var(--accent-color);
} }
#search {
position: relative;
height: 100%;
}
#queried_flo_address h4 {
font-size: 1.1rem;
}
#queried_flo_address > sm-copy {
font-size: 0.8rem;
}
#token_list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.token-item {
font-size: 0.9rem;
padding: 0.5rem 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem;
}
.transaction {
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
}
.transaction:not(:last-of-type) {
margin-bottom: 1rem;
}
.transaction .icon {
fill: var(--accent-color);
}
.transaction__time, .transaction__link, .transaction__receiver {
font-size: 0.8rem;
}
.transaction__receiver {
margin-left: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
.transaction p {
font-size: 0.9rem;
max-width: unset;
}
.transaction__time {
justify-self: flex-end;
color: rgba(var(--text-color), 0.8);
}
#search_wrapper {
width: min(100%, 36rem);
}
#search_query_input {
justify-self: center;
}
#saved_ids_list { #saved_ids_list {
position: relative; position: relative;
align-content: flex-start; align-content: flex-start;
@ -803,79 +860,10 @@ h3 {
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
padding: 0 1.5rem; padding: 0 1rem;
padding-bottom: 3rem; padding-bottom: 3rem;
} }
#transactions {
position: relative;
height: 100%;
padding: 0;
}
#transactions header {
padding: 1rem 0.7rem;
}
#transactions header .grid {
grid-template-columns: auto 1fr auto;
}
#queried_flo_address {
margin: 0.5rem 0;
margin-left: 0.7rem;
}
#queried_flo_address h4 {
font-size: 1.1rem;
}
#queried_flo_address > sm-copy {
font-size: 0.8rem;
}
#token_list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.token-item {
font-size: 0.9rem;
padding: 0.5rem 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem;
}
#transactions_list {
flex-direction: column;
padding-bottom: 4rem;
}
.transaction {
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
}
.transaction:not(:last-of-type) {
margin-bottom: 1rem;
}
.transaction .icon {
fill: var(--accent-color);
}
.transaction__time, .transaction__link, .transaction__receiver {
font-size: 0.8rem;
}
.transaction__receiver {
margin-left: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
.transaction p {
font-size: 0.9rem;
max-width: unset;
}
.transaction__time {
justify-self: flex-end;
color: rgba(var(--text-color), 0.8);
}
.fab { .fab {
position: absolute; position: absolute;
right: 0; right: 0;
@ -885,11 +873,6 @@ h3 {
z-index: 2; z-index: 2;
} }
#scroll_to_top {
border-radius: 3rem;
background-color: rgba(var(--foreground-color), 1);
}
#add_address_button { #add_address_button {
border-radius: 0.5rem; border-radius: 0.5rem;
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
@ -912,6 +895,9 @@ h3 {
#balance_card form { #balance_card form {
margin-top: 1rem; margin-top: 1rem;
} }
#balance_card fieldset {
border: none;
}
.token-balance { .token-balance {
display: flex; display: flex;
@ -932,6 +918,25 @@ h3 {
accent-color: var(--accent-color); accent-color: var(--accent-color);
} }
.token-receiver-combo {
border: solid thin rgba(var(--text-color), 0.2);
padding: 0.5rem;
border-radius: 0.8rem;
}
.token-receiver-combo--removable {
grid-template-columns: 1fr auto;
grid-template-areas: "receiver receiver" "amount remove";
}
.token-receiver-combo--removable .token-receiver {
grid-area: receiver;
}
.token-receiver-combo--removable .token-amount {
grid-area: amount;
}
.token-receiver-combo--removable .remove-token-receiver {
grid-area: remove;
}
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1009,6 +1014,41 @@ h3 {
transform: scale(1) translateY(0); transform: scale(1) translateY(0);
} }
} }
#queried_address_transactions {
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
#pagination_wrapper {
position: fixed;
bottom: 0;
right: 0;
margin: 0 auto;
padding: 0.5rem;
background-color: rgba(var(--foreground-color), 1);
z-index: 5;
border-radius: 0.7rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
margin: 0.5rem;
}
.pagination__item {
display: flex;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
}
.pagination__item--active {
background-color: var(--accent-color);
color: rgba(var(--background-color), 1);
}
legend,
.label {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
#smartcontracts { #smartcontracts {
display: grid; display: grid;
min-width: 0; min-width: 0;
@ -1025,11 +1065,6 @@ h3 {
#smartcontracts fieldset legend { #smartcontracts fieldset legend {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
#smartcontracts legend,
#smartcontracts .label {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
#smartcontracts label { #smartcontracts label {
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
} }
@ -1174,6 +1209,13 @@ h3 {
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;
} }
#pagination_wrapper {
margin: 0;
margin-bottom: 4.8rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
sm-popup { sm-popup {
@ -1200,6 +1242,9 @@ h3 {
#pages_container { #pages_container {
grid-area: main; grid-area: main;
} }
.page {
padding: 0 1.5rem;
}
#main_navbar { #main_navbar {
grid-area: nav; grid-area: nav;
border-top: none; border-top: none;
@ -1235,9 +1280,12 @@ h3 {
#retrieve_flo_id_popup { #retrieve_flo_id_popup {
--width: 26rem; --width: 26rem;
} }
#send sm-form::part(form) { #send {
align-items: flex-start; padding: 0 6vw;
grid-template-columns: 45% 1fr; }
#send sm-form {
width: min(56rem, 100%);
margin: auto;
} }
#smart_contract_creation_templates { #smart_contract_creation_templates {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
@ -1271,9 +1319,15 @@ h3 {
grid-template-areas: "address share button"; grid-template-areas: "address share button";
} }
} }
@media screen and (min-width: 56rem) {
#send sm-form::part(form) {
align-items: flex-start;
grid-template-columns: 1fr 1.5fr;
}
}
@media screen and (min-width: 64rem) { @media screen and (min-width: 64rem) {
#transactions_scroller { #address_details_wrapper {
grid-template-columns: 22rem 1fr; grid-template-columns: auto 1fr;
align-items: flex-start; align-items: flex-start;
} }
#transactions_hero_section { #transactions_hero_section {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

224
css/main.scss
View File

@ -111,7 +111,6 @@ button,
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.3rem; border-radius: 0.3rem;
justify-content: center; justify-content: center;
text-transform: capitalize;
&:focus-visible { &:focus-visible {
outline: var(--accent-color) solid medium; outline: var(--accent-color) solid medium;
} }
@ -472,7 +471,7 @@ h3 {
} }
.observe-empty-state:empty { .observe-empty-state:empty {
display: none; display: none !important;
} }
.observe-empty-state:not(:empty) + .empty-state { .observe-empty-state:not(:empty) + .empty-state {
@ -677,12 +676,11 @@ h3 {
} }
} }
#home { #contacts {
padding: 0;
& > :first-child { & > :first-child {
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
padding: 0.5rem 1.5rem 4rem 1.5rem; padding-bottom: 4rem;
} }
} }
#primary_actions_wrapper { #primary_actions_wrapper {
@ -703,6 +701,64 @@ h3 {
fill: var(--accent-color); fill: var(--accent-color);
} }
} }
#search {
position: relative;
height: 100%;
}
#queried_flo_address {
h4 {
font-size: 1.1rem;
}
& > sm-copy {
font-size: 0.8rem;
}
}
#token_list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.token-item {
font-size: 0.9rem;
padding: 0.5rem 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem;
}
.transaction {
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
.icon {
fill: var(--accent-color);
}
&__time,
&__link,
&__receiver {
font-size: 0.8rem;
}
&__receiver {
margin-left: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
p {
font-size: 0.9rem;
max-width: unset;
}
&__time {
justify-self: flex-end;
color: rgba(var(--text-color), 0.8);
}
}
#search_wrapper {
width: min(100%, 36rem);
}
#search_query_input {
justify-self: center;
}
#saved_ids_list { #saved_ids_list {
position: relative; position: relative;
align-content: flex-start; align-content: flex-start;
@ -765,75 +821,9 @@ h3 {
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
align-content: flex-start; align-content: flex-start;
padding: 0 1.5rem; padding: 0 1rem;
padding-bottom: 3rem; padding-bottom: 3rem;
} }
#transactions {
position: relative;
height: 100%;
padding: 0;
header {
padding: 1rem 0.7rem;
.grid {
grid-template-columns: auto 1fr auto;
}
}
}
#queried_flo_address {
margin: 0.5rem 0;
margin-left: 0.7rem;
h4 {
font-size: 1.1rem;
}
& > sm-copy {
font-size: 0.8rem;
}
}
#token_list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.token-item {
font-size: 0.9rem;
padding: 0.5rem 1rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.3rem;
}
#transactions_list {
flex-direction: column;
padding-bottom: 4rem;
}
.transaction {
gap: 1rem;
padding: 1rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
&:not(:last-of-type) {
margin-bottom: 1rem;
}
.icon {
fill: var(--accent-color);
}
&__time,
&__link,
&__receiver {
font-size: 0.8rem;
}
&__receiver {
margin-left: 0.5rem;
color: rgba(var(--text-color), 0.8);
}
p {
font-size: 0.9rem;
max-width: unset;
}
&__time {
justify-self: flex-end;
color: rgba(var(--text-color), 0.8);
}
}
.fab { .fab {
position: absolute; position: absolute;
right: 0; right: 0;
@ -842,10 +832,6 @@ h3 {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
z-index: 2; z-index: 2;
} }
#scroll_to_top {
border-radius: 3rem;
background-color: rgba(var(--foreground-color), 1);
}
#add_address_button { #add_address_button {
border-radius: 0.5rem; border-radius: 0.5rem;
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
@ -866,6 +852,9 @@ h3 {
form { form {
margin-top: 1rem; margin-top: 1rem;
} }
fieldset {
border: none;
}
} }
.token-balance { .token-balance {
display: flex; display: flex;
@ -887,6 +876,24 @@ h3 {
accent-color: var(--accent-color); accent-color: var(--accent-color);
} }
} }
.token-receiver-combo {
border: solid thin rgba(var(--text-color), 0.2);
padding: 0.5rem;
border-radius: 0.8rem;
&--removable {
grid-template-columns: 1fr auto;
grid-template-areas: "receiver receiver" "amount remove";
.token-receiver {
grid-area: receiver;
}
.token-amount {
grid-area: amount;
}
.remove-token-receiver {
grid-area: remove;
}
}
}
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -942,7 +949,38 @@ h3 {
transform: scale(1) translateY(0); transform: scale(1) translateY(0);
} }
} }
#queried_address_transactions {
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
}
#pagination_wrapper {
position: fixed;
bottom: 0;
right: 0;
margin: 0 auto;
padding: 0.5rem;
background-color: rgba(var(--foreground-color), 1);
z-index: 5;
border-radius: 0.7rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
margin: 0.5rem;
}
.pagination__item {
display: flex;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
&--active {
background-color: var(--accent-color);
color: rgba(var(--background-color), 1);
}
}
legend,
.label {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
#smartcontracts { #smartcontracts {
display: grid; display: grid;
min-width: 0; min-width: 0;
@ -958,11 +996,6 @@ h3 {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
legend,
.label {
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
label { label {
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
&:has(input:not(:disabled):not(:checked)) { &:has(input:not(:disabled):not(:checked)) {
@ -1110,6 +1143,13 @@ h3 {
} }
} }
} }
#pagination_wrapper {
margin: 0;
margin-bottom: 4.8rem;
left: 50%;
right: auto;
transform: translateX(-50%);
}
} }
@media screen and (min-width: 40rem) { @media screen and (min-width: 40rem) {
sm-popup { sm-popup {
@ -1138,6 +1178,9 @@ h3 {
#pages_container { #pages_container {
grid-area: main; grid-area: main;
} }
.page {
padding: 0 1.5rem;
}
#main_navbar { #main_navbar {
grid-area: nav; grid-area: nav;
@ -1175,9 +1218,10 @@ h3 {
--width: 26rem; --width: 26rem;
} }
#send { #send {
sm-form::part(form) { padding: 0 6vw;
align-items: flex-start; sm-form {
grid-template-columns: 45% 1fr; width: min(56rem, 100%);
margin: auto;
} }
} }
#smart_contract_creation_templates { #smart_contract_creation_templates {
@ -1213,9 +1257,17 @@ h3 {
} }
} }
} }
@media screen and (min-width: 56rem) {
#send {
sm-form::part(form) {
align-items: flex-start;
grid-template-columns: 1fr 1.5fr;
}
}
}
@media screen and (min-width: 64rem) { @media screen and (min-width: 64rem) {
#transactions_scroller { #address_details_wrapper {
grid-template-columns: 22rem 1fr; grid-template-columns: auto 1fr;
align-items: flex-start; align-items: flex-start;
} }
#transactions_hero_section { #transactions_hero_section {

803
index.html
View File

File diff suppressed because it is too large Load Diff

2
scripts/components.js
View File

File diff suppressed because one or more lines are too long