traxxx/assets/components/tile/actor.vue

<template>
    <div
        v-if="actor"
        class="actor"
    >
        <router-link
            :to="{ name: 'actor', params: { actorSlug: actor.slug } }"
            class="link"
        >
            <span
                v-if="actor.network"
                v-tooltip.top="`${actor.name} (${actor.network.name})`"
                class="handle"
            >
                <img
                    :src="`/img/logos/${actor.network.slug}/favicon.png`"
                    class="favicon"
                >
                <span class="name">{{ actor.name }}</span>
            </span>

            <span
                v-else
                v-tooltip.top="actor.name"
                class="handle"
            >
                <span class="name">{{ actor.name }}</span>
            </span>

            <div class="avatar-container">
                <img
                    v-if="actor.avatar"
                    :src="`/media/${actor.avatar.thumbnail || actor.avatar}`"
                    class="avatar"
                >

                <span
                    v-else
                    class="avatar"
                ><img
                    :src="`/img/avatar_${actor.gender || 'female'}.png`"
                    class="avatar-fallback"
                ></span>

                <span
                    class="details"
                >
                    <span class="age">
                        <span
                            v-if="actor.age"
                            v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
                            class="age-now"
                        >{{ actor.age }}</span>

                        <span
                            v-if="actor.ageThen && actor.ageThen < actor.age"
                            v-tooltip="`${actor.ageThen} years old on release date`"
                            class="age-then"
                        >{{ actor.ageThen }}</span>
                    </span>

                    <Gender :gender="actor.gender" />

                    <span
                        v-if="actor.origin"
                        v-tooltip="`Born in ${actor.origin.country.alias || actor.origin.country.name}`"
                        class="country"
                    >
                        {{ actor.origin.country.alpha2 }}
                        <img
                            class="flag"
                            :src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
                        >
                    </span>

                    <span
                        v-else
                        class="country"
                    />
                </span>
            </div>
        </router-link>
    </div>
</template>

<script>
import Gender from '../actors/gender.vue';

export default {
    components: {
        Gender,
    },
    props: {
        actor: {
            type: Object,
            default: null,
        },
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.actor {
    width: 100%;
    display: inline-block;
    position: relative;
    margin: 0 .5rem .5rem 0;
    box-shadow: 0 0 3px var(--darken-weak);
    background: var(--profile);

    &::before {
        content: '';
        display: inline-block;
        padding-bottom: 150%;
    }
}

.link {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--text-light);
    text-decoration: none;

    &:hover {
        color: var(--primary);
    }
}

.handle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    font-weight: bold;
}

.favicon {
    width: 1rem;
    height: 1rem;
    margin: 0 .5rem 0 0;

    & + .name {
        padding: 0 1rem 0 0;
    }
}

.name {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.avatar-container {
    display: flex;
    flex-grow: 1;
    position: relative;
}

.avatar {
    color: var(--darken-weak);
    background: var(--darken-hint);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    object-position: 50% 0;
}

.avatar-fallback {
    max-height: 75%;
    max-width: 80%;
    opacity: .5;
}

.details {
    background: var(--darken);
    color: var(--text-light);
    width: 100%;
    height: 1.75rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: .5rem;
    position: absolute;
    bottom: 0;
    font-size: .9rem;
    font-weight: bold;
}

.age,
.country,
.gender {
    flex: 1;
}

.gender {
    text-align: center;
}

.country {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.flag {
    height: 1rem;
    margin: 0 0 0 .5rem;
}

.age-then {
    color: var(--lighten);
}
</style>