UI/UX and feature update
-- implemented new UI for portfolio assets deposit/withdraw/transfer and view asset specific history -- minor bug fixes
This commit is contained in:
sairaj mote
parent
d076a69cea
commit
2c344c4614
@ -22,6 +22,7 @@ body {
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: #bd7200;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -36,6 +37,7 @@ body[data-theme=dark] {
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: #ffeb3b;
|
||||
}
|
||||
body[data-theme=dark] sm-popup::part(popup) {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
@ -1070,18 +1072,6 @@ sm-checkbox {
|
||||
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 {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -1100,20 +1090,28 @@ sm-checkbox {
|
||||
align-items: center;
|
||||
gap: 0 0.5rem;
|
||||
padding: 1rem;
|
||||
padding-left: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
color: inherit;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
}
|
||||
.balance-card.is-locked {
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
}
|
||||
.balance-card.is-locked .balance-card__icon {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.balance-card:not(.is-locked) {
|
||||
grid-template-columns: auto auto 1fr auto auto;
|
||||
.balance-card.is-locked .balance-card__right-arrow {
|
||||
grid-area: 1/3/3/4;
|
||||
}
|
||||
.balance-card input {
|
||||
align-self: center;
|
||||
.balance-card.is-locked .balance-card__amount-wrapper {
|
||||
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 {
|
||||
display: flex;
|
||||
@ -1142,6 +1140,12 @@ sm-checkbox {
|
||||
.balance-card__amount-wrapper > :nth-child(even) {
|
||||
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 {
|
||||
padding-top: 0 !important;
|
||||
@ -1153,44 +1157,47 @@ sm-checkbox {
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
|
||||
#exchange_history {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.history-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem 1rem;
|
||||
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;
|
||||
}
|
||||
.history-entry > :nth-child(2) {
|
||||
text-align: right;
|
||||
.history-entry[data-status=SUCCESS] .history-entry__status .icon {
|
||||
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 {
|
||||
justify-self: flex-start;
|
||||
font-size: 0.75rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-row: 1/3;
|
||||
width: 2.5rem;
|
||||
height: 2.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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.history-entry[data-type=deposit] .history-entry__amount::before {
|
||||
.history-entry[data-type=deposit] .history-entry__amount:not(:empty)::before {
|
||||
content: "+ ";
|
||||
}
|
||||
.history-entry[data-type=withdraw] .history-entry__amount {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.history-entry[data-type=withdraw] .history-entry__amount::before {
|
||||
.history-entry[data-type=withdraw] .history-entry__amount:not(:empty)::before {
|
||||
content: "- ";
|
||||
}
|
||||
.history-entry__time {
|
||||
@ -1202,6 +1209,17 @@ sm-checkbox {
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1463,10 +1481,6 @@ sm-checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#user_popup_button {
|
||||
width: 100%;
|
||||
}
|
||||
@ -1664,7 +1678,8 @@ sm-checkbox {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
#history .sticky {
|
||||
#history .sticky,
|
||||
#portfolio_asset_page .sticky {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -22,6 +22,7 @@ body {
|
||||
--background-color: 241, 243, 248;
|
||||
--danger-color: rgb(255, 75, 75);
|
||||
--green: #1cad59;
|
||||
--yellow: #bd7200;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -36,6 +37,7 @@ body[data-theme="dark"] {
|
||||
--background-color: 21, 22, 22;
|
||||
--danger-color: rgb(255, 106, 106);
|
||||
--green: #00e676;
|
||||
--yellow: #ffeb3b;
|
||||
sm-popup::part(popup) {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -965,17 +967,6 @@ sm-checkbox {
|
||||
align-content: flex-start;
|
||||
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 {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -992,19 +983,27 @@ sm-checkbox {
|
||||
align-items: center;
|
||||
gap: 0 0.5rem;
|
||||
padding: 1rem;
|
||||
padding-left: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
color: inherit;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
&.is-locked {
|
||||
grid-template-columns: auto auto 1fr auto;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
.balance-card__icon {
|
||||
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) {
|
||||
grid-template-columns: auto auto 1fr auto auto;
|
||||
}
|
||||
input {
|
||||
align-self: center;
|
||||
grid-template-columns: auto 1fr auto auto;
|
||||
.balance-card__right-arrow {
|
||||
grid-area: 1/4/2/5;
|
||||
}
|
||||
}
|
||||
&__icon {
|
||||
display: flex;
|
||||
@ -1033,6 +1032,12 @@ sm-checkbox {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&__right-arrow {
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
border-radius: 1rem;
|
||||
padding: 0.1rem;
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
#history {
|
||||
padding-top: 0 !important;
|
||||
@ -1043,35 +1048,49 @@ sm-checkbox {
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
#exchange_history {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.history-entry {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem 1rem;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
&:last-of-type {
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
&[data-status="SUCCESS"] {
|
||||
.history-entry__status {
|
||||
.icon {
|
||||
fill: var(--green);
|
||||
}
|
||||
}
|
||||
}
|
||||
& > :nth-child(2) {
|
||||
text-align: right;
|
||||
&[data-status="PENDING"],
|
||||
&[data-status="WAITING_CONFIRMATION"] {
|
||||
.history-entry__status {
|
||||
.icon {
|
||||
fill: var(--yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__status {
|
||||
justify-self: flex-start;
|
||||
font-size: 0.75rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.3rem 0.5rem;
|
||||
border-radius: 1rem;
|
||||
letter-spacing: 0.05em;
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
grid-row: 1/3;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.history-entry__amount-wrapper {
|
||||
&__token-action {
|
||||
font-weight: 500;
|
||||
}
|
||||
&__amount {
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
}
|
||||
&[data-type="deposit"] {
|
||||
.history-entry__amount {
|
||||
.history-entry__amount:not(:empty) {
|
||||
color: var(--green);
|
||||
&::before {
|
||||
content: "+ ";
|
||||
@ -1079,8 +1098,7 @@ sm-checkbox {
|
||||
}
|
||||
}
|
||||
&[data-type="withdraw"] {
|
||||
.history-entry__amount {
|
||||
color: var(--danger-color);
|
||||
.history-entry__amount:not(:empty) {
|
||||
&::before {
|
||||
content: "- ";
|
||||
}
|
||||
@ -1095,6 +1113,19 @@ sm-checkbox {
|
||||
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 {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -1315,7 +1346,7 @@ sm-checkbox {
|
||||
align-self: center;
|
||||
}
|
||||
#main_header {
|
||||
padding: 1.5rem;
|
||||
// padding: 1.5rem;
|
||||
}
|
||||
#user_popup_button {
|
||||
width: 100%;
|
||||
@ -1491,7 +1522,8 @@ sm-checkbox {
|
||||
.orders_section__header {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
#history {
|
||||
#history,
|
||||
#portfolio_asset_page {
|
||||
.sticky {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
495
docs/index.html
495
docs/index.html
File diff suppressed because one or more lines are too long
@ -1272,7 +1272,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
this.popupContainer = this.shadowRoot.querySelector('.popup-container');
|
||||
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.popupHeader = this.shadowRoot.querySelector('.popup-top');
|
||||
|
||||
@ -1317,7 +1317,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
easing: 'ease'
|
||||
}
|
||||
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,
|
||||
transform: initialAnimation
|
||||
@ -1382,7 +1382,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
{ opacity: 1 },
|
||||
{ opacity: 0 }
|
||||
], animOptions)
|
||||
this.animateTo(this.popup, [
|
||||
this.animateTo(this.dialogBox, [
|
||||
{
|
||||
opacity: 1,
|
||||
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
|
||||
.finally(() => {
|
||||
this.popupContainer.classList.add('hide');
|
||||
this.popup.style = ''
|
||||
this.dialogBox.style = ''
|
||||
this.removeAttribute('open');
|
||||
|
||||
if (this.forms.length) {
|
||||
@ -1434,7 +1434,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
if (this.touchStartY < e.changedTouches[0].clientY) {
|
||||
this.offset = e.changedTouches[0].clientY - this.touchStartY;
|
||||
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;
|
||||
cancelAnimationFrame(this.touchEndAnimation);
|
||||
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.touchEndY - this.touchStartY > this.threshold) {
|
||||
if (this.pinned) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user