feat(front): square images for podcasts
This commit is contained in:
parent
1d99d9b091
commit
c7ba2a1c2e
|
@ -46,7 +46,7 @@ const { artist } = props
|
||||||
v-if="artist.cover"
|
v-if="artist.cover"
|
||||||
v-lazy="artist.cover.urls.medium_square_crop"
|
v-lazy="artist.cover.urls.medium_square_crop"
|
||||||
:alt="artist.name"
|
:alt="artist.name"
|
||||||
class="channel-image"
|
:class="[artist.content_category === 'podcast' ? 'podcast-image' : 'channel-image']"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
v-else
|
v-else
|
||||||
|
@ -81,6 +81,12 @@ const { artist } = props
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.podcast-image {
|
||||||
|
width: 168px;
|
||||||
|
height: 168px;
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
top: 16px;
|
top: 16px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
|
|
|
@ -65,7 +65,7 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
|
||||||
v-if="imageUrl"
|
v-if="imageUrl"
|
||||||
v-lazy="imageUrl"
|
v-lazy="imageUrl"
|
||||||
:alt="object.artist?.name"
|
:alt="object.artist?.name"
|
||||||
class="channel-image"
|
:class="[object.artist?.content_category === 'podcast' ? 'podcast-image' : 'channel-image']"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
v-else
|
v-else
|
||||||
|
@ -122,6 +122,12 @@ const updatedAgo = computed(() => moment(props.object.artist?.modification_date)
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.podcast-image {
|
||||||
|
width: 168px;
|
||||||
|
height: 168px;
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.play-button {
|
.play-button {
|
||||||
top: 16px;
|
top: 16px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
|
|
|
@ -174,7 +174,7 @@ const tabs = ref([
|
||||||
<img
|
<img
|
||||||
v-if="object.artist?.cover"
|
v-if="object.artist?.cover"
|
||||||
alt=""
|
alt=""
|
||||||
class="huge channel-image"
|
:class="['huge', object.artist?.content_category === 'podcast' ? 'podcast-image' : 'channel-image']"
|
||||||
:src="store.getters['instance/absoluteUrl'](object.artist.cover.urls.large_square_crop)"
|
:src="store.getters['instance/absoluteUrl'](object.artist.cover.urls.large_square_crop)"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
|
@ -261,7 +261,7 @@ const tabs = ref([
|
||||||
<ActorLink
|
<ActorLink
|
||||||
v-if="object.actor"
|
v-if="object.actor"
|
||||||
discrete
|
discrete
|
||||||
:avatar="false"
|
:avatar="true"
|
||||||
:actor="object.attributed_to"
|
:actor="object.attributed_to"
|
||||||
:display-name="true"
|
:display-name="true"
|
||||||
/>
|
/>
|
||||||
|
@ -496,6 +496,10 @@ const tabs = ref([
|
||||||
.channel-image {
|
.channel-image {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
.huge {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
.meta {
|
.meta {
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
|
|
Loading…
Reference in New Issue