added brick type for media items, brick will now display the correct artwork
This commit is contained in:
parent
287f8a490b
commit
91664d2d91
4 changed files with 34 additions and 9 deletions
|
@ -2601,6 +2601,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
width: 212px;
|
||||
}
|
||||
}
|
||||
|
||||
&.mediaitem-brick {
|
||||
height: 200px;
|
||||
width: 240px;
|
||||
.artwork {
|
||||
height: 123px;
|
||||
width: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cd-btn-seeall {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
|
||||
</template>
|
||||
<template v-else>
|
||||
<mediaitem-square :kind="kind" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
|
||||
<mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
@ -6,9 +6,9 @@
|
|||
<div class="artwork-container">
|
||||
<div class="artwork" @click='app.routeView(item)'>
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
:url="getArtworkUrl()"
|
||||
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
|
||||
size="300"
|
||||
:size="size"
|
||||
shadow="subtle"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
|
@ -38,6 +38,10 @@
|
|||
kind: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '300'
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
|
@ -48,19 +52,31 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getArtworkUrl() {
|
||||
let artwork = this.item.attributes.artwork ? this.item.attributes.artwork.url : ''
|
||||
switch (this.kind) {
|
||||
case "385":
|
||||
artwork = this.item.attributes.editorialArtwork.subscriptionHero.url
|
||||
break;
|
||||
}
|
||||
return artwork
|
||||
},
|
||||
getClasses() {
|
||||
let type = this.item.type
|
||||
if(this.kind != "") {
|
||||
if (this.kind != "") {
|
||||
type = this.kind
|
||||
}
|
||||
switch(type) {
|
||||
switch (type) {
|
||||
default:
|
||||
return []
|
||||
break;
|
||||
break;
|
||||
case "385": // editorial
|
||||
return ["mediaitem-brick"]
|
||||
break;
|
||||
case "music-videos":
|
||||
case "uploaded-videos":
|
||||
return "mediaitem-video";
|
||||
break;
|
||||
break;
|
||||
}
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
|
|
|
@ -13,11 +13,11 @@
|
|||
</div>
|
||||
<template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
|
||||
<template v-if="index === 0">
|
||||
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
|
||||
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0" :kind="recom.attributes.editorialElementKind"
|
||||
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
||||
</template>
|
||||
<template v-else-if="(['385']).includes(recom.attributes.editorialElementKind)">
|
||||
<mediaitem-scroller-horizontal-mvview :imagesize="800" kind="music-videos"
|
||||
<mediaitem-scroller-horizontal-mvview :imagesize="800" :kind="recom.attributes.editorialElementKind"
|
||||
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
|
||||
</template>
|
||||
<template v-else-if="recom.attributes.name == 'Chart Set'">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue