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

UI/UX and feature update

Browse Source 
-- implemented new UI for portfolio assets deposit/withdraw/transfer and view asset specific history
-- minor bug fixes
This commit is contained in:
sairaj mote 2022-06-04 16:51:23 +05:30
parent d076a69cea
commit 2c344c4614
5 changed files with 435 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
docs/css/main.css
View File

@ -22,6 +22,7 @@ body {
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #bd7200;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -36,6 +37,7 @@ body[data-theme=dark] {
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffeb3b;
} }
body[data-theme=dark] sm-popup::part(popup) { body[data-theme=dark] sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
@ -1070,18 +1072,6 @@ sm-checkbox {
width: min(32rem, 100%); width: min(32rem, 100%);
} }
.portfolio_actions__wrapper {
grid-column: 1/-1;
justify-content: flex-end;
gap: 0.3rem;
padding-top: 1rem;
}
.portfolio_actions__wrapper .button {
color: var(--accent-color);
padding: 0.5rem 0.8rem;
flex-shrink: 0;
}
.label { .label {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -1100,20 +1090,28 @@ sm-checkbox {
align-items: center; align-items: center;
gap: 0 0.5rem; gap: 0 0.5rem;
padding: 1rem; padding: 1rem;
padding-left: 0.6rem;
border-radius: 0.3rem; border-radius: 0.3rem;
color: inherit;
background-color: rgba(var(--text-color), 0.03); background-color: rgba(var(--text-color), 0.03);
} }
.balance-card.is-locked { .balance-card.is-locked {
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto 1fr auto;
} }
.balance-card.is-locked .balance-card__icon { .balance-card.is-locked .balance-card__icon {
grid-row: span 2; grid-row: span 2;
} }
.balance-card:not(.is-locked) { .balance-card.is-locked .balance-card__right-arrow {
grid-template-columns: auto auto 1fr auto auto; grid-area: 1/3/3/4;
} }
.balance-card input { .balance-card.is-locked .balance-card__amount-wrapper {
align-self: center; grid-area: 2/2/3/3;
}
.balance-card:not(.is-locked) {
grid-template-columns: auto 1fr auto auto;
}
.balance-card:not(.is-locked) .balance-card__right-arrow {
grid-area: 1/4/2/5;
} }
.balance-card__icon { .balance-card__icon {
display: flex; display: flex;
@ -1142,6 +1140,12 @@ sm-checkbox {
.balance-card__amount-wrapper > :nth-child(even) { .balance-card__amount-wrapper > :nth-child(even) {
text-align: right; text-align: right;
} }
.balance-card__right-arrow {
background-color: rgba(var(--text-color), 0.1);
border-radius: 1rem;
padding: 0.1rem;
fill: var(--accent-color);
}
#history { #history {
padding-top: 0 !important; padding-top: 0 !important;
@ -1153,44 +1157,47 @@ sm-checkbox {
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
} }
#exchange_history {
margin-top: 0.5rem;
}
.history-entry { .history-entry {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: auto 1fr auto;
gap: 0.5rem; gap: 0.5rem 1rem;
align-items: center; align-items: center;
padding: 1rem;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.3rem;
margin-bottom: 0.5rem;
}
.history-entry:last-of-type {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.history-entry > :nth-child(2) { .history-entry[data-status=SUCCESS] .history-entry__status .icon {
text-align: right; fill: var(--green);
}
.history-entry[data-status=PENDING] .history-entry__status .icon, .history-entry[data-status=WAITING_CONFIRMATION] .history-entry__status .icon {
fill: var(--yellow);
} }
.history-entry__status { .history-entry__status {
justify-self: flex-start; display: flex;
font-size: 0.75rem; align-items: center;
background-color: rgba(var(--text-color), 0.06); justify-content: center;
padding: 0.3rem 0.5rem; grid-row: 1/3;
border-radius: 1rem; width: 2.5rem;
letter-spacing: 0.05em; height: 2.5rem;
margin-left: 0.5rem; background-color: rgba(var(--text-color), 0.03);
border-radius: 2rem;
} }
.history-entry .history-entry__amount-wrapper { .history-entry__token-action {
font-weight: 500; font-weight: 500;
} }
.history-entry[data-type=deposit] .history-entry__amount { .history-entry__amount {
font-weight: 500;
text-align: right;
}
.history-entry[data-type=deposit] .history-entry__amount:not(:empty) {
color: var(--green); color: var(--green);
} }
.history-entry[data-type=deposit] .history-entry__amount::before { .history-entry[data-type=deposit] .history-entry__amount:not(:empty)::before {
content: "+ "; content: "+ ";
} }
.history-entry[data-type=withdraw] .history-entry__amount { .history-entry[data-type=withdraw] .history-entry__amount:not(:empty)::before {
color: var(--danger-color);
}
.history-entry[data-type=withdraw] .history-entry__amount::before {
content: "- "; content: "- ";
} }
.history-entry__time { .history-entry__time {
@ -1202,6 +1209,17 @@ sm-checkbox {
font-size: 0.9rem; font-size: 0.9rem;
} }
#portfolio_asset_page .sticky {
margin-top: -1.5rem;
margin-left: -0.7rem;
padding: 1rem 0;
background-color: rgba(var(--background-color), 1);
}
#portfolio_asset__history {
margin-top: 1rem;
}
#portfolio_cards_wrapper { #portfolio_cards_wrapper {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1463,10 +1481,6 @@ sm-checkbox {
align-self: center; align-self: center;
} }
#main_header {
padding: 1.5rem;
}
#user_popup_button { #user_popup_button {
width: 100%; width: 100%;
} }
@ -1664,7 +1678,8 @@ sm-checkbox {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
#history .sticky { #history .sticky,
#portfolio_asset_page .sticky {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
} }

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

