traxxx/assets/components/album/logo.vue

67 lines
1.3 KiB
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"
>
<img
v-else-if="favicon"
:src="`/img/logos/${photo.entity.slug}/favicon.png`"
class="album-logo"
>
<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 {
max-height: .5rem;
max-width: 3.5rem;
}
}
</style>