tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes filter iteractions on mobile. Adds focus to filter components on mobile.

This commit is contained in:
mateuswetah 2022-03-24 14:27:28 -03:00
parent 2f42232b97
commit bfb6228a55
7 changed files with 69 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -1,6 +1,9 @@
<template>
<b-field
class="filter-item-forms"
:ref="isMobileScreen ? ('filter-field-id-' + filter.id) : null"
@touchstart.native="setFilterFocus(filter.id)"
@mousedown.native="setFilterFocus(filter.id)"
:style="{ columnSpan: filtersAsModal && filter.filter_type_object && filter.filter_type_object.component && (filter.filter_type_object.component == 'tainacan-filter-taxonomy-checkbox' || filter.filter_type_object.component == 'tainacan-filter-checkbox') ? 'all' : 'unset'}">
<b-collapse
v-if="displayFilter"
@ -48,7 +51,7 @@
:current-collection-id="$eventBusSearch.collectionId"
@input="onInput"
@updateParentCollapse="onFilterUpdateParentCollapse"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal" />
</div>
</b-collapse>
<div
@ -91,7 +94,9 @@
isRepositoryLevel: Boolean,
expandAll: true,
isLoadingItems: true,
filtersAsModal: Boolean
filtersAsModal: Boolean,
isMobileScreen: false,
focusedElement: false
},
data() {
return {
@ -126,6 +131,18 @@
const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox'];
if (componentsThatShouldCollapseIfEmpty.includes(this.filter.filter_type_object.component))
this.singleCollapseOpen = open;
},
setFilterFocus(filterId) {
if (this.isMobileScreen) {
let fieldElement = this.$refs['filter-field-id-' + filterId] && this.$refs['filter-field-id-' + filterId]['$el'];
if (this.focusedElement !== filterId && fieldElement && (typeof fieldElement.scrollIntoView == 'function')) {
this.focusedElement = filterId;
fieldElement.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
}
}
}
}
}

18
src/views/admin/components/search/filters-items-list.vue
View File

@ -87,7 +87,8 @@
:filter="filter"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template>
<!-- <p
class="has-text-gray"
@ -135,7 +136,8 @@
:filter="filter"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template>
<!-- <p
class="has-text-gray"
@ -187,7 +189,8 @@
:filter="filter"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template>
<!-- <p
class="has-text-gray"
@ -235,7 +238,8 @@
:filter="filter"
:expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template>
<!-- <p
class="has-text-gray"
@ -258,7 +262,8 @@
:filter="filter"
:expand-all="!collapseAll"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal"/>
:filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template>
</div>
<section
@ -299,7 +304,8 @@
taxonomy: String,
filtersAsModal: Boolean,
hasFiltered: Boolean,
isLoadingItems: Boolean
isLoadingItems: Boolean,
isMobileScreen: false
},
data() {
return {

4
src/views/admin/components/search/filters-tags-list.vue
View File

@ -250,6 +250,10 @@
--swiper-navigation-size: 2em;
--swiper-navigation-color: var(--tainacan-secondary);
ul.swiper-wrapper {
padding-inline-start: 0;
}
.swiper-slide {
width: auto;
}

8
src/views/admin/pages/lists/items-page.vue
View File

@ -643,7 +643,8 @@
isFiltersModalActive: false,
hasAnOpenModal: false,
hasAnOpenAlert: true,
metadataSearchCancel: undefined
metadataSearchCancel: undefined,
isMobileScreen: false
}
},
computed: {
@ -1218,9 +1219,10 @@
this.$nextTick(() => {
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) {
const isMobile = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
const previousIsMobile = this.isMobileScreen;
this.isMobileScreen = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
if (isMobile || this.openAdvancedSearch) {
if ((!previousIsMobile && this.isMobileScreen) || this.openAdvancedSearch) {
this.isFiltersModalActive = false;
} else {
this.isFiltersModalActive = true;

25
src/views/admin/scss/_filters-menu-modal.scss
View File

@ -38,12 +38,23 @@
@media screen and (max-width: 768px) {
.modal-content {
background-color: var(--tainacan-background-color);
margin: 0 12% 0 0;
margin: 0 12vw 0 0;
padding: var(--tainacan-container-padding);
max-width: calc(100% - 12vw) !important;
}
&:not(.filters-menu-modal) {
.modal-content {
background-color: var(--tainacan-background-color);
margin: 0 12% 0 0;
margin: 0 12vw 0 0;
padding: var(--tainacan-container-padding);
max-width: calc(100% - 12vw) !important;
}
.modal-close {
top: 16px;
}
}
&.filters-menu-modal {
.modal-close {
right: 12px;
box-shadow: 0 0 11px -6px var(--tainacan-black, #000);
}
}
}
}

5
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_layout.scss
View File

@ -108,7 +108,10 @@
}
#filters-items-list {
padding: var(--tainacan-container-padding);
padding: 0 var(--tainacan-container-padding) 0 0;
}
.modal-close {
top: 16px;
}
}
@media screen and (min-width: 769px) {

13
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
View File

@ -380,7 +380,8 @@
:collection-id="collectionId"
:is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal"
:has-filtered="hasFiltered" />
:has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen" />
</b-modal>
</template>
@ -586,7 +587,7 @@
hasAnOpenAlert: true,
metadataSearchCancel: undefined,
latestNonFullscreenViewMode: '',
isMobile: false,
isMobileScreen: false,
initialItemPosition: null,
isFiltersListFixedAtTop: false,
isFiltersListFixedAtBottom: false,
@ -660,7 +661,7 @@
if (this.filtersAsModal && this.$refs['filters-modal'] && this.$refs['filters-modal'].focus)
this.$refs['filters-modal'].focus();
if (!this.filtersAsModal && !this.isMobile && document.documentElement && (this.registeredViewModes[this.viewMode] == undefined || !this.registeredViewModes[this.viewMode].full_screen))
if (!this.filtersAsModal && !this.isMobileScreen && document.documentElement && (this.registeredViewModes[this.viewMode] == undefined || !this.registeredViewModes[this.viewMode].full_screen))
document.documentElement.classList.remove('is-clipped');
}, 800);
@ -1145,11 +1146,11 @@
},
hideFiltersOnMobile: _.debounce( function() {
this.$nextTick(() => {
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) {
this.isMobile = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
const previousisMobileScreen = this.isMobileScreen;
this.isMobileScreen = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= 768;
if (this.isMobile || this.startWithFiltersHidden || this.openAdvancedSearch)
if ((!previousisMobileScreen && this.isMobileScreen) || this.startWithFiltersHidden || this.openAdvancedSearch)
this.isFiltersModalActive = false;
else
this.isFiltersModalActive = true;