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

Merge pull request #18 from ranchimall/ui-work

Browse Source 
Minor UI update
This commit is contained in:
sairaj mote 2022-04-30 00:25:21 +05:30 committed by GitHub
commit 261e4eb9d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/main.css
View File

@ -915,7 +915,7 @@ ul {
}
#history_applied_filters_wrapper {
padding-bottom: 1rem;
padding: 0.2rem 0 1rem 0;
background-color: rgba(var(--background-color), 1);
z-index: 1;
position: -webkit-sticky;
@ -926,14 +926,20 @@ ul {
.applied-filter {
display: flex;
align-items: center;
padding-left: 0.8rem;
border-radius: 0.3rem;
padding: 0.5rem 0.6rem 0.5rem 0.8rem;
border-radius: 1rem;
border: solid thin rgba(var(--text-color), 0.2);
text-transform: capitalize;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
}
.applied-filter button {
padding: 0.6rem;
}
.applied-filter .icon {
margin-left: 0.3rem;
}
.category-chip {
display: inline-flex;
@ -941,9 +947,10 @@ ul {
justify-content: center;
padding: 0.3rem 0.5rem;
border-radius: 0.3rem;
font-size: 0.75rem;
font-size: 0.8rem;
border: solid thin rgba(var(--text-color), 0.2);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.category-chip:focus {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
css/main.scss
View File

@ -864,7 +864,7 @@ ul {
}
}
#history_applied_filters_wrapper {
padding-bottom: 1rem;
padding: 0.2rem 0 1rem 0;
background-color: rgba(var(--background-color), 1);
z-index: 1;
position: sticky;
@ -873,13 +873,19 @@ ul {
.applied-filter {
display: flex;
align-items: center;
padding-left: 0.8rem;
border-radius: 0.3rem;
padding: 0.5rem 0.6rem 0.5rem 0.8rem;
border-radius: 1rem;
border: solid thin rgba(var(--text-color), 0.2);
text-transform: capitalize;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
button {
padding: 0.6rem;
}
.icon {
margin-left: 0.3rem;
}
}
.category-chip {
display: inline-flex;
@ -887,9 +893,10 @@ ul {
justify-content: center;
padding: 0.3rem 0.5rem;
border-radius: 0.3rem;
font-size: 0.75rem;
font-size: 0.8rem;
border: solid thin rgba(var(--text-color), 0.2);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
&:focus {
outline: solid var(--accent-color);

16
scripts/fn_ui.js
View File

@ -832,14 +832,12 @@ function applyPaymentsFilters() {
getRef('history_applied_filters').innerHTML = ``;
if (filter !== 'all') {
getRef('history_applied_filters').append(
createElement('span', {
attributes: { 'data-filter': 'type', 'data-value': filter },
createElement('button', {
attributes: { 'data-filter': 'type', 'data-value': filter, title: 'Remove filter' },
className: 'applied-filter',
innerHTML: `
<span class="applied-filter__title">${filter}</span>
<button class="remove-filter">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
</button>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
`
})
);
@ -855,10 +853,10 @@ function resetPaymentsFilters() {
toggleFilters()
}
delegate(getRef('history_applied_filters'), 'click', '.remove-filter', e => {
const filter = e.delegateTarget.parentNode.dataset.filter
const filterValue = e.delegateTarget.parentNode.dataset.value
e.delegateTarget.parentNode.remove()
delegate(getRef('history_applied_filters'), 'click', '.applied-filter', e => {
const filter = e.delegateTarget.dataset.filter
const filterValue = e.delegateTarget.dataset.value
e.delegateTarget.remove()
render.paymentsHistory()
toggleFilters()
})