<template> <RouterLink :to="`/${entity.type}/${entity.slug}`" :title="entity.name" :target="target" class="tile" > <div class="tile-logo"> <template v-if="entity.hasLogo"> <img v-if="entity.type === 'network' || entity.independent" :src="`/img/logos/${entity.slug}/thumbs/network.png`" :alt="entity.name" loading="lazy" class="logo" @load="$emit('load', $event)" > <img v-else-if="entity.parent" :src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`" :alt="entity.name" loading="lazy" class="logo" @load="$emit('load', $event)" > <img v-else :src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`" :alt="entity.name" loading="lazy" class="logo" @load="$emit('load', $event)" > </template> <span v-else class="name" >{{ entity.name }}</span> </div> <span v-if="entity.childrenTotal > 0 || typeof entity.sceneTotal !== 'undefined'" class="count" > <span v-if="typeof entity.sceneTotal !== 'undefined'">{{ entity.sceneTotal }} scenes</span> <span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span> </span> </RouterLink> </template> <script> export default { props: { entity: { type: Object, default: null, }, target: { type: String, default: null, }, }, emits: ['load'], }; </script> <style lang="scss" scoped> @import 'theme'; .tile { height: 100%; background: var(--tile); display: flex; flex-direction: column; flex-shrink: 0; justify-content: center; align-items: center; box-sizing: border-box; border-radius: .25rem; position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, .25); text-align: center; text-decoration: none; overflow: hidden; &:hover .count { bottom: 0; } } .tile-logo { display: flex; flex-grow: 1; padding: .5rem 1rem; overflow: hidden; } .logo { max-width: 100%; max-height: 100%; display: flex; align-items: center; align-self: center; } .name { display: flex; align-items: center; color: var(--text-light); font-size: 1.25rem; font-weight: bold; } .count { display: flex; justify-content: space-between; width: 100%; position: absolute; bottom: -1.75rem; box-sizing: border-box; padding: .25rem .5rem; background: var(--darken-strong); box-shadow: 0 0 3px var(--darken); color: var(--text-light); text-align: center; text-shadow: 1px 1px var(--darken); transition: bottom .1s ease; } </style>