feat(front): square images for podcasts

This commit is contained in:
ArneBo 2025-04-02 23:31:57 +02:00
parent 1d99d9b091
commit c7ba2a1c2e
3 changed files with 20 additions and 4 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;