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

More efficiente items resize when window size changes and filter menu is collapsed. Removs filters collapse animation.

This commit is contained in:
Mateus Machado Luna 2018-12-06 11:23:22 -02:00
parent 881f739d0b
commit 5959b2d776
3 changed files with 15 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -625,7 +625,7 @@
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:items="items"
:items-per-page="itemsPerPage"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -647,7 +647,7 @@
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:items="items"
:items-per-page="itemsPerPage"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:total-items="totalItems"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -1495,7 +1495,6 @@
overflow-x: hidden;
visibility: visible;
display: block;
transition: visibility ease 0.5s, display ease 0.5s;
@media screen and (max-width: 768px) {
width: 100%;
@ -1718,7 +1717,6 @@
.items-list-area {
margin-left: 0;
transition: margin-left ease 0.5s;
height: 100%;
overflow: auto;
position: relative;

4
src/admin/pages/lists/term-items-page.vue
View File

@ -585,6 +585,7 @@
advancedSearchResults"
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -607,6 +608,7 @@
!openAdvancedSearch"
:collection-id="collectionId"
:displayed-metadata="displayedMetadata"
:is-filters-menu-compressed="isFiltersMenuCompressed"
:items="items"
:is-loading="isLoadingItems"
:is="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].component : ''"/>
@ -1397,7 +1399,6 @@
overflow-x: hidden;
visibility: visible;
display: block;
transition: visibility ease 0.5s, display ease 0.5s;
@media screen and (max-width: 768px) {
width: 100%;
@ -1621,7 +1622,6 @@
.items-list-area {
margin-left: 0;
transition: margin-left ease 0.5s;
height: 100%;
overflow: auto;
position: relative;

33
src/theme-helper/view-mode-masonry.vue
View File

@ -75,8 +75,13 @@ export default {
items: Array,
isLoading: false,
itemsPerPage: Number,
containerWidth: Number,
windowWidth: Number
columnsCount: Number,
isFiltersMenuCompressed: Boolean
},
watch: {
isFiltersMenuCompressed() {
this.$forceUpdate();
}
},
data () {
return {
@ -111,41 +116,25 @@ export default {
},
getItemHeight(imageWidth, imageHeight) {
let columnsCount;
if (this.$refs.masonryWrapper.clientWidth != this.containerWidth)
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
if (this.windowWidth > 1919)
columnsCount = 7;
else if (this.windowWidth <= 1919 && this.windowWidth > 1407)
columnsCount = 6;
else if (this.windowWidth <= 1407 && this.windowWidth > 1215)
columnsCount = 5;
else if (this.windowWidth <= 1215 && this.windowWidth > 1023)
columnsCount = 4;
else if (this.windowWidth <= 1023 && this.windowWidth > 767)
columnsCount = 3;
else if (this.windowWidth <= 767 && this.windowWidth > 343)
columnsCount = 2;
else if (this.windowWidth <= 343)
columnsCount = 1;
else
columnsCount = 7;
if (this.$refs.masonryWrapper.children[0].childElementCount != this.columnsCount)
this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
let itemWidth = (this.containerWidth/columnsCount) - 22;
let itemWidth = (this.containerWidth/this.columnsCount) - 22;
return (imageHeight*itemWidth)/imageWidth;
},
recalculateItemsHeight: _.debounce( function() {
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
this.$forceUpdate();
}, 800)
},
mounted() {
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
},
created() {
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
window.addEventListener('resize', this.recalculateItemsHeight);
},
beforeDestroy() {