This commit is contained in:
sairaj mote 2020-09-23 01:22:10 +05:30
parent a5f4f8de06
commit 2be4b84cc6
4 changed files with 45 additions and 32 deletions

View File

@ -759,9 +759,6 @@ sm-panel {
.deposited { .deposited {
color: #007732; color: #007732;
} }
.deposited::before {
content: "+ ";
}
.decline-request { .decline-request {
margin-right: 0.5rem !important; margin-right: 0.5rem !important;
@ -770,9 +767,6 @@ sm-panel {
.withdrawn { .withdrawn {
color: #d43125; color: #d43125;
} }
.withdrawn::before {
content: "- ";
}
.container { .container {
display: grid; display: grid;
@ -1048,6 +1042,8 @@ sm-panel {
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: "icon type amount" "icon receiver time"; grid-template-areas: "icon type amount" "icon receiver time";
max-width: 70ch; max-width: 70ch;
align-items: center;
cursor: pointer;
} }
.activity .icon { .activity .icon {
grid-area: icon; grid-area: icon;
@ -1061,11 +1057,15 @@ sm-panel {
grid-area: type; grid-area: type;
text-transform: capitalize; text-transform: capitalize;
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.8rem;
} }
.activity .activity-receiver { .activity .activity-receiver {
grid-area: receiver; grid-area: receiver;
font-weight: 500; font-weight: 500;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.activity .activity-amount { .activity .activity-amount {
text-align: right; text-align: right;

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -801,10 +801,6 @@ sm-panel{
.deposited { .deposited {
color: #007732; color: #007732;
&::before {
content: '+ ';
}
} }
.decline-request { .decline-request {
@ -813,10 +809,6 @@ sm-panel{
.withdrawn { .withdrawn {
color: #d43125; color: #d43125;
&::before {
content: '- ';
}
} }
.container { .container {
@ -1121,6 +1113,8 @@ sm-panel{
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-areas: 'icon type amount' 'icon receiver time'; grid-template-areas: 'icon type amount' 'icon receiver time';
max-width: 70ch; max-width: 70ch;
align-items: center;
cursor: pointer;
.icon{ .icon{
grid-area: icon; grid-area: icon;
height: 3rem; height: 3rem;
@ -1133,11 +1127,15 @@ sm-panel{
grid-area: type; grid-area: type;
text-transform: capitalize; text-transform: capitalize;
font-weight: 400; font-weight: 400;
font-size: 0.9rem; font-size: 0.8rem;
} }
.activity-receiver{ .activity-receiver{
grid-area: receiver; grid-area: receiver;
font-weight: 500; font-weight: 500;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.activity-amount{ .activity-amount{
text-align: right; text-align: right;

View File

@ -79,7 +79,7 @@
<strong>Make sure you have enough balance.</strong> <strong>Make sure you have enough balance.</strong>
</p> </p>
<sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input> <sm-input floId id="token_receiver" placeholder="Reciever's FLO ID" required animate></sm-input>
<sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required animate> <sm-input id="token_amount" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -125,7 +125,7 @@
<path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" /> <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
</svg> </svg>
</div> </div>
<sm-input id="token_amount_to_buy" placeholder="Amount" type="number" min="1" max="100000" required animate> <sm-input id="token_amount_to_buy" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -165,7 +165,7 @@
<p> <p>
Withdraw or redeem your Rupee back to your specified UPI address. Withdraw or redeem your Rupee back to your specified UPI address.
</p> </p>
<sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required animate> <sm-input id="withdraw_cash_amount" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -202,7 +202,7 @@
Request Rupee from other's using FLO address. Request Rupee from other's using FLO address.
</p> </p>
<sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input> <sm-input floId id="requested_address" placeholder="Request from" required animate></sm-input>
<sm-input id="requested_amount" placeholder="Amount" type="number" min="1" max="100000" required animate> <sm-input id="requested_amount" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -241,7 +241,7 @@
</details> </details>
<p id="pay_cashier_info"></p> <p id="pay_cashier_info"></p>
<sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animate></sm-input> <sm-input floId id="recvr_id" placeholder="Reciever's FLO ID" required animate></sm-input>
<sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required animate> <sm-input id="recvr_amount_to_pay" placeholder="Amount" type="number" min="1" max="100000" required>
<svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64"> <svg slot="icon" class="rupee-symbol" viewBox="0 0 64 64">
<title>rupee-symbol</title> <title>rupee-symbol</title>
<path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/> <path d="M51.65,8H42.07A18.44,18.44,0,0,1,45,15.78h8.88l-2.2,8H45q-1,7.26-5.8,11.1T25.54,39.47L46,63.43V64H33.41L11,37.93l0-6.72H22.11a13.19,13.19,0,0,0,7.8-2.05,9.77,9.77,0,0,0,3.85-5.38H10.11l2.24-8H33.58Q31.44,9,21.93,9H10.11l2.37-9H53.89Z"/>
@ -806,6 +806,9 @@
<div class="empty-state">Add UPI address for easier access during various transactions.</div> <div class="empty-state">Add UPI address for easier access during various transactions.</div>
<sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button> <sm-button variant="no-outline" onclick="showPopup('add_upi_popup')">+ Add UPI address</sm-button>
</section> </section>
<section id="transaction_page" class="page">
</section>
</main> </main>
<script src="components.js"></script> <script src="components.js"></script>
<script id="floGlobals"> <script id="floGlobals">
@ -917,13 +920,13 @@
return card; return card;
}, },
activityCard(obj){ activityCard(obj){
console.log(obj)
let {type, amount, timeStamp, receiver} = obj; let {type, amount, timeStamp, receiver} = obj;
let card = document.createElement('div'), let card = document.createElement('div'),
composition = ``, composition = ``,
icon, icon,
sign, sign,
transaction transaction,
className
card.classList.add('activity') card.classList.add('activity')
switch(type){ switch(type){
case 'sent': case 'sent':
@ -934,6 +937,7 @@
</svg> </svg>
` `
sign = '-' sign = '-'
className = 'withdrawn'
transaction = 'Sent to' transaction = 'Sent to'
break; break;
case 'deposit': case 'deposit':
@ -950,6 +954,7 @@
</svg> </svg>
` `
sign = '+' sign = '+'
className = 'deposited'
transaction = 'Deposited' transaction = 'Deposited'
break; break;
case 'withdraw': case 'withdraw':
@ -967,6 +972,7 @@
</svg> </svg>
` `
sign = '-' sign = '-'
className = 'withdrawn'
transaction = 'withdrawn to' transaction = 'withdrawn to'
break; break;
case 'payCashier': case 'payCashier':
@ -977,6 +983,7 @@
</svg> </svg>
` `
sign = '-' sign = '-'
className = 'withdrawn'
transaction = 'Paid to' transaction = 'Paid to'
break; break;
} }
@ -985,11 +992,11 @@
<h4 class="activity-type">${transaction}</h4>` <h4 class="activity-type">${transaction}</h4>`
if(receiver) if(receiver)
composition += ` composition += `
<h4 class="activity-receiver">${receiver}</h4> <h4 class="activity-receiver ">${receiver}</h4>
` `
composition += ` composition += `
<h4 class="activity-amount">${sign} ₹${amount}</h4> <h4 class="activity-amount ${className}">${sign} ₹${amount}</h4>
<h5 class="activity-time">${formatedTime(timeStamp)}</h5> <h5 class="activity-time">${formatedTime(timeStamp, true)}</h5>
` `
card.innerHTML = composition; card.innerHTML = composition;
return card; return card;
@ -1480,7 +1487,7 @@
} }
const currentYear = new Date().getFullYear() const currentYear = new Date().getFullYear()
function formatedTime(time) { function formatedTime(time, relative) {
try { try {
if(time.indexOf('_')) if(time.indexOf('_'))
time = time.split('_')[0] time = time.split('_')[0]
@ -1490,7 +1497,8 @@
date = timeFrag[2], date = timeFrag[2],
year = timeFrag[3], year = timeFrag[3],
minutes = new Date(parseInt(time)).getMinutes(), minutes = new Date(parseInt(time)).getMinutes(),
hours = new Date(parseInt(time)).getHours() hours = new Date(parseInt(time)).getHours(),
currentTime = new Date().toString().split(' ')
minutes = minutes < 10 ? `0${minutes}` : minutes minutes = minutes < 10 ? `0${minutes}` : minutes
let finalHours = ``; let finalHours = ``;
if (hours > 12) if (hours > 12)
@ -1501,8 +1509,15 @@
finalHours = `${hours}:${minutes}` finalHours = `${hours}:${minutes}`
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM` finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
if(year == currentYear) if(relative){
return `${finalHours} ${month} ${date}`; if(year == currentYear){
if(currentTime[1] === month && date === currentTime[2])
return `${finalHours} ${month} ${date}`;
else
return ` ${date} ${month}`;
}
}
else else
return `${finalHours} ${month} ${date} ${year}`; return `${finalHours} ${month} ${date} ${year}`;
} catch (e) { } catch (e) {
@ -12328,7 +12343,7 @@
async function show_all_user_activities() { async function show_all_user_activities() {
try { try {
//await token_app.actions.retrieveLatestContent(); await token_app.actions.retrieveLatestContent();
const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0") const deposit_msg = floDapps.getNextGeneralData(token_app.master_configurations.TYPE_DEPOSITS, "0")
.reverse(); .reverse();