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

Merge pull request #15 from ranchimall/ui-work

Browse Source 
UI work
This commit is contained in:
sairaj mote 2022-04-24 17:08:02 +05:30 committed by GitHub
commit 6d39f6a642
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 228 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
css/main.css
View File

@ -103,23 +103,21 @@ button:not(:disabled) {
.button {
background-color: rgba(var(--text-color), 0.06);
}
.button--primary,
.button--danger {
.button--primary, .button--danger {
color: rgba(var(--background-color), 1);
}
.button--primary .icon,
.button--danger .icon {
.button--primary .icon, .button--danger .icon {
fill: rgba(var(--background-color), 1);
}
.button--primary {
background-color: var(--accent-color);
}
.button--danger {
background-color: var(--danger-color);
}
.button--small {
padding: 0.4rem 0.6rem;
}
.cta {
text-transform: uppercase;
@ -521,6 +519,12 @@ ul {
cursor: pointer;
}
.flo-icon {
margin-right: 0.3rem;
height: 1.5rem;
width: 1.5rem;
}
#secondary_pages {
display: flex;
flex-direction: column;
@ -569,8 +573,19 @@ ul {
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
#sign_up .warning {
margin-top: 2rem;
#flo_id_warning {
padding-bottom: 1.5rem;
border-bottom: thin solid rgba(var(--text-color), 0.3);
}
#flo_id_warning .icon {
height: 4rem;
width: 4rem;
padding: 1rem;
background-color: #ffc107;
border-radius: 3rem;
fill: rgba(0, 0, 0, 0.8);
margin-bottom: 1.5rem;
}
#main_header {
@ -641,6 +656,23 @@ ul {
border-radius: 1rem 1rem 0 0;
z-index: 1;
}
.nav-item .badge {
display: flex;
align-items: center;
justify-content: center;
content: attr(data-notifications);
position: absolute;
top: 0;
right: 0;
font-size: 0.8rem;
padding: 0.3rem;
background: var(--accent-color);
color: rgba(var(--background-color), 1);
aspect-ratio: 1/1;
font-weight: 700;
border-radius: 0.3rem;
margin: 0.3rem;
}
.inner-page {
padding: 0 1.5rem;
@ -690,7 +722,7 @@ ul {
#quick_actions_container {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}
.primary-action {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

66
css/main.scss
View File

@ -95,19 +95,22 @@ button {
}
.button {
background-color: rgba(var(--text-color), 0.06);
}
.button--primary,
.button--danger {
color: rgba(var(--background-color), 1);
.icon {
fill: rgba(var(--background-color), 1);
&--primary,
&--danger {
color: rgba(var(--background-color), 1);
.icon {
fill: rgba(var(--background-color), 1);
}
}
&--primary {
background-color: var(--accent-color);
}
&--danger {
background-color: var(--danger-color);
}
&--small {
padding: 0.4rem 0.6rem;
}
}
.button--primary {
background-color: var(--accent-color);
}
.button--danger {
background-color: var(--danger-color);
}
.cta {
text-transform: uppercase;
@ -479,7 +482,11 @@ ul {
margin-left: -0.5rem;
cursor: pointer;
}
.flo-icon {
margin-right: 0.3rem;
height: 1.5rem;
width: 1.5rem;
}
#secondary_pages {
display: flex;
flex-direction: column;
@ -527,8 +534,18 @@ ul {
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
.warning {
margin-top: 2rem;
}
#flo_id_warning {
padding-bottom: 1.5rem;
border-bottom: thin solid rgba(var(--text-color), 0.3);
.icon {
height: 4rem;
width: 4rem;
padding: 1rem;
background-color: #ffc107;
border-radius: 3rem;
fill: rgba(0, 0, 0, 0.8);
margin-bottom: 1.5rem;
}
}
#main_header {
@ -597,6 +614,23 @@ ul {
border-radius: 1rem 1rem 0 0;
z-index: 1;
}
.badge {
display: flex;
align-items: center;
justify-content: center;
content: attr(data-notifications);
position: absolute;
top: 0;
right: 0;
font-size: 0.8rem;
padding: 0.3rem;
background: var(--accent-color);
color: rgba(var(--background-color), 1);
aspect-ratio: 1/1;
font-weight: 700;
border-radius: 0.3rem;
margin: 0.3rem;
}
}
.inner-page {
padding: 0 1.5rem;
@ -644,7 +678,7 @@ ul {
#quick_actions_container {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}
.primary-action {
display: flex;

166
index.html
View File

File diff suppressed because one or more lines are too long

2
scripts/components.js
View File

@ -2555,7 +2555,7 @@ smSelect.innerHTML = `
flex-direction: column;
min-width: var(--min-width);
max-height: var(--max-height, auto);
background: rgba(var(--background-color,(255,255,255)), 1);
background: rgba(var(--foreground-color,(255,255,255)), 1);
border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
border-radius: var(--border-radius, 0.5rem);
z-index: 1;

1
scripts/fn_pay.js
View File

@ -169,6 +169,7 @@ Cashier.init = function () {
callback: UI_RENDER_FN
}));
*/
promises.push(User.getCashierUPI());
Promise.all(promises)
.then(result => resolve(result))
.catch(error => reject(error))

48
scripts/fn_ui.js
View File

@ -233,6 +233,54 @@ userUI.renderMoneyRequests = function (requests, error = null) {
}
}
}
let totalRequests = 0;
for (const request in User.moneyRequests) {
if (!User.moneyRequests[request].note) totalRequests++;
}
const animOptions = {
duration: 200,
fill: 'forwards',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
}
if (totalRequests) {
if (!getRef('requests_page_button').querySelector('.badge')) {
const badge = createElement('span', {
className: 'badge',
textContent: totalRequests
})
getRef('requests_page_button').append(badge)
badge.animate([
{
transform: 'scale(0) translateY(0.5rem)'
},
{
transform: 'scale(1) translateY(0)'
},
], animOptions)
} else {
const badge = getRef('requests_page_button').querySelector('.badge');
badge.textContent = totalRequests;
badge.animate([
{ transform: 'scale(1)' },
{ transform: `scale(1.5)` },
{ transform: 'scale(1)' }
], animOptions)
}
} else {
if (getRef('requests_page_button').querySelector('.badge')) {
const badge = getRef('requests_page_button').querySelector('.badge')
badge.animate([
{
transform: 'scale(1) translateY(0)'
},
{
transform: 'scale(0) translateY(0.5rem)'
},
], animOptions).onfinish = () => {
badge.remove()
}
}
}
};
userUI.payRequest = function (reqID) {