67 lines
1.3 KiB
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 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>
|