110
docs/css/main.scss
View File

@ -22,6 +22,7 @@ body {
--background-color: 241, 243, 248; --background-color: 241, 243, 248;
--danger-color: rgb(255, 75, 75); --danger-color: rgb(255, 75, 75);
--green: #1cad59; --green: #1cad59;
--yellow: #bd7200;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-gutter: stable; scrollbar-gutter: stable;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -36,6 +37,7 @@ body[data-theme="dark"] {
--background-color: 21, 22, 22; --background-color: 21, 22, 22;
--danger-color: rgb(255, 106, 106); --danger-color: rgb(255, 106, 106);
--green: #00e676; --green: #00e676;
--yellow: #ffeb3b;
sm-popup::part(popup) { sm-popup::part(popup) {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
@ -965,17 +967,6 @@ sm-checkbox {
align-content: flex-start; align-content: flex-start;
width: min(32rem, 100%); width: min(32rem, 100%);
} }
.portfolio_actions__wrapper {
grid-column: 1/-1;
justify-content: flex-end;
gap: 0.3rem;
padding-top: 1rem;
.button {
color: var(--accent-color);
padding: 0.5rem 0.8rem;
flex-shrink: 0;
}
}
.label { .label {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
@ -992,19 +983,27 @@ sm-checkbox {
align-items: center; align-items: center;
gap: 0 0.5rem; gap: 0 0.5rem;
padding: 1rem; padding: 1rem;
padding-left: 0.6rem;
border-radius: 0.3rem; border-radius: 0.3rem;
color: inherit;
background-color: rgba(var(--text-color), 0.03); background-color: rgba(var(--text-color), 0.03);
&.is-locked { &.is-locked {
grid-template-columns: auto auto 1fr auto; grid-template-columns: auto 1fr auto;
.balance-card__icon { .balance-card__icon {
grid-row: span 2; grid-row: span 2;
} }
.balance-card__right-arrow {
grid-area: 1/3/3/4;
}
.balance-card__amount-wrapper {
grid-area: 2/2/3/3;
}
} }
&:not(.is-locked) { &:not(.is-locked) {
grid-template-columns: auto auto 1fr auto auto; grid-template-columns: auto 1fr auto auto;
} .balance-card__right-arrow {
input { grid-area: 1/4/2/5;
align-self: center; }
} }
&__icon { &__icon {
display: flex; display: flex;
@ -1033,6 +1032,12 @@ sm-checkbox {
text-align: right; text-align: right;
} }
} }
&__right-arrow {
background-color: rgba(var(--text-color), 0.1);
border-radius: 1rem;
padding: 0.1rem;
fill: var(--accent-color);
}
} }
#history { #history {
padding-top: 0 !important; padding-top: 0 !important;
@ -1043,35 +1048,49 @@ sm-checkbox {
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
} }
} }
#exchange_history {
margin-top: 0.5rem;
}
.history-entry { .history-entry {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: auto 1fr auto;
gap: 0.5rem; gap: 0.5rem 1rem;
align-items: center; align-items: center;
padding: 1rem; margin-bottom: 2rem;
background-color: rgba(var(--text-color), 0.03); &[data-status="SUCCESS"] {
border-radius: 0.3rem; .history-entry__status {
margin-bottom: 0.5rem; .icon {
&:last-of-type { fill: var(--green);
margin-bottom: 2rem; }
}
} }
& > :nth-child(2) { &[data-status="PENDING"],
text-align: right; &[data-status="WAITING_CONFIRMATION"] {
.history-entry__status {
.icon {
fill: var(--yellow);
}
}
} }
&__status { &__status {
justify-self: flex-start; display: flex;
font-size: 0.75rem; align-items: center;
background-color: rgba(var(--text-color), 0.06); justify-content: center;
padding: 0.3rem 0.5rem; grid-row: 1/3;
border-radius: 1rem; width: 2.5rem;
letter-spacing: 0.05em; height: 2.5rem;
margin-left: 0.5rem; background-color: rgba(var(--text-color), 0.03);
border-radius: 2rem;
} }
.history-entry__amount-wrapper { &__token-action {
font-weight: 500; font-weight: 500;
} }
&__amount {
font-weight: 500;
text-align: right;
}
&[data-type="deposit"] { &[data-type="deposit"] {
.history-entry__amount { .history-entry__amount:not(:empty) {
color: var(--green); color: var(--green);
&::before { &::before {
content: "+ "; content: "+ ";
@ -1079,8 +1098,7 @@ sm-checkbox {
} }
} }
&[data-type="withdraw"] { &[data-type="withdraw"] {
.history-entry__amount { .history-entry__amount:not(:empty) {
color: var(--danger-color);
&::before { &::before {
content: "- "; content: "- ";
} }
@ -1095,6 +1113,19 @@ sm-checkbox {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
#portfolio_asset_page {
.sticky {
margin-top: -1.5rem;
margin-left: -0.7rem;
padding: 1rem 0;
background-color: rgba(var(--background-color), 1);
}
}
#portfolio_asset__actions {
}
#portfolio_asset__history {
margin-top: 1rem;
}
#portfolio_cards_wrapper { #portfolio_cards_wrapper {
display: grid; display: grid;
gap: 0.5rem; gap: 0.5rem;
@ -1315,7 +1346,7 @@ sm-checkbox {
align-self: center; align-self: center;
} }
#main_header { #main_header {
padding: 1.5rem; // padding: 1.5rem;
} }
#user_popup_button { #user_popup_button {
width: 100%; width: 100%;
@ -1491,7 +1522,8 @@ sm-checkbox {
.orders_section__header { .orders_section__header {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }
#history { #history,
#portfolio_asset_page {
.sticky { .sticky {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
} }

495
docs/index.html
View File

File diff suppressed because one or more lines are too long

12
docs/scripts/components.js
View File

@ -1272,7 +1272,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popupContainer = this.shadowRoot.querySelector('.popup-container'); this.popupContainer = this.shadowRoot.querySelector('.popup-container');
this.backdrop = this.shadowRoot.querySelector('.background'); this.backdrop = this.shadowRoot.querySelector('.background');
this.popup = this.shadowRoot.querySelector('.popup'); this.dialogBox = this.shadowRoot.querySelector('.popup');
this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot'); this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
this.popupHeader = this.shadowRoot.querySelector('.popup-top'); this.popupHeader = this.shadowRoot.querySelector('.popup-top');
@ -1317,7 +1317,7 @@ customElements.define('sm-popup', class extends HTMLElement {
easing: 'ease' easing: 'ease'
} }
const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})` const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
this.animateTo(this.popup, [ this.animateTo(this.dialogBox, [
{ {
opacity: this.offset ? 1 : 0, opacity: this.offset ? 1 : 0,
transform: initialAnimation transform: initialAnimation
@ -1382,7 +1382,7 @@ customElements.define('sm-popup', class extends HTMLElement {
{ opacity: 1 }, { opacity: 1 },
{ opacity: 0 } { opacity: 0 }
], animOptions) ], animOptions)
this.animateTo(this.popup, [ this.animateTo(this.dialogBox, [
{ {
opacity: 1, opacity: 1,
transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})` transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
@ -1394,7 +1394,7 @@ customElements.define('sm-popup', class extends HTMLElement {
], animOptions).finished ], animOptions).finished
.finally(() => { .finally(() => {
this.popupContainer.classList.add('hide'); this.popupContainer.classList.add('hide');
this.popup.style = '' this.dialogBox.style = ''
this.removeAttribute('open'); this.removeAttribute('open');
if (this.forms.length) { if (this.forms.length) {
@ -1434,7 +1434,7 @@ customElements.define('sm-popup', class extends HTMLElement {
if (this.touchStartY < e.changedTouches[0].clientY) { if (this.touchStartY < e.changedTouches[0].clientY) {
this.offset = e.changedTouches[0].clientY - this.touchStartY; this.offset = e.changedTouches[0].clientY - this.touchStartY;
this.touchEndAnimation = window.requestAnimationFrame(() => { this.touchEndAnimation = window.requestAnimationFrame(() => {
this.popup.style.transform = `translateY(${this.offset}px)`; this.dialogBox.style.transform = `translateY(${this.offset}px)`;
}); });
} }
} }
@ -1443,7 +1443,7 @@ customElements.define('sm-popup', class extends HTMLElement {
this.touchEndTime = e.timeStamp; this.touchEndTime = e.timeStamp;
cancelAnimationFrame(this.touchEndAnimation); cancelAnimationFrame(this.touchEndAnimation);
this.touchEndY = e.changedTouches[0].clientY; this.touchEndY = e.changedTouches[0].clientY;
this.threshold = this.popup.getBoundingClientRect().height * 0.3; this.threshold = this.dialogBox.getBoundingClientRect().height * 0.3;
if (this.touchEndTime - this.touchStartTime > 200) { if (this.touchEndTime - this.touchStartTime > 200) {
if (this.touchEndY - this.touchStartY > this.threshold) { if (this.touchEndY - this.touchStartY > this.threshold) {
if (this.pinned) { if (this.pinned) {