Improves responsiveness of advanced search.
This commit is contained in:
parent
303d36c39d
commit
156fabb6ed
|
@ -9,6 +9,7 @@
|
|||
v-for="(searchCriterion, index) in searchCriteria"
|
||||
:key="index + '-' + searchCriterion.index + '-' + searchCriterion.type"
|
||||
grouped
|
||||
group-multiline
|
||||
class="tainacan-form">
|
||||
|
||||
<!-- Metadata (Search criteria) -->
|
||||
|
@ -97,7 +98,7 @@
|
|||
</b-field>
|
||||
|
||||
<!-- Inputs -->
|
||||
<b-field class="column is-half">
|
||||
<b-field class="column is-half is-10-mobile">
|
||||
<template v-if="searchCriterion.type == 'metaquery' && advancedSearchQuery.metaquery[searchCriterion.index]">
|
||||
<b-input
|
||||
v-if="getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'int' || getAdvancedSearchQueryCriterionMetadataType(searchCriterion.index) == 'float'"
|
||||
|
@ -646,7 +647,6 @@
|
|||
border: 1px solid var(--tainacan-input-border-color);
|
||||
border-radius: 1px;
|
||||
transition: height 0.2s ease;
|
||||
}
|
||||
|
||||
.tnc-advanced-search-container {
|
||||
position: relative;
|
||||
|
@ -690,8 +690,15 @@
|
|||
border: none;
|
||||
border-radius: var(--tainacan-button-border-radius, 4px);
|
||||
}
|
||||
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
.tnc-advanced-search-container {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.is-12>.columns {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
@ -700,7 +707,6 @@
|
|||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
|
@ -1308,10 +1308,13 @@
|
|||
this.windowWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
|
||||
this.isMobileScreen = this.windowWidth <= 768;
|
||||
|
||||
// The window size didn't changed (the resize event is triggered by scrolls on mobile)
|
||||
// Also if we're on advanced search we should not open the filters
|
||||
if (previousWindowWidth == this.windowWidth || this.openAdvancedSearch)
|
||||
return;
|
||||
|
||||
if ( // We DO NOT want to open the filters due to this resize event IF:
|
||||
(!previousMobileScreen && this.isMobileScreen) || // We're coming from a non-mobile screen to a mobile screen, or
|
||||
(previousWindowWidth == this.windowWidth) || // The window size didn't changed (the resize event is triggered by scrolls on mobile), or
|
||||
this.openAdvancedSearch // Advanced search is opened
|
||||
!previousMobileScreen && this.isMobileScreen // We're coming from a non-mobile screen to a mobile screen
|
||||
) {
|
||||
this.isFiltersModalActive = false;
|
||||
} else {
|
||||
|
|
|
@ -1430,13 +1430,13 @@
|
|||
this.isMobileScreen = this.windowWidth <= 768;
|
||||
|
||||
// The window size didn't changed (the resize event is triggered by scrolls on mobile)
|
||||
if (previousWindowWidth == this.windowWidth)
|
||||
// Also if we're on advanced search we should not open the filters
|
||||
if (previousWindowWidth == this.windowWidth || this.openAdvancedSearch)
|
||||
return;
|
||||
|
||||
if ( // We DO NOT want to open the filters due to this resize event IF:
|
||||
(!previousMobileScreen && this.isMobileScreen) || // We're coming from a non-mobile screen to a mobile screen, or
|
||||
this.startWithFiltersHidden || // Filters should begin disabled, or
|
||||
this.openAdvancedSearch // Advanced search is opened
|
||||
this.startWithFiltersHidden // Filters should begin disabled
|
||||
)
|
||||
this.isFiltersModalActive = false;
|
||||
else
|
||||
|
|
Loading…
Reference in New Issue