Fixes thumbnail on autocomplete for terms and relationship filter.
This commit is contained in:
parent
4f814b12d3
commit
52c0f37152
|
@ -155,7 +155,18 @@
|
|||
@focus="clearErrors('parent');"
|
||||
:disabled="!hasParent">
|
||||
<template slot-scope="props">
|
||||
{{ props.option.name }}
|
||||
<div class="media">
|
||||
<div
|
||||
v-if="props.option.header_image"
|
||||
class="media-left">
|
||||
<img
|
||||
width="28"
|
||||
:src="props.option.header_image">
|
||||
</div>
|
||||
<div class="media-content">
|
||||
{{ props.option.name }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template slot="empty">{{ $i18n.get('info_no_parent_term_found') }}</template>
|
||||
</b-autocomplete>
|
||||
|
|
|
@ -51,19 +51,22 @@
|
|||
.is-small { color: $gray4; }
|
||||
&.is-active { background-color: $turquoise2; }
|
||||
|
||||
.media-left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.media-content {
|
||||
display: flex;
|
||||
.media {
|
||||
align-items: center;
|
||||
width: 80%;
|
||||
|
||||
.media-left {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.media-content {
|
||||
display: flex;
|
||||
width: 80%;
|
||||
|
||||
.ellipsed-text {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 3px;
|
||||
.ellipsed-text {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -121,7 +121,7 @@ $subheader-height: 42px;
|
|||
$side-menu-width: 160px;
|
||||
$filter-menu-width: 16.666666667%;
|
||||
$filter-menu-width-theme: 20.833333333%;
|
||||
$page-height: calc(100% - 94px);
|
||||
$page-height: calc(100vh - 94px);
|
||||
|
||||
// Overall Pages padding:
|
||||
$page-side-padding: 4.166666667%;//82px;
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
width="24"
|
||||
:src="`${props.option.img}`">
|
||||
:src="props.option.img">
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<span class="ellipsed-text">{{ props.option.label }}</span>
|
||||
|
@ -148,15 +148,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
#profileImage {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 2.1875rem;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 9.375rem;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</script>
|
|
@ -276,13 +276,14 @@ export const dynamicFilterTypeMixin = {
|
|||
sResults.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
|
||||
total_items: item.total_items
|
||||
});
|
||||
} else if (indexToIgnore < 0) {
|
||||
opts.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
img: (item.img ? item.img : this.thumbPlaceholderPath),
|
||||
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
|
||||
total_items: item.total_items
|
||||
});
|
||||
}
|
||||
|
@ -291,14 +292,14 @@ export const dynamicFilterTypeMixin = {
|
|||
sResults.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
img: (item.img ? item.img : this.thumbPlaceholderPath),
|
||||
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
|
||||
total_items: item.total_items
|
||||
});
|
||||
} else {
|
||||
opts.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
img: (item.img ? item.img : this.thumbPlaceholderPath),
|
||||
img: item.thumbnail && item.thumbnail['tainacan-small'] && item.thumbnail['tainacan-small'][0] ? item.thumbnail['tainacan-small'][0] : (item.img ? item.img : ''),
|
||||
total_items: item.total_items
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue