boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Showing avatar on release actor tile. Fixed social URL validation.

Browse Source
This commit is contained in:
ThePendulum
2020-05-17 05:24:46 +02:00
parent 61965d480c
commit af5543190a
4 changed files with 90 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
assets/components/tile/actor.vue
View File

@@ -1,101 +1,101 @@
<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>
<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>
<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"
>
<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
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
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>
<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" />
<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-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>
<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,
},
},
components: {
Gender,
},
props: {
actor: {
type: Object,
default: null,
},
},
};
</script>