Improved actor bio responsiveness, showing secondary actor photos.
This commit is contained in:
@@ -1,274 +1,292 @@
|
||||
<template>
|
||||
<div
|
||||
class="content-inner actor-inner"
|
||||
@scroll="events.emit('scroll', $event)"
|
||||
class="profile"
|
||||
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
||||
>
|
||||
<div
|
||||
class="profile"
|
||||
:class="{ expanded, 'with-avatar': !!actor.avatar }"
|
||||
v-if="actor.avatar"
|
||||
class="avatar-container"
|
||||
>
|
||||
<a
|
||||
v-if="actor.avatar"
|
||||
:href="getMediaPath(actor.avatar)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="avatar-link"
|
||||
<img
|
||||
:src="getMediaPath(actor.avatar, 'thumbnail')"
|
||||
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
|
||||
class="avatar"
|
||||
>
|
||||
<img
|
||||
:src="getMediaPath(actor.avatar, 'thumbnail')"
|
||||
:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
|
||||
class="avatar"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul class="bio nolist">
|
||||
<li
|
||||
v-if="actor.dateOfBirth"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Date of birth</dfn>
|
||||
<ul class="bio nolist">
|
||||
<li
|
||||
v-if="actor.dateOfBirth"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Date of birth</dfn>
|
||||
|
||||
<span class="birthdate">{{ formatDate(actor.dateOfBirth, 'MMMM d, yyyy') }}<span
|
||||
<span class="birthdate">
|
||||
<span class="birthdate-long">{{ formatDate(actor.dateOfBirth, 'MMMM d, yyyy') }}</span>
|
||||
<span class="birthdate-short">{{ formatDate(actor.dateOfBirth, 'MMM d, yyyy') }}</span>
|
||||
|
||||
<span
|
||||
v-if="!actor.dateOfDeath"
|
||||
class="age"
|
||||
>{{ actor.ageFromBirth }}</span></span>
|
||||
</li>
|
||||
>{{ actor.ageFromBirth }}</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-else-if="actor.age && !actor.dateOfDeath"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Age</dfn>
|
||||
<li
|
||||
v-else-if="actor.age && !actor.dateOfDeath"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="cake" />Age</dfn>
|
||||
|
||||
<span
|
||||
:title="'Exact date of birth or age unknown'"
|
||||
class="birthdate"
|
||||
>> {{ actor.age }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.dateOfDeath"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
|
||||
|
||||
<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM d, yyyy') }}<span
|
||||
v-if="actor.ageAtDeath"
|
||||
class="age"
|
||||
>{{ actor.ageAtDeath }}</span></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.orientation"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="heart7" />Orientation</dfn>
|
||||
|
||||
<span class="orientation">{{ actor.orientation }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.origin"
|
||||
class="bio-item birth"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.origin.city"
|
||||
class="city"
|
||||
>{{ actor.origin.city }}</span><span
|
||||
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
|
||||
class="state"
|
||||
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
|
||||
|
||||
<span
|
||||
:title="'Exact date of birth or age unknown'"
|
||||
class="birthdate"
|
||||
>> {{ actor.age }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.dateOfDeath"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
|
||||
|
||||
<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM d, yyyy') }}<span
|
||||
v-if="actor.ageAtDeath"
|
||||
class="age"
|
||||
>{{ actor.ageAtDeath }}</span></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.orientation"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="heart7" />Orientation</dfn>
|
||||
|
||||
<span class="orientation">{{ actor.orientation }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.origin"
|
||||
class="bio-item birth"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.origin.city"
|
||||
class="city"
|
||||
>{{ actor.origin.city }}</span><span
|
||||
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
|
||||
class="state"
|
||||
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.origin.country"
|
||||
class="country birthcountry"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.origin.country.alias || actor.origin.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.residence"
|
||||
class="bio-item residence hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.residence.city"
|
||||
class="city"
|
||||
>{{ actor.residence.city }}</span><span
|
||||
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
|
||||
class="state"
|
||||
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.residence.country"
|
||||
class="country"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.residence.country.alias || actor.residence.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.ethnicity"
|
||||
class="bio-item ethnicity hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.bust || actor.waist || actor.hip"
|
||||
title="bust-waist-hip"
|
||||
class="bio-item figure"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
|
||||
<span class="bio-value">
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
:title="'Enhanced boobs'"
|
||||
icon="magic-wand2"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.penisLength || actor.penisGirth || actor.circumcised"
|
||||
class="bio-item penis"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="pencil-ruler" />Dick</dfn>
|
||||
|
||||
<span>
|
||||
<Icon
|
||||
v-if="actor.circumcised"
|
||||
:title="'Circumcised'"
|
||||
icon="page-break"
|
||||
class="circumcised"
|
||||
/>
|
||||
|
||||
<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
|
||||
<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
|
||||
<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="actor.penisLengthMetric">
|
||||
<span>{{ actor.penisLengthMetric }} cm</span>
|
||||
<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
|
||||
</template>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.height"
|
||||
class="bio-item height"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
|
||||
<span>
|
||||
<span class="height-metric">{{ actor.height.metric }} cm</span>
|
||||
<span class="height-imperial">{{ actor.height.imperial[0] }}' {{ actor.height.imperial[1] }}"</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.weight"
|
||||
class="bio-item weight hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
|
||||
|
||||
<span>
|
||||
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
|
||||
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.eyes"
|
||||
class="bio-item eyes hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="eye" />Eyes</dfn>
|
||||
<span>{{ actor.eyes }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hairColor"
|
||||
class="bio-item hair hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="haircut" />Hair</dfn>
|
||||
<span><span v-if="actor.hairLength">{{ actor.hairLength }}, </span>{{ actor.hairColor }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasTattoos"
|
||||
class="bio-item tattoos hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="lotus" />Tattoos</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.tattoos"
|
||||
:title="actor.tattoos"
|
||||
class="bio-value"
|
||||
>{{ actor.tattoos }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasPiercings"
|
||||
class="bio-item piercings hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.piercings"
|
||||
:title="actor.piercings"
|
||||
class="bio-value"
|
||||
>{{ actor.piercings }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li class="bio-item scraped hideable">Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm') }}, ID: {{ actor.id }}</li>
|
||||
</ul>
|
||||
|
||||
<div class="descriptions-container">
|
||||
<div
|
||||
v-if="actor.descriptions && actor.descriptions.length > 0"
|
||||
class="descriptions"
|
||||
>
|
||||
<p
|
||||
v-for="description in actor.descriptions"
|
||||
:key="`description-${description.entity.id}`"
|
||||
class="description"
|
||||
v-if="actor.origin.country"
|
||||
class="country birthcountry"
|
||||
>
|
||||
{{ description.text }}
|
||||
<a :href="`/${description.entity.type}/${description.entity.slug}`">
|
||||
<img
|
||||
v-if="description.entity.type === 'network' || !description.entity.parent || description.entity.independent"
|
||||
:src="`/img/logos/${description.entity.slug}/thumbs/network.png`"
|
||||
class="description-logo"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
|
||||
>
|
||||
|
||||
<img
|
||||
v-else
|
||||
:src="`/img/logos/${description.entity.parent.slug}/thumbs/${description.entity.slug}.png`"
|
||||
class="description-logo"
|
||||
>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<span class="country-name">{{ actor.origin.country.alias || actor.origin.country.name }}</span>
|
||||
<span class="country-alpha2">{{ actor.origin.country.alpha2 }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.residence"
|
||||
class="bio-item residence hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
|
||||
|
||||
<span>
|
||||
<span
|
||||
v-if="actor.residence.city"
|
||||
class="city"
|
||||
>{{ actor.residence.city }}</span><span
|
||||
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
|
||||
class="state"
|
||||
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
|
||||
|
||||
<span
|
||||
v-if="actor.residence.country"
|
||||
class="country"
|
||||
>
|
||||
<img
|
||||
class="flag"
|
||||
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.svg`"
|
||||
>{{ actor.residence.country.alias || actor.residence.country.name }}
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.ethnicity"
|
||||
class="bio-item ethnicity hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
|
||||
<span>{{ actor.ethnicity }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.bust || actor.waist || actor.hip"
|
||||
title="bust-waist-hip"
|
||||
class="bio-item figure"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="ruler" />Figure</dfn>
|
||||
<span class="bio-value">
|
||||
<Icon
|
||||
v-if="actor.naturalBoobs === false"
|
||||
:title="'Enhanced boobs'"
|
||||
icon="magic-wand2"
|
||||
class="enhanced"
|
||||
/>{{ actor.bust || '??' }}{{ actor.cup || '?' }}-{{ actor.waist || '??' }}-{{ actor.hip || '??' }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.penisLength || actor.penisGirth || actor.circumcised"
|
||||
class="bio-item penis"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="pencil-ruler" />Dick</dfn>
|
||||
|
||||
<span>
|
||||
<Icon
|
||||
v-if="actor.circumcised"
|
||||
:title="'Circumcised'"
|
||||
icon="page-break"
|
||||
class="circumcised"
|
||||
/>
|
||||
|
||||
<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
|
||||
<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
|
||||
<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
|
||||
</template>
|
||||
|
||||
<template v-else-if="actor.penisLengthMetric">
|
||||
<span>{{ actor.penisLengthMetric }} cm</span>
|
||||
<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
|
||||
</template>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.height"
|
||||
class="bio-item height"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
|
||||
<span>
|
||||
<span class="height-metric">{{ actor.height.metric }} cm</span>
|
||||
<span class="height-imperial">{{ actor.height.imperial[0] }}' {{ actor.height.imperial[1] }}"</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.weight"
|
||||
class="bio-item weight hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
|
||||
|
||||
<span>
|
||||
<span class="weight-metric">{{ actor.weight.metric }} kg</span>
|
||||
<span class="weight-imperial">{{ actor.weight.imperial }} lbs</span>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.eyes"
|
||||
class="bio-item eyes hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="eye" />Eyes</dfn>
|
||||
<span>{{ actor.eyes }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hairColor"
|
||||
class="bio-item hair hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="haircut" />Hair</dfn>
|
||||
<span><span v-if="actor.hairLength">{{ actor.hairLength }}, </span>{{ actor.hairColor }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasTattoos"
|
||||
class="bio-item tattoos hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="lotus" />Tattoos</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.tattoos"
|
||||
:title="actor.tattoos"
|
||||
class="bio-value"
|
||||
>{{ actor.tattoos }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.hasPiercings"
|
||||
class="bio-item piercings hideable"
|
||||
>
|
||||
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
|
||||
|
||||
<span
|
||||
v-if="actor.piercings"
|
||||
:title="actor.piercings"
|
||||
class="bio-value"
|
||||
>{{ actor.piercings }}</span>
|
||||
<span v-else>Yes</span>
|
||||
</li>
|
||||
|
||||
<li class="bio-item updated hideable">Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm') }}, ID: {{ actor.id }}</li>
|
||||
</ul>
|
||||
|
||||
<div class="descriptions-container">
|
||||
<div
|
||||
v-if="actor.descriptions && actor.descriptions.length > 0"
|
||||
class="descriptions"
|
||||
>
|
||||
<p
|
||||
v-for="description in actor.descriptions"
|
||||
:key="`description-${description.entity.id}`"
|
||||
class="description"
|
||||
>
|
||||
{{ description.text }}
|
||||
<a :href="`/${description.entity.type}/${description.entity.slug}`">
|
||||
<img
|
||||
v-if="description.entity.type === 'network' || !description.entity.parent || description.entity.independent"
|
||||
:src="`/img/logos/${description.entity.slug}/thumbs/network.png`"
|
||||
class="description-logo"
|
||||
>
|
||||
|
||||
<img
|
||||
v-else
|
||||
:src="`/img/logos/${description.entity.parent.slug}/thumbs/${description.entity.slug}.png`"
|
||||
class="description-logo"
|
||||
>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expand-container">
|
||||
<button
|
||||
type="button"
|
||||
class="expand"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<Icon
|
||||
v-show="expanded"
|
||||
icon="arrow-up3"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!expanded"
|
||||
icon="arrow-down3"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -278,7 +296,7 @@ import { ref } from 'vue';
|
||||
import { getMediaPath } from '#/utils/media-path.js';
|
||||
import { formatDate } from '#/utils/format.js';
|
||||
|
||||
const expanded = ref(true);
|
||||
const expanded = ref(false);
|
||||
|
||||
defineProps({
|
||||
actor: {
|
||||
@@ -289,9 +307,17 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-gender .icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
.header-gender {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 .5rem;
|
||||
transform: translate(0, .125rem);
|
||||
font-size: 0;
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -304,12 +330,13 @@ defineProps({
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
|
||||
&.with-avatar {
|
||||
height: 18rem; /* profile overlaps avatar in chrome */
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
.avatar-container {
|
||||
padding: 0 0 1rem 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -320,6 +347,11 @@ defineProps({
|
||||
border: solid 3px var(--highlight-hint);
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
padding-bottom: 1.5rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bio {
|
||||
@@ -404,10 +436,14 @@ defineProps({
|
||||
display: block;
|
||||
}
|
||||
|
||||
.birthdate-short {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.age {
|
||||
font-weight: bold;
|
||||
padding: 0 0 0 .5rem;
|
||||
border-left: solid 1px var(--highlight-weak);
|
||||
border-left: solid 1px var(--highlight-weak-20);
|
||||
margin: 0 0 0 .5rem;
|
||||
}
|
||||
|
||||
@@ -416,6 +452,10 @@ defineProps({
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.country-alpha2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.figure .bio-label .icon {
|
||||
margin: -.5rem .5rem 0 0;
|
||||
}
|
||||
@@ -451,8 +491,8 @@ defineProps({
|
||||
content: ',\00a0';
|
||||
}
|
||||
|
||||
.scraped {
|
||||
color: var(--highlight-weak);
|
||||
.updated {
|
||||
color: var(--highlight-weak-20);
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
@@ -519,8 +559,33 @@ defineProps({
|
||||
display: none;
|
||||
}
|
||||
|
||||
.expand {
|
||||
.expand-container {
|
||||
width: 100%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: -.75rem;
|
||||
}
|
||||
|
||||
.expand {
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: .5rem;
|
||||
background: var(--grey-dark-50);
|
||||
box-shadow: 0 0 3px var(--shadow);
|
||||
|
||||
.icon {
|
||||
fill: var(--text-light);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
@@ -544,15 +609,14 @@ defineProps({
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@media(max-width: $breakpoint4) {
|
||||
@media(--big) {
|
||||
.descriptions-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.profile .avatar-link {
|
||||
@media(--compact) {
|
||||
.profile .avatar-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -561,7 +625,7 @@ defineProps({
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint) {
|
||||
@media(--small-15) {
|
||||
.profile {
|
||||
height: auto;
|
||||
max-height: none;
|
||||
@@ -593,8 +657,8 @@ defineProps({
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.expand {
|
||||
display: block;
|
||||
.expand-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.actor-stash {
|
||||
@@ -602,7 +666,7 @@ defineProps({
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint0) {
|
||||
@media(--small-30) {
|
||||
.header-social {
|
||||
display: none;
|
||||
}
|
||||
@@ -625,5 +689,23 @@ defineProps({
|
||||
transform: translate(0, -.1rem);
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media(--small-60) {
|
||||
.birthdate-long,
|
||||
.age {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.birthdate-short {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.country-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.country-alpha2 {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user