traxxx/assets/components/album/logo.vue

<template>
	<router-link
		v-if="photo.entity"
		v-tooltip="photo.entity.name"
		:to="`/${photo.entity.type}/${photo.entity.slug}`"
	>
		<img
			v-if="favicon && photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
			:src="`/img/logos/${photo.entity.parent.slug}/favicon.png`"
			class="album-logo favicon"
		>

		<img
			v-else-if="favicon"
			:src="`/img/logos/${photo.entity.slug}/favicon.png`"
			class="album-logo favicon"
		>

		<img
			v-else-if="photo.entity.type !== 'network' && !photo.entity.independent && photo.entity.parent"
			:src="`/img/logos/${photo.entity.parent.slug}/${photo.entity.slug}.png`"
			class="album-logo"
		>

		<img
			v-else
			:src="`/img/logos/${photo.entity.slug}/network.png`"
			class="album-logo"
		>
	</router-link>
</template>

<script>
module.exports = {
	props: {
		photo: {
			type: Object,
			default: null,
		},
		favicon: {
			type: Boolean,
			default: false,
		},
	},
};
</script>

<style lang="scss" scoped>
.album-logo {
	max-height: .75rem;
	max-width: 5rem;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: .5rem;
	transition: transform .25s ease, opacity .25s ease;
	filter: drop-shadow(0 0 2px var(--shadow-weak));
}

@media(max-width: $breakpoint-small) {
	.album-logo:not(.favicon) {
		max-height: .5rem;
		max-width: 3.5rem;
	}
}
</style>