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

Forces grid and cards masonry mode to crop images on css. Adjustments on masonry skeleton.

This commit is contained in:
Mateus Machado Luna 2018-12-10 18:28:37 -02:00
parent 6511aabd2a
commit 29bf34d17d
6 changed files with 80 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,10 +119,13 @@
{{ item.title != undefined ? item.title : '' }}
</p>
</div>
<!-- Thumbnail -->
<a
v-if="item.thumbnail != undefined"
@click="onClickItem($event, item, index)">
@click="onClickItem($event, item, index)"
class="grid-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }">
<img :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
</a>
@ -326,10 +329,13 @@
<div
class="media"
@click="onClickItem($event, item, index)">
<div
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
class="card-thumbnail">
<img
v-if="item.thumbnail != undefined"
:src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
</div>
<div class="list-metadata media-body">
<!-- Description -->

16
src/admin/scss/_view-mode-cards.scss
View File

@ -44,7 +44,10 @@
.skeleton {
width: 130px !important;
height: 130px !important;
margin-left: -130px !important;
}
.card-thumbnail {
width: 130px !important;
height: 130px !important;
}
}
@ -86,11 +89,20 @@
width: 170px;
height: 170px;
border-radius: 0px;
visibility: hidden;
}
.card-thumbnail {
width: 170px;
height: 170px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
}
.skeleton {
width: 170px;
height: 170px;
margin-left: -170px;
position: absolute;
z-index: -1;
background-color: #e0e0e0;
}

27
src/admin/scss/_view-mode-grid.scss
View File

@ -40,7 +40,7 @@
opacity: 0;
padding: 3px 8px;
transition: visibility 0.2s, opacity 0.2s;
margin-top: -31px;
margin-top: -29px;
background-color: $gray2;
a {
@ -53,12 +53,33 @@
background-color: $gray2 !important;
}
.grid-item-thumbnail {
width: 255px;
height: 255px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
display: block;
position: relative;
.skeleton {
width: 255px;
height: 255px;
position: absolute;
z-index: -1;
background-color: #e0e0e0;
bottom: 0;
}
img {
max-width: 255px;
max-height: 255px;
width: 255px;
height: 255px;
height: auto;
border-radius: 0px;
margin-bottom: -5px;
visibility: hidden;
}
}
.metadata-title {

4
src/admin/scss/_view-mode-masonry.scss
View File

@ -73,9 +73,11 @@
img {
width: 100%;
height: auto;
// visibility: hidden;
transition: height 0.2s ease;
}
img:not(.skeleton) {
visibility: hidden;
}
// Masonry skeleton is white due to
// background-blend-mode

5
src/theme-helper/view-mode-cards.vue
View File

@ -50,10 +50,13 @@
</div>
<!-- Remaining metadata -->
<div class="media">
<div
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
class="card-thumbnail">
<img
v-if="item.thumbnail != undefined"
:src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
</div>
<div class="skeleton"/>
<div class="list-metadata media-body">

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

@ -75,7 +75,7 @@ export default {
items: Array,
isLoading: false,
itemsPerPage: Number,
columnsCount: Number,
itemColumnWidth: Number,
isFiltersMenuCompressed: Boolean
},
watch: {
@ -116,23 +116,26 @@ export default {
},
getItemImageHeight(imageWidth, imageHeight) {
if (this.$refs.masonryWrapper.clientWidth != this.containerWidth)
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
if (this.$refs.masonryWrapper.children[0].childElementCount != this.columnsCount)
this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
let itemWidth = (this.containerWidth/this.columnsCount) - 22;
return (imageHeight*itemWidth)/imageWidth;
return (imageHeight*this.itemColumnWidth)/imageWidth;
},
recalculateItemsHeight: _.debounce( function() {
this.$forceUpdate();
}, 800)
}, 500)
},
mounted() {
this.containerWidth = this.$refs.masonryWrapper.clientWidth;
this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
if (this.$refs.masonryWrapper != undefined &&
this.$refs.masonryWrapper.children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
else
this.itemColumnWidth = 202;
},
created() {
window.addEventListener('resize', this.recalculateItemsHeight);