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'
},
globals: {
'wp': true,
'tainacan_plugin': true,
'tainacan_blocks': true,
'_': true,

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

@ -311,14 +311,17 @@
<!-- MASONRY VIEW MODE -->
<ul
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">
<li
:key="index"
:data-tainacan-item-id="item.id"
v-for="(item, index) of items"
:class="{
'tainacan-masonry-grid-sizer': index == 0
'tainacan-masonry-grid-sizer': index == 0
}">
<div
:class="{
@ -384,11 +387,11 @@
@click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)"
:width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : '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')"
:transition-duration="500"
/>
@ -1372,7 +1375,8 @@ export default {
cursorPosY: -1,
contextMenuItem: null,
singleItemSelection: false,
masonry: false
masonry: false,
shouldUseLegacyMasonyCols: false
}
},
computed: {
@ -1463,6 +1467,9 @@ export default {
if (this.highlightsItem)
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: {
...mapActions('collection', [
'deleteItem',

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

@ -10,27 +10,51 @@
animation-name: appear;
animation-duration: 0.5s;
&>li,
.tainacan-masonry-grid-sizer {
width: calc(14.285% - 25px);
&:not(.tainacan-masonry-container--legacy){
&>li,
&>.tainacan-masonry-grid-sizer {
width: calc(14.285% - 25px);
@media screen and (max-width: 2560px) {
width: calc(16.666% - 25px);
@media screen and (max-width: 2560px) {
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);
}
@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);
}
&.tainacan-masonry-container--legacy {
&>li,
&>.tainacan-masonry-grid-sizer {
width: calc(14.285% - 25px);
@media screen and (max-width: 1920px) {
width: calc(16.666% - 25px);
}
@media screen and (max-width: 1440px) {
width: calc(20% - 25px);
}
@media screen and (max-width: 1360px) {
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 {
@ -171,7 +195,6 @@
padding-right: 25px;
column-gap: 25px;
height: auto !important;
column-count: 7;
.skeleton {
width: 100%;
@ -179,23 +202,46 @@
break-inside: avoid;
}
@media screen and (max-width: 2560px) {
column-count: 6;
&:not(.tainacan-masonry-container--legacy) {
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) {
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;
&.tainacan-masonry-container--legacy {
column-count: 7;
@media screen and (max-width: 1920px) {
column-count: 6;
}
@media screen and (max-width: 1440px) {
column-count: 5;
}
@media screen and (max-width: 1360px) {
column-count: 4;
}
@media screen and (max-width: 1024px) {
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 -->
<div
v-if="isLoading"
:class="{
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container--skeleton">
<div
:key="item"
@ -30,6 +33,9 @@
<!-- MASONRY VIEW MODE -->
<ul
v-if="!isLoading"
:class="{
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container">
<li
:data-tainacan-item-id="item.id"
@ -64,15 +70,14 @@
</div>
<!-- Thumbnail -->
<blur-hash-image
v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-large-full', item.document_mimetype)"
:width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : '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')"
:transition-duration="500"
/>
@ -95,7 +100,8 @@ export default {
],
data () {
return {
masonry: false
masonry: false,
shouldUseLegacyMasonyCols: false
}
},
watch: {
@ -118,6 +124,9 @@ export default {
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() {
if (this.masonry !== false)
this.masonry.destroy();