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

Several adjustments to datepicker and dropdown style.

This commit is contained in:
Mateus Machado Luna 2019-06-05 12:26:45 -03:00
parent f8f5c090e5
commit 49793a8bde
8 changed files with 113 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/components/lists/filters-list.vue
View File

@ -1126,6 +1126,7 @@ export default {
.numeric-filter-container,
.date-filter-container {
display: flex;
.field { margin: 0; }
.dropdown {
width: auto;

4
src/admin/scss/_dropdown-and-autocomplete.scss
View File

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

1
src/admin/scss/theme-basics.sass
View File

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

5
src/admin/theme-items-list.vue
View File

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

70
src/classes/filter-types/custom-interval/CustomInterval.vue
View File

@ -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]
});
}

5
src/classes/filter-types/date/Date.vue
View File

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

5
src/classes/filter-types/numeric/Numeric.vue
View File

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

89
src/classes/filter-types/tainacan-filter-item.vue
View File

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