Fixes skeleton height on view modes that does not display image.

This commit is contained in:
Mateus Machado Luna 2019-07-02 11:23:24 -03:00
parent c26340bc25
commit 654300743a
3 changed files with 19 additions and 4 deletions

View File

@ -399,7 +399,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 12px; margin: 12px;
min-height: 54px; min-height: 24px;
min-width: 22%; min-width: 22%;
width: 22%; } width: 22%; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item a, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item a,

View File

@ -43,8 +43,8 @@
v-for="facet in Number(maxFacetsNumber)" v-for="facet in Number(maxFacetsNumber)"
class="facet-list-item skeleton" class="facet-list-item skeleton"
:style="{ :style="{
marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '', marginBottom: layout == 'grid' && ((metadatumType == 'Relationship' || metadatumType == 'Taxonomy') && showImage) ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
height: layout == 'grid' ? '230px' : '54px' height: getSkeletonHeight()
}" /> }" />
</ul> </ul>
<div v-else> <div v-else>
@ -257,6 +257,21 @@ export default {
this.isLoading = false; this.isLoading = false;
// console.log(error); // console.log(error);
}); });
},
getSkeletonHeight() {
switch(this.layout) {
case 'grid':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage)
return '230px';
else
return '24px'
case 'list':
if ((this.metadatumType == 'Relationship' || this.metadatumType == 'Taxonomy') && this.showImage)
return '54px';
else
return '24px'
default: return '54px';
}
} }
}, },
created() { created() {

View File

@ -319,7 +319,7 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 12px; margin: 12px;
min-height: 54px; min-height: 24px;
min-width: 22%; min-width: 22%;
width: 22%; width: 22%;