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

Minor UI update

Browse Source
This commit is contained in:
sairaj mote 2022-04-30 00:24:49 +05:30
parent a137d0a237
commit f096cbed4e
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

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

16
scripts/fn_ui.js
View File

@ -832,14 +832,12 @@ function applyPaymentsFilters() {
getRef('history_applied_filters').innerHTML = ``; getRef('history_applied_filters').innerHTML = ``;
if (filter !== 'all') { if (filter !== 'all') {
getRef('history_applied_filters').append( getRef('history_applied_filters').append(
createElement('span', { createElement('button', {
attributes: { 'data-filter': 'type', 'data-value': filter }, attributes: { 'data-filter': 'type', 'data-value': filter, title: 'Remove filter' },
className: 'applied-filter', className: 'applied-filter',
innerHTML: ` innerHTML: `
<span class="applied-filter__title">${filter}</span> <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>
<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>
` `
}) })
); );
@ -855,10 +853,10 @@ function resetPaymentsFilters() {
toggleFilters() toggleFilters()
} }
delegate(getRef('history_applied_filters'), 'click', '.remove-filter', e => { delegate(getRef('history_applied_filters'), 'click', '.applied-filter', e => {
const filter = e.delegateTarget.parentNode.dataset.filter const filter = e.delegateTarget.dataset.filter
const filterValue = e.delegateTarget.parentNode.dataset.value const filterValue = e.delegateTarget.dataset.value
e.delegateTarget.parentNode.remove() e.delegateTarget.remove()
render.paymentsHistory() render.paymentsHistory()
toggleFilters() toggleFilters()
}) })