diff --git a/changes/changelog.d/676.bugfix b/changes/changelog.d/676.bugfix new file mode 100644 index 0000000000000000000000000000000000000000..30829cd19d66a99c9876ca7b19522c8837484f96 --- /dev/null +++ b/changes/changelog.d/676.bugfix @@ -0,0 +1 @@ +Fixed overescaping issue in notifications and album page (#676) diff --git a/front/src/components/library/Album.vue b/front/src/components/library/Album.vue index ba354914e04e354aa95c54dfaf5b0c404b66920a..bb33b7e7fa52c1eaf6c4ed0f630788faf0a25e6e 100644 --- a/front/src/components/library/Album.vue +++ b/front/src/components/library/Album.vue @@ -10,13 +10,7 @@ <i class="circular inverted sound yellow icon"></i> <div class="content"> {{ album.title }} - <translate - tag="div" - translate-plural="Album containing %{ count } tracks, by %{ artist }" - :translate-n="album.tracks.length" - :translate-params="{count: album.tracks.length, artist: album.artist.name}"> - Album containing %{ count } track, by %{ artist } - </translate> + <div v-html="subtitle"></div> </div> <div class="ui buttons"> <router-link class="ui button" :to="{name: 'library.artists.detail', params: {id: album.artist.id }}"> @@ -184,6 +178,10 @@ export default { this.$store.getters["instance/absoluteUrl"](this.album.cover.original) + ")" ) + }, + subtitle () { + let msg = this.$ngettext('Album containing %{ count } track, by %{ artist }', 'Album containing %{ count } tracks, by %{ artist }', this.album.tracks.length) + return this.$gettextInterpolate(msg, {count: this.album.tracks.length, artist: this.album.artist.name}) } }, watch: { diff --git a/front/src/components/notifications/NotificationRow.vue b/front/src/components/notifications/NotificationRow.vue index db5918c4733908257a43ce1024443fcc52ca10e2..b134bc96b2c04f4bc3dd4a23cb08393e851f514e 100644 --- a/front/src/components/notifications/NotificationRow.vue +++ b/front/src/components/notifications/NotificationRow.vue @@ -4,10 +4,10 @@ <actor-link class="user" :actor="item.activity.actor" /> </td> <td> - <router-link tag="span" class="link" v-if="notificationData.detailUrl" :to="notificationData.detailUrl"> - {{ notificationData.message }} + <router-link tag="span" class="link" v-if="notificationData.detailUrl" :to="notificationData.detailUrl" v-html="notificationData.message"> + </router-link> - <template v-else>{{ notificationData.message }}</template> + <template v-else v-html="notificationData.message"></template> <template v-if="notificationData.action"> <div @click="handleAction(notificationData.action.handler)" :class="['ui', 'basic', 'tiny', notificationData.action.buttonClass || '', 'button']"> <i v-if="notificationData.action.icon" :class="[notificationData.action.icon, 'icon']" />