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

cashier UI improvements

Browse Source
This commit is contained in:
sairaj mote 2022-05-12 16:23:16 +05:30
parent 96b51414b0
commit 41f708ee31
5 changed files with 65 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/main.css
View File

@ -1151,11 +1151,39 @@ ul {
.payment-request:not(:last-of-type) {
margin-bottom: 0.5rem;
}
.cashier-request__mode,
.payment-request__mode {
text-align: center;
width: 2rem;
font-size: 0.8rem;
}
.cashier-request__time,
.payment-request__time {
font-size: 0.8rem;
}
.cashier-request {
display: grid;
gap: 0.5rem 1rem;
grid-template-columns: auto 1fr auto;
grid-template-areas: "mode details status" "mode . status";
}
.cashier-request__mode {
grid-area: mode;
}
.cashier-request__details {
grid-area: details;
font-weight: 700;
}
.cashier-request__requestor {
font-size: 0.8rem;
}
.cashier-request__status {
grid-area: status;
grid-column: 3/4;
grid-row: 1/3;
}
#payment_request_history {
padding-bottom: 3rem;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

26
css/main.scss
View File

@ -1068,10 +1068,36 @@ ul {
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
&__mode {
text-align: center;
width: 2rem;
font-size: 0.8rem;
}
&__time {
font-size: 0.8rem;
}
}
.cashier-request {
display: grid;
gap: 0.5rem 1rem;
grid-template-columns: auto 1fr auto;
grid-template-areas: "mode details status" "mode . status";
&__mode {
grid-area: mode;
}
&__details {
grid-area: details;
font-weight: 700;
}
&__requestor {
font-size: 0.8rem;
}
&__status {
grid-area: status;
grid-column: 3/4;
grid-row: 1/3;
}
}
#payment_request_history {
padding-bottom: 3rem;
}

6
index.html
View File

@ -955,9 +955,11 @@
<template id="cashier_request_template">
<li class="cashier-request flex-wrap">
<div class="cashier-request__mode"></div>
<div class="grid gap-0-5 flex-1">
<div class="cashier-request__requestor breakable"></div>
<div class="cashier-request__details"></div>
<div class="flex flex-wrap align-center gap-0-5 flex-1">
<time class="cashier-request__time"></time>
<div class="bullet-point"></div>
<div class="cashier-request__requestor breakable"></div>
</div>
<div class="cashier-request__status"></div>
</li>

8
scripts/fn_ui.js
View File

@ -428,13 +428,17 @@ const render = {
return clone;
},
cashierRequestCard(details) {
const { time, senderID, message: { mode }, note, tag, vectorClock } = details;
const { time, senderID, message: { mode, amount }, note, tag, vectorClock } = details;
console.log(amount)
const clone = getRef('cashier_request_template').content.cloneNode(true).firstElementChild;
clone.id = vectorClock;
const status = tag || note; //status tag for completed, note for rejected
clone.querySelector('.cashier-request__details').textContent = `${mode === 'cash-to-token' ? 'Top-up wallet with' : 'Withdraw'} ${formatAmount(amount)}`;
clone.querySelector('.cashier-request__requestor').textContent = senderID;
clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time);
clone.querySelector('.cashier-request__mode').textContent = mode;
clone.querySelector('.cashier-request__mode').innerHTML = mode === 'token-to-cash' ? `<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <g> <rect height="7" width="3" x="4" y="10"></rect> <rect height="7" width="3" x="10.5" y="10"></rect> <rect height="3" width="20" x="2" y="19"></rect> <rect height="7" width="3" x="17" y="10"></rect> <polygon points="12,1 2,6 2,8 22,8 22,6"></polygon> </g> </g> </svg>`
:
`<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"></path><path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path></svg>`;
if (status)
clone.querySelector('.cashier-request__status').textContent = status;
else