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

Adds filter to allow using legacy masonry layout. #498.

This commit is contained in:
mateuswetah 2022-06-22 09:59:16 -03:00
parent d46910ac9a
commit 930d071db1
4 changed files with 114 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@ -28,6 +28,7 @@ module.exports = {
'vue/require-default-prop': 'off' 'vue/require-default-prop': 'off'
}, },
globals: { globals: {
'wp': true,
'tainacan_plugin': true, 'tainacan_plugin': true,
'tainacan_blocks': true, 'tainacan_blocks': true,
'_': true, '_': true,

23
src/views/admin/components/lists/items-list.vue
View File

@ -311,14 +311,17 @@
<!-- MASONRY VIEW MODE --> <!-- MASONRY VIEW MODE -->
<ul <ul
v-if="viewMode == 'masonry'" v-if="viewMode == 'masonry'"
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }" :class="{
'hide-items-selection': $adminOptions.hideItemsListSelection,
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<li <li
:key="index" :key="index"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
v-for="(item, index) of items" v-for="(item, index) of items"
:class="{ :class="{
'tainacan-masonry-grid-sizer': index == 0 'tainacan-masonry-grid-sizer': index == 0
}"> }">
<div <div
:class="{ :class="{
@ -384,11 +387,11 @@
@click.right="onRightClickItem($event, item)" @click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-large-full', 280)" :width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-large-full', 280)" :height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-large-full')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)" :src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :transition-duration="500"
/> />
@ -1372,7 +1375,8 @@ export default {
cursorPosY: -1, cursorPosY: -1,
contextMenuItem: null, contextMenuItem: null,
singleItemSelection: false, singleItemSelection: false,
masonry: false masonry: false,
shouldUseLegacyMasonyCols: false
} }
}, },
computed: { computed: {
@ -1463,6 +1467,9 @@ export default {
if (this.highlightsItem) if (this.highlightsItem)
setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000); setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000);
}, },
created() {
this.shouldUseLegacyMasonyCols = wp.hooks.hasFilter('tainacan_use_legacy_masonry_view_mode_cols') && wp.hooks.applyFilters('tainacan_use_legacy_masonry_view_mode_cols', false);
},
methods: { methods: {
...mapActions('collection', [ ...mapActions('collection', [
'deleteItem', 'deleteItem',

118
src/views/admin/scss/_view-mode-masonry.scss
View File

@ -10,27 +10,51 @@
animation-name: appear; animation-name: appear;
animation-duration: 0.5s; animation-duration: 0.5s;
&>li, &:not(.tainacan-masonry-container--legacy){
.tainacan-masonry-grid-sizer { &>li,
width: calc(14.285% - 25px); &>.tainacan-masonry-grid-sizer {
width: calc(14.285% - 25px);
@media screen and (max-width: 2560px) { @media screen and (max-width: 2560px) {
width: calc(16.666% - 25px); width: calc(16.666% - 25px);
}
@media screen and (max-width: 1920px) {
width: calc(20% - 25px);
}
@media screen and (max-width: 1740px) {
width: calc(25% - 25px);
}
@media screen and (max-width: 1440px) {
width: calc(33.333% - 25px);
}
@media screen and (max-width: 1024px) {
width: calc(50% - 25px);
}
@media screen and (max-width: 620px) {
width: calc(100% - 25px);
}
} }
@media screen and (max-width: 1920px) { }
width: calc(20% - 25px); &.tainacan-masonry-container--legacy {
} &>li,
@media screen and (max-width: 1740px) { &>.tainacan-masonry-grid-sizer {
width: calc(25% - 25px); width: calc(14.285% - 25px);
}
@media screen and (max-width: 1440px) { @media screen and (max-width: 1920px) {
width: calc(33.333% - 25px); width: calc(16.666% - 25px);
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1440px) {
width: calc(50% - 25px); width: calc(20% - 25px);
} }
@media screen and (max-width: 620px) { @media screen and (max-width: 1360px) {
width: calc(100% - 25px); width: calc(25% - 25px);
}
@media screen and (max-width: 1024px) {
width: calc(33.333% - 25px);
}
@media screen and (max-width: 768px) {
width: calc(50% - 25px);
}
} }
} }
.tainacan-masonry-item { .tainacan-masonry-item {
@ -171,7 +195,6 @@
padding-right: 25px; padding-right: 25px;
column-gap: 25px; column-gap: 25px;
height: auto !important; height: auto !important;
column-count: 7;
.skeleton { .skeleton {
width: 100%; width: 100%;
@ -179,23 +202,46 @@
break-inside: avoid; break-inside: avoid;
} }
@media screen and (max-width: 2560px) { &:not(.tainacan-masonry-container--legacy) {
column-count: 6; column-count: 7;
@media screen and (max-width: 2560px) {
column-count: 6;
}
@media screen and (max-width: 1920px) {
column-count: 5;
}
@media screen and (max-width: 1740px) {
column-count: 4;
}
@media screen and (max-width: 1440px) {
column-count: 3;
}
@media screen and (max-width: 1024px) {
column-count: 2;
}
@media screen and (max-width: 620px) {
column-count: 1;
}
} }
@media screen and (max-width: 1920px) { &.tainacan-masonry-container--legacy {
column-count: 5; column-count: 7;
}
@media screen and (max-width: 1740px) { @media screen and (max-width: 1920px) {
column-count: 4; column-count: 6;
} }
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
column-count: 3; column-count: 5;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1360px) {
column-count: 2; column-count: 4;
} }
@media screen and (max-width: 620px) { @media screen and (max-width: 1024px) {
column-count: 1; column-count: 3;
}
@media screen and (max-width: 768px) {
column-count: 2;
}
} }
} }

23
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-masonry.vue
View File

@ -19,6 +19,9 @@
<!-- SKELETON LOADING --> <!-- SKELETON LOADING -->
<div <div
v-if="isLoading" v-if="isLoading"
:class="{
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container--skeleton"> class="tainacan-masonry-container--skeleton">
<div <div
:key="item" :key="item"
@ -30,6 +33,9 @@
<!-- MASONRY VIEW MODE --> <!-- MASONRY VIEW MODE -->
<ul <ul
v-if="!isLoading" v-if="!isLoading"
:class="{
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<li <li
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
@ -64,15 +70,14 @@
</div> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
<blur-hash-image <blur-hash-image
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-large-full', 280)" :width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-large-full', 280)" :height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-large-full')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)" :src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :transition-duration="500"
/> />
@ -95,7 +100,8 @@ export default {
], ],
data () { data () {
return { return {
masonry: false masonry: false,
shouldUseLegacyMasonyCols: false
} }
}, },
watch: { watch: {
@ -118,6 +124,9 @@ export default {
immediate: true immediate: true
} }
}, },
created() {
this.shouldUseLegacyMasonyCols = wp.hooks.hasFilter('tainacan_use_legacy_masonry_view_mode_cols') && wp.hooks.applyFilters('tainacan_use_legacy_masonry_view_mode_cols', false);
},
beforeDestroy() { beforeDestroy() {
if (this.masonry !== false) if (this.masonry !== false)
this.masonry.destroy(); this.masonry.destroy();