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

Fixes to the card blur hash usage and skeleton

This commit is contained in:
mateuswetah 2021-02-10 10:18:24 -03:00
parent eaae6f5b94
commit 813894aa7d
3 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/admin/scss/_view-mode-cards.scss
View File

@ -41,11 +41,7 @@
min-height: 171px;
max-height: 171px;
img {
width: 130px !important;
height: 130px !important;
}
.skeleton {
&.skeleton {
width: 130px !important;
height: 130px !important;
}
@ -105,11 +101,18 @@
opacity: 0;
visibility: hidden;
}
img {
width: 170px;
height: 170px;
/deep/ img,
/deep/ canvas {
width: 170px !important;
height: 170px !important;
border-radius: 0px;
visibility: hidden;
object-fit: cover;
object-position: center;
@media screen and (max-width: 480px) {
width: 130px !important;
height: 130px !important;
}
}
.card-thumbnail {
width: 170px;
@ -119,11 +122,9 @@
background-repeat: no-repeat;
margin: 0;
}
.skeleton {
&.skeleton {
width: 170px;
height: 170px;
position: absolute;
z-index: -1;
background-color: var(--tainacan-skeleton-color);
}
.metadata-title {

14
src/views/theme-search/components/view-mode-cards.vue
View File

@ -73,14 +73,18 @@
<div class="media">
<div
v-if="!shouldHideItemsThumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype) + ')' }"
class="card-thumbnail">
<img
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
<blur-hash-image
v-if="item.thumbnail != undefined"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype)">
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium', 120)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium', 120)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium', item.document_mimetype)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500"
/>
</div>
<div class="skeleton"/>
<div class="list-metadata media-body">
<!-- Description -->