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; min-height: 171px;
max-height: 171px; max-height: 171px;
img { &.skeleton {
width: 130px !important;
height: 130px !important;
}
.skeleton {
width: 130px !important; width: 130px !important;
height: 130px !important; height: 130px !important;
} }
@ -105,11 +101,18 @@
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
} }
img { /deep/ img,
width: 170px; /deep/ canvas {
height: 170px; width: 170px !important;
height: 170px !important;
border-radius: 0px; 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 { .card-thumbnail {
width: 170px; width: 170px;
@ -119,11 +122,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 0; margin: 0;
} }
.skeleton { &.skeleton {
width: 170px; width: 170px;
height: 170px; height: 170px;
position: absolute;
z-index: -1;
background-color: var(--tainacan-skeleton-color); background-color: var(--tainacan-skeleton-color);
} }
.metadata-title { .metadata-title {

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

@ -73,14 +73,18 @@
<div class="media"> <div class="media">
<div <div
v-if="!shouldHideItemsThumbnail" v-if="!shouldHideItemsThumbnail"
:style="{ backgroundImage: 'url(' + $thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium', item.document_mimetype) + ')' }"
class="card-thumbnail"> class="card-thumbnail">
<img <blur-hash-image
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
v-if="item.thumbnail != undefined" 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>
<div class="skeleton"/>
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<!-- Description --> <!-- Description -->