diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue index 6de15030e..3c83729c3 100644 --- a/src/admin/components/lists/filters-list.vue +++ b/src/admin/components/lists/filters-list.vue @@ -1126,6 +1126,7 @@ export default { .numeric-filter-container, .date-filter-container { display: flex; + .field { margin: 0; } .dropdown { width: auto; diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss index cfe39af94..79472b22c 100644 --- a/src/admin/scss/_dropdown-and-autocomplete.scss +++ b/src/admin/scss/_dropdown-and-autocomplete.scss @@ -22,14 +22,18 @@ } .dropdown-menu { padding: 0px; + margin-top: 0; border-radius: 0px; min-width: 6rem; + border: none; .dropdown-content { padding: 0px; border-radius: 0px !important; max-height: 240px; overflow-y: auto; + box-shadow: none; + border: 1px solid $gray3; .dropdown-item { display: block; diff --git a/src/admin/scss/theme-basics.sass b/src/admin/scss/theme-basics.sass index 52af76465..fd30980b6 100644 --- a/src/admin/scss/theme-basics.sass +++ b/src/admin/scss/theme-basics.sass @@ -7,4 +7,5 @@ @import "../../../node_modules/bulma/sass/components/tabs.sass" @import "../../../node_modules/bulma/sass/elements/button.sass" @import "../../../node_modules/bulma/sass/grid/columns.sass" +@import "../../../node_modules/bulma/sass/components/dropdown.sass" @import "../../../node_modules/bulma/sass/components/modal.sass" diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue index 97d39f968..780ecdeb3 100644 --- a/src/admin/theme-items-list.vue +++ b/src/admin/theme-items-list.vue @@ -37,8 +37,8 @@ export default { @import "./scss/theme-basics.sass"; // Buefy imports - @import "../../node_modules/buefy/src/scss/components/_datepicker.scss"; @import "../../node_modules/buefy/src/scss/utils/_all.scss"; + @import "../../node_modules/buefy/src/scss/components/_datepicker.scss"; @import "../../node_modules/buefy/src/scss/components/_checkbox.scss"; @import "../../node_modules/buefy/src/scss/components/_radio.scss"; @import "../../node_modules/buefy/src/scss/components/_tag.scss"; @@ -152,9 +152,6 @@ export default { top: 5px; } } - .filter-item-forms .datepicker .dropdown-content { - max-width: 100% !important; - } } .search-control { diff --git a/src/classes/filter-types/custom-interval/CustomInterval.vue b/src/classes/filter-types/custom-interval/CustomInterval.vue index 1933d1f6a..c246f3804 100644 --- a/src/classes/filter-types/custom-interval/CustomInterval.vue +++ b/src/classes/filter-types/custom-interval/CustomInterval.vue @@ -47,8 +47,7 @@ export default { mixins: [ wpAjax ], - created(){ - const vm = this; + created() { this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id; this.metadatum = ( this.metadatum_id ) ? this.metadatum_id : this.filter.metadatum.metadatum_id; @@ -62,9 +61,9 @@ .then( res => { let result = res.data; if( result && result.metadata_type ){ - vm.metadatum_object = result; - vm.type = ( result.metadata_type === 'Tainacan\\Metadata_Types\\Date') ? 'date' : 'numeric'; - vm.selectedValues(); + this.metadatum_object = result; + this.type = ( result.metadata_type === 'Tainacan\\Metadata_Types\\Date') ? 'date' : 'numeric'; + this.selectedValues(); } }) .catch(error => { @@ -136,7 +135,7 @@ return; } } - this.emit( this ); + this.emit(); }, 1000), // message for error error_message(){ @@ -218,68 +217,67 @@ this.isTouched = false; } }, - // emit the operation for listeners - emit: ( vm ) => { + emit() { let values = []; let type = ''; - if( vm.type === 'date' ){ + if( this.type === 'date' ){ - if( vm.date_init === null && vm.date_end === null ){ + if( this.date_init === null && this.date_end === null ){ values = []; type = 'DATE'; - vm.isValid = false; - vm.clear = true; + this.isValid = false; + this.clear = true; } else { - let date_init = vm.date_init.getUTCFullYear() + '-' + - ('00' + (vm.date_init.getUTCMonth() + 1)).slice(-2) + '-' + - ('00' + vm.date_init.getUTCDate()).slice(-2); - let date_end = vm.date_end.getUTCFullYear() + '-' + - ('00' + (vm.date_end.getUTCMonth() + 1)).slice(-2) + '-' + - ('00' + vm.date_end.getUTCDate()).slice(-2); + let date_init = this.date_init.getUTCFullYear() + '-' + + ('00' + (this.date_init.getUTCMonth() + 1)).slice(-2) + '-' + + ('00' + this.date_init.getUTCDate()).slice(-2); + let date_end = this.date_end.getUTCFullYear() + '-' + + ('00' + (this.date_end.getUTCMonth() + 1)).slice(-2) + '-' + + ('00' + this.date_end.getUTCDate()).slice(-2); values = [ date_init, date_end ]; type = 'DATE'; - vm.isValid = true; - vm.clear = false; + this.isValid = true; + this.clear = false; } } else { - if( vm.value_init === null || vm.value_end === null - || vm.value_init === '' || vm.value_end === ''){ + if( this.value_init === null || this.value_end === null + || this.value_init === '' || this.value_end === ''){ return; } else { - values = [ vm.value_init, vm.value_end ]; + values = [ this.value_init, this.value_end ]; - if(vm.value_init !== vm.value_end && (vm.value_init % 1 !== 0 && vm.value_end % 1 == 0)) { + if(this.value_init !== this.value_end && (this.value_init % 1 !== 0 && this.value_end % 1 == 0)) { type = 'DECIMAL'; - } else if(vm.value_init !== vm.value_end && - vm.value_init % 1 !== 0 && - vm.value_end % 1 !== 0) { + } else if(this.value_init !== this.value_end && + this.value_init % 1 !== 0 && + this.value_end % 1 !== 0) { type = ''; - } else if(vm.value_init !== vm.value_end && - !(vm.value_init % 1 == 0 && vm.value_end % 1 !== 0)){ + } else if(this.value_init !== this.value_end && + !(this.value_init % 1 == 0 && this.value_end % 1 !== 0)){ type = 'DECIMAL'; } else { type = ''; } - //vm.isValid = true; - //vm.clear = false; + //this.isValid = true; + //this.clear = false; } } - vm.$emit('input', { + this.$emit('input', { filter: 'range', type: type, compare: 'BETWEEN', - metadatum_id: vm.metadatum, - collection_id: ( vm.collection_id ) ? vm.collection_id : vm.filter.collection_id, + metadatum_id: this.metadatum, + collection_id: ( this.collection_id ) ? this.collection_id : this.filter.collection_id, value: values }); if (values[0] != undefined && values[1] != undefined) { - vm.$eventBusSearch.$emit( 'sendValuesToTags', { - filterId: vm.filter.id, + this.$eventBusSearch.$emit( 'sendValuesToTags', { + filterId: this.filter.id, value: values[0] + ' - ' + values[1] }); } diff --git a/src/classes/filter-types/date/Date.vue b/src/classes/filter-types/date/Date.vue index 84ea9d0a8..5db5d7a1b 100644 --- a/src/classes/filter-types/date/Date.vue +++ b/src/classes/filter-types/date/Date.vue @@ -238,6 +238,11 @@ .date-filter-container { display: flex; height: 30px; + + @media screen and (min-width: 769px) and (max-width: 1500px) { + flex-wrap: wrap; + height: 60px; + } .dropdown { width: auto; diff --git a/src/classes/filter-types/numeric/Numeric.vue b/src/classes/filter-types/numeric/Numeric.vue index 8c02c344d..9fad35ea3 100644 --- a/src/classes/filter-types/numeric/Numeric.vue +++ b/src/classes/filter-types/numeric/Numeric.vue @@ -216,6 +216,11 @@ .numeric-filter-container { display: flex; height: 30px; + + @media screen and (min-width: 769px) and (max-width: 1500px) { + flex-wrap: wrap; + height: 60px; + } .dropdown { width: auto; diff --git a/src/classes/filter-types/tainacan-filter-item.vue b/src/classes/filter-types/tainacan-filter-item.vue index 488972b22..28726a6b8 100644 --- a/src/classes/filter-types/tainacan-filter-item.vue +++ b/src/classes/filter-types/tainacan-filter-item.vue @@ -99,6 +99,7 @@ .filter-item-forms { .datepicker { + width: 100%; .datepicker-content { height: auto; @@ -108,47 +109,70 @@ } } - .dropdown-item { - background-color: white !important; + .dropdown-menu { + background: transparent; + border: none; + + .dropdown-item { + background-color: white !important; + } } @media screen and (min-width: 1024px) { .datepicker-header { - - .pagination-list { - .field.has-addons { - display: table-cell !important; - width: 78px !important; + margin-bottom: 0.5rem; + padding-top: 0.15rem; + padding-bottom: 0.5rem; + + .pagination { + flex-wrap: wrap; + + .pagination-list { + margin-bottom: 0.5rem; - .control { - height: 24px !important; - width: 74px !important; + .field.has-addons { + width: 100% !important; - select { - padding-left: 1px !important; + .control { + height: 24px !important; + width: 74px !important; + + .select { + min-width: 100% !important; + + select { + padding-left: 1px !important; + font-size: 0.75rem !important; + height: 24px !important; + min-width: 100% !important; + } + } } } } - } - .pagination-previous { - margin: 0; - height: 24px; - padding: 0; - font-size: 0.75rem; - } + .pagination-previous { + margin: 0; + height: 24px; + padding: 0; + font-size: 0.75rem; + border: none; + order: 3; + } - .pagination-next { - margin: 0; - height: 24px; - padding: 0; - font-size: 0.75rem; + .pagination-next { + margin: 0; + height: 24px; + padding: 0; + font-size: 0.75rem; + border: none; + } } } .dropdown-item { - padding: 0.8em; + padding: 0.8rem !important; } .dropdown-menu { @@ -161,7 +185,18 @@ margin-bottom: 0px; .datepicker-cell { - padding: 0.2rem 0.1rem !important; + padding: 0.15rem 0.175rem !important; + border: none !important; + } + .datepicker-cell.is-today, + .datepicker-cell.is-today:hover { + color: white !important; + background-color: $turquoise3 !important; + } + .datepicker-cell.is-selected, + .datepicker-cell.is-selected:hover { + color: white !important; + background-color: $turquoise5 !important; } } @@ -178,7 +213,7 @@ max-width: 165px !important; border-radius: 2px !important; padding: 0px; - max-height: inherit; + max-height: inherit !important; } } }