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

Added amount to open orders

Browse Source
This commit is contained in:
sairaj mote 2022-05-22 17:59:53 +05:30
parent 69a12ec5ed
commit 564256711e
4 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/css/main.css
View File

@ -829,9 +829,16 @@ sm-checkbox {
user-select: none;
align-items: center;
gap: 0.5rem;
grid-template-columns: -webkit-min-content repeat(3, 1fr) -webkit-min-content;
grid-template-columns: min-content repeat(3, 1fr) min-content;
grid-template-columns: -webkit-min-content 1fr auto;
grid-template-columns: min-content 1fr auto;
border-radius: 0.5rem;
grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
}
.order-card > .grid:nth-of-type(2) {
grid-area: price;
}
.order-card > .grid:nth-of-type(3) {
grid-area: amount;
}
.order-card__type {
font-size: 0.9rem;
@ -852,6 +859,7 @@ sm-checkbox {
pointer-events: none;
}
.order-card sm-checkbox {
grid-area: checkbox;
cursor: pointer;
margin-right: 0.5rem;
}
@ -860,9 +868,17 @@ sm-checkbox {
color: rgba(var(--text-color), 0.9);
}
.order-card__time {
grid-area: time;
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
.order-card .cancel-order {
grid-area: cancel;
color: var(--danger-color);
}
.order-card .cancel-order .icon {
fill: var(--danger-color);
}
.cancel-order {
align-items: center;
@ -1542,6 +1558,11 @@ sm-checkbox {
height: 2rem;
background-color: var(--accent-color);
}
.order-card {
grid-template-columns: auto 1fr 1fr 1fr auto;
grid-template-areas: "checkbox quantity price amount time cancel";
}
}
@media screen and (max-width: 80rem) and (min-width: 40rem) {
.main_navbar__item {

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

File diff suppressed because one or more lines are too long

24
docs/css/main.scss
View File

@ -778,8 +778,17 @@ sm-checkbox {
user-select: none;
align-items: center;
gap: 0.5rem;
grid-template-columns: min-content repeat(3, 1fr) min-content;
grid-template-columns: min-content 1fr auto;
border-radius: 0.5rem;
grid-template-areas: "checkbox quantity quantity time" "checkbox price amount cancel";
& > .grid {
&:nth-of-type(2) {
grid-area: price;
}
&:nth-of-type(3) {
grid-area: amount;
}
}
&__type {
font-size: 0.9rem;
font-weight: 500;
@ -801,6 +810,7 @@ sm-checkbox {
}
}
sm-checkbox {
grid-area: checkbox;
cursor: pointer;
margin-right: 0.5rem;
}
@ -811,9 +821,17 @@ sm-checkbox {
}
&__time {
grid-area: time;
font-size: 0.8rem;
color: rgba(var(--text-color), 0.8);
}
.cancel-order {
grid-area: cancel;
color: var(--danger-color);
.icon {
fill: var(--danger-color);
}
}
}
.cancel-order {
align-items: center;
@ -1374,6 +1392,10 @@ sm-checkbox {
}
}
}
.order-card {
grid-template-columns: auto 1fr 1fr 1fr auto;
grid-template-areas: "checkbox quantity price amount time cancel";
}
}
@media screen and (max-width: 80rem) and (min-width: 40rem) {
.main_navbar__item {

12
docs/index.html
View File

@ -852,11 +852,15 @@
<div class="order-card__type capitalize"></div>
<div class="order-card__quantity"></div>
</div>
<time class="order-card__time"></time>
<div class="grid">
<span class="label order-card__price-type"></span>
<div class="order-card__price"></div>
</div>
<time class="order-card__time"></time>
<div class="grid">
<span class="label order-card__amount-type"></span>
<div class="order-card__amount"></div>
</div>
<button class="cancel-order" title="Cancel this order">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" height="24px" viewBox="0 0 24 24" width="24px">
<path d="M0 0h24v24H0V0z" fill="none" />
@ -1000,7 +1004,7 @@
const domRefs = {};
let timerId;
const currentYear = new Date().getFullYear();
const relativeTime = new RelativeTime({ style: 'narrow' });
const relativeTime = new RelativeTime('en', { style: 'short' });
//Checks for internet connection status
if (!navigator.onLine) {
@ -1645,7 +1649,9 @@
card.querySelector('.order-card__type').textContent = type
card.querySelector('.order-card__quantity').textContent = `${quantity} ${asset}`
card.querySelector('.order-card__price-type').textContent = type === 'buy' ? 'Valid upto' : 'Valid until'
card.querySelector('.order-card__price').textContent = formatAmount(price)
card.querySelector('.order-card__amount').textContent = formatAmount(price)
card.querySelector('.order-card__amount-type').textContent = type === 'buy' ? 'Locked amount' : 'Min amount'
card.querySelector('.order-card__price').textContent = formatAmount(price * quantity, true)
card.querySelector('.order-card__time').textContent = relativeTime.from(new Date(time).getTime())
return card
},