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> <template>
<b-field <b-field
class="filter-item-forms" 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'}"> :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 <b-collapse
v-if="displayFilter" v-if="displayFilter"
@ -48,7 +51,7 @@
:current-collection-id="$eventBusSearch.collectionId" :current-collection-id="$eventBusSearch.collectionId"
@input="onInput" @input="onInput"
@updateParentCollapse="onFilterUpdateParentCollapse" @updateParentCollapse="onFilterUpdateParentCollapse"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal" />
</div> </div>
</b-collapse> </b-collapse>
<div <div
@ -91,7 +94,9 @@
isRepositoryLevel: Boolean, isRepositoryLevel: Boolean,
expandAll: true, expandAll: true,
isLoadingItems: true, isLoadingItems: true,
filtersAsModal: Boolean filtersAsModal: Boolean,
isMobileScreen: false,
focusedElement: false
}, },
data() { data() {
return { return {
@ -126,6 +131,18 @@
const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox']; const componentsThatShouldCollapseIfEmpty = ['tainacan-filter-taxonomy-checkbox', 'tainacan-filter-selectbox', 'tainacan-filter-checkbox'];
if (componentsThatShouldCollapseIfEmpty.includes(this.filter.filter_type_object.component)) if (componentsThatShouldCollapseIfEmpty.includes(this.filter.filter_type_object.component))
this.singleCollapseOpen = open; 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" :filter="filter"
:expand-all="!collapseAll" :expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'" :is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template> </template>
<!-- <p <!-- <p
class="has-text-gray" class="has-text-gray"
@ -135,7 +136,8 @@
:filter="filter" :filter="filter"
:expand-all="!collapseAll" :expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'" :is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template> </template>
<!-- <p <!-- <p
class="has-text-gray" class="has-text-gray"
@ -187,7 +189,8 @@
:filter="filter" :filter="filter"
:expand-all="!collapseAll" :expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'" :is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template> </template>
<!-- <p <!-- <p
class="has-text-gray" class="has-text-gray"
@ -235,7 +238,8 @@
:filter="filter" :filter="filter"
:expand-all="!collapseAll" :expand-all="!collapseAll"
:is-repository-level="key == 'repository-filters'" :is-repository-level="key == 'repository-filters'"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template> </template>
<!-- <p <!-- <p
class="has-text-gray" class="has-text-gray"
@ -258,7 +262,8 @@
:filter="filter" :filter="filter"
:expand-all="!collapseAll" :expand-all="!collapseAll"
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal"/> :filters-as-modal="filtersAsModal"
:is-mobile-screen="isMobileScreen" />
</template> </template>
</div> </div>
<section <section
@ -299,7 +304,8 @@
taxonomy: String, taxonomy: String,
filtersAsModal: Boolean, filtersAsModal: Boolean,
hasFiltered: Boolean, hasFiltered: Boolean,
isLoadingItems: Boolean isLoadingItems: Boolean,
isMobileScreen: false
}, },
data() { data() {
return { return {

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

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

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

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

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

@ -38,12 +38,23 @@
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.modal-content { &:not(.filters-menu-modal) {
background-color: var(--tainacan-background-color); .modal-content {
margin: 0 12% 0 0; background-color: var(--tainacan-background-color);
margin: 0 12vw 0 0; margin: 0 12% 0 0;
padding: var(--tainacan-container-padding); margin: 0 12vw 0 0;
max-width: calc(100% - 12vw) !important; 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 { #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) { @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" :collection-id="collectionId"
:is-repository-level="isRepositoryLevel" :is-repository-level="isRepositoryLevel"
:filters-as-modal="filtersAsModal" :filters-as-modal="filtersAsModal"
:has-filtered="hasFiltered" /> :has-filtered="hasFiltered"
:is-mobile-screen="isMobileScreen" />
</b-modal> </b-modal>
</template> </template>
@ -586,7 +587,7 @@
hasAnOpenAlert: true, hasAnOpenAlert: true,
metadataSearchCancel: undefined, metadataSearchCancel: undefined,
latestNonFullscreenViewMode: '', latestNonFullscreenViewMode: '',
isMobile: false, isMobileScreen: false,
initialItemPosition: null, initialItemPosition: null,
isFiltersListFixedAtTop: false, isFiltersListFixedAtTop: false,
isFiltersListFixedAtBottom: false, isFiltersListFixedAtBottom: false,
@ -660,7 +661,7 @@
if (this.filtersAsModal && this.$refs['filters-modal'] && this.$refs['filters-modal'].focus) if (this.filtersAsModal && this.$refs['filters-modal'] && this.$refs['filters-modal'].focus)
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'); document.documentElement.classList.remove('is-clipped');
}, 800); }, 800);
@ -1145,11 +1146,11 @@
}, },
hideFiltersOnMobile: _.debounce( function() { hideFiltersOnMobile: _.debounce( function() {
this.$nextTick(() => { this.$nextTick(() => {
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) { 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; this.isFiltersModalActive = false;
else else
this.isFiltersModalActive = true; this.isFiltersModalActive = true;