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

Improves responsiveness of advanced search.

This commit is contained in:
mateuswetah 2023-11-27 14:56:12 -03:00
parent 303d36c39d
commit 156fabb6ed
3 changed files with 53 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/admin/components/search/advanced-search.vue
View File

@ -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,52 +647,58 @@
border: 1px solid var(--tainacan-input-border-color);
border-radius: 1px;
transition: height 0.2s ease;
}
.tnc-advanced-search-container {
position: relative;
padding: 1.25em;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px);
.tnc-advanced-search-container {
position: relative;
padding: 1.25em;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px);
h3 {
font-size: 1em !important;
padding-top: 0 !important;
color: var(--tainacan-heading-color) !important;
margin-bottom: 1em !important;
}
.tainacan-form {
margin-bottom: 0.125em !important;
}
.column {
padding: 0;
}
.control {
font-size: 1em;
margin-bottom: 0px !important;
h3 {
font-size: 1em !important;
padding-top: 0 !important;
color: var(--tainacan-heading-color) !important;
margin-bottom: 1em !important;
}
.tainacan-form {
margin-bottom: 0.125em !important;
}
.column {
padding: 0;
}
.control {
font-size: 1em;
margin-bottom: 0px !important;
.select{
width: 100% !important;
select{
.select{
width: 100% !important;
select{
width: 100% !important;
}
}
}
}
.add-link-advanced-search a {
font-size: 0.8125em;
display: inline-flex;
align-items: center;
margin-right: 1em;
}
.add-link-advanced-search a {
font-size: 0.8125em;
display: inline-flex;
align-items: center;
margin-right: 1em;
}
.button-remove-criterion {
color: var(--tainacan-input-color);
background: transparent;
border: none;
border-radius: var(--tainacan-button-border-radius, 4px);
.button-remove-criterion {
color: var(--tainacan-input-color);
background: transparent;
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>

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

@ -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 {

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

@ -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