Added actor expand button to profile.

This commit is contained in:
ThePendulum 2020-01-24 23:36:06 +01:00
parent 4dbb961059
commit c93116dee2
7 changed files with 233 additions and 128 deletions

View File

@ -23,34 +23,18 @@
<span>{{ actor.aliases.join(', ') }}</span> <span>{{ actor.aliases.join(', ') }}</span>
</li> </li>
<div <Social
v-if="actor.social && actor.social.length > 0" v-if="actor.social && actor.social.length > 0"
class="social header-social" :actor="actor"
> class="header-social"
<a
v-for="social in actor.social"
:key="`social-${social.id}`"
v-tooltip.bottom="social.url"
:href="social.url"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>
<Icon
v-if="social.platform"
:icon="social.platform"
/> />
<Icon
v-else
icon="link"
/>
</a>
</div>
</div> </div>
<div class="actor-inner"> <div class="actor-inner">
<div class="profile"> <div
class="profile"
:class="{ expanded }"
>
<a <a
v-if="actor.avatar" v-if="actor.avatar"
:href="`/media/${actor.avatar.path}`" :href="`/media/${actor.avatar.path}`"
@ -64,6 +48,12 @@
> >
</a> </a>
<span
v-show="expanded"
class="expand collapse-header noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<ul class="bio nolist"> <ul class="bio nolist">
<li <li
v-if="actor.birthdate" v-if="actor.birthdate"
@ -86,10 +76,10 @@
<span> <span>
<span <span
v-if="actor.origin.city" v-if="actor.origin.city"
class="city" class="city hideable"
>{{ actor.origin.city }}</span><span >{{ actor.origin.city }}</span><span
v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))" v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
class="state" class="state hideable"
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span> >{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
<span <span
@ -113,10 +103,10 @@
<span> <span>
<span <span
v-if="actor.residence.city" v-if="actor.residence.city"
class="city" class="city hideable"
>{{ actor.residence.city }}</span><span >{{ actor.residence.city }}</span><span
v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'" v-if="actor.residence.state && actor.residence.country && actor.residence.country.alpha2 === 'US'"
class="state" class="state hideable"
>{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span> >{{ actor.residence.city ? `, ${actor.residence.state}` : actor.residence.state }}</span>
<span <span
@ -133,7 +123,7 @@
<li <li
v-if="actor.ethnicity" v-if="actor.ethnicity"
class="bio-item ethnicity" class="bio-item ethnicity hideable"
> >
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn> <dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
<span>{{ actor.ethnicity }}</span> <span>{{ actor.ethnicity }}</span>
@ -168,7 +158,7 @@
<li <li
v-if="actor.weight" v-if="actor.weight"
class="bio-item weight" class="bio-item weight hideable"
> >
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn> <dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
@ -180,7 +170,7 @@
<li <li
v-if="actor.hasTattoos" v-if="actor.hasTattoos"
class="bio-item tattoos" class="bio-item tattoos hideable"
> >
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn> <dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
@ -194,7 +184,7 @@
<li <li
v-if="actor.hasPiercings" v-if="actor.hasPiercings"
class="bio-item piercings" class="bio-item piercings hideable"
> >
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn> <dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
@ -206,15 +196,32 @@
<span v-else>Yes</span> <span v-else>Yes</span>
</li> </li>
<li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li> <li class="bio-item scraped hideable">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
</ul> </ul>
<span
v-show="!expanded"
class="expand expand-header collapse-header noselect"
@click="expanded = true"
><Icon icon="arrow-down3" /></span>
<p <p
v-if="actor.description" v-if="actor.description"
class="description" class="description"
>{{ actor.description }}</p> >{{ actor.description }}</p>
</div>
<Social
v-if="actor.social && actor.social.length > 0"
:actor="actor"
class="profile-social"
/>
<span
v-show="expanded"
class="expand expand-header collapse-header noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
</div>
<div class="actor-content"> <div class="actor-content">
<div <div
@ -225,11 +232,23 @@
<Photos <Photos
:actor="actor" :actor="actor"
:class="{ expanded }"
class="compact" class="compact"
@wheel.native.prevent="scrollPhotos"
/> />
</div> </div>
<span
v-show="!expanded"
class="expand noselect"
@click="expanded = true"
><Icon icon="arrow-down3" /></span>
<span
v-show="expanded"
class="expand noselect"
@click="expanded = false"
><Icon icon="arrow-up3" /></span>
<Releases :releases="actor.releases" /> <Releases :releases="actor.releases" />
</div> </div>
</div> </div>
@ -240,6 +259,7 @@
import Photos from './photos.vue'; import Photos from './photos.vue';
import FilterBar from '../header/filter-bar.vue'; import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue'; import Releases from '../releases/releases.vue';
import Social from './social.vue';
async function fetchActor() { async function fetchActor() {
this.actor = await this.$store.dispatch('fetchActors', { actorSlug: this.$route.params.actorSlug }); this.actor = await this.$store.dispatch('fetchActors', { actorSlug: this.$route.params.actorSlug });
@ -262,6 +282,7 @@ export default {
FilterBar, FilterBar,
Photos, Photos,
Releases, Releases,
Social,
}, },
data() { data() {
return { return {
@ -350,7 +371,6 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-shrink: 0;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -397,6 +417,7 @@ export default {
} }
.bio-value { .bio-value {
margin: 0 0 0 2rem;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@ -469,6 +490,10 @@ export default {
padding: 0 .5rem; padding: 0 .5rem;
} }
.ethnicity {
text-transform: capitalize;
}
.scraped { .scraped {
color: $highlight-weak; color: $highlight-weak;
font-size: .8rem; font-size: .8rem;
@ -493,26 +518,6 @@ export default {
} }
} }
.social {
display: block;
}
.social-link {
display: inline-block;
padding: 0 0 0 1rem;
.icon {
color: $highlight;
fill: $highlight;
width: 1.5rem;
height: 1.5rem;
}
&:hover .icon {
fill: $primary;
}
}
.actor-content { .actor-content {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
@ -541,6 +546,14 @@ export default {
padding: 1rem; padding: 1rem;
} }
.profile-social {
display: none;
}
.collapse-header {
display: none;
}
@media(max-width: $breakpoint4) { @media(max-width: $breakpoint4) {
.description { .description {
display: none; display: none;
@ -576,28 +589,45 @@ export default {
height: auto; height: auto;
flex-direction: column; flex-direction: column;
padding: 0 0 .5rem 0; padding: 0 0 .5rem 0;
&:not(.expanded) .hideable {
display: none;
}
} }
.bio { .bio {
width: 100%; width: 100%;
height: auto;
padding: 0 1rem; padding: 0 1rem;
margin: 0; margin: 0;
} }
.bio-item { .bio-item {
width: auto; width: 100%;
margin: 0; margin: 0;
} }
.city, .expand-header {
.state, display: block;
.ethnicity, }
.residence,
.weight, .expanded .description {
.tattoos, display: block;
.piercings, max-width: 100%;
.scraped { max-height: none;
display: none; margin: 0;
padding: 0 1rem;
overflow: bisible;
}
.expanded {
.collapse-header {
display: block;
}
.bio-value {
white-space: normal;
}
} }
} }
@ -606,6 +636,11 @@ export default {
display: none; display: none;
} }
.expanded .profile-social {
display: block;
margin: 1rem 0 0 0;
}
.header-name { .header-name {
flex-grow: 1; flex-grow: 1;
} }

View File

@ -12,6 +12,7 @@
import Actor from '../tile/actor.vue'; import Actor from '../tile/actor.vue';
async function mounted() { async function mounted() {
this.pageTitle = 'Actors';
this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 }); this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
} }
@ -22,6 +23,7 @@ export default {
data() { data() {
return { return {
actors: [], actors: [],
pageTitle: null,
}; };
}, },
mounted, mounted,

View File

@ -0,0 +1,61 @@
<template>
<div
v-if="actor"
class="social"
>
<a
v-for="social in actor.social"
:key="`social-${social.id}`"
v-tooltip.bottom="social.url"
:href="social.url"
target="_blank"
rel="noopener noreferrer"
class="social-link"
>
<Icon
v-if="social.platform"
:icon="social.platform"
/>
<Icon
v-else
icon="link"
/>
</a>
</div>
</template>
<script>
export default {
props: {
actor: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.social {
display: block;
}
.social-link {
display: inline-block;
padding: 0 0 0 1rem;
.icon {
color: $highlight;
fill: $highlight;
width: 1.5rem;
height: 1.5rem;
}
&:hover .icon {
fill: $primary;
}
}
</style>

View File

@ -81,8 +81,8 @@
<Sites <Sites
:sites="sites" :sites="sites"
class="compact"
:class="{ expanded }" :class="{ expanded }"
class="compact"
/> />
<span <span
@ -234,63 +234,16 @@ export default {
} }
} }
.expand {
display: flex;
justify-content: center;
align-items: center;
padding: .5rem 0;
font-weight: bold;
font-size: .9rem;
cursor: pointer;
.icon {
fill: $shadow;
margin: 0 .5rem;
}
&:hover .icon {
fill: $shadow-strong;
}
}
.expand-sidebar:hover {
background: $shadow-hint;
}
.expand-header {
display: none;
&:hover {
background: $shadow-hint;
}
}
.collapse-header {
width: 100%;
display: none;
justify-content: center;
align-items: center;
padding: 0;
background: $profile;
.icon {
width: 100%;
fill: $highlight;
padding: .5rem 0;
}
&:hover .icon {
background: $highlight-hint;
fill: $text-contrast;
}
}
.sites.compact { .sites.compact {
display: none; display: none;
background: $profile; background: $profile;
grid-row: 1; grid-row: 1;
} }
.collapse-header {
display: none;
}
@media(max-width: $breakpoint3) { @media(max-width: $breakpoint3) {
.header, .header,
.header.hideable { .header.hideable {

View File

@ -37,3 +37,56 @@ body {
fill: $primary; fill: $primary;
} }
} }
.expand {
display: flex;
justify-content: center;
align-items: center;
padding: .5rem 0;
font-weight: bold;
font-size: .9rem;
cursor: pointer;
.icon {
fill: $shadow;
}
&:hover {
background: $shadow-hint;
.icon {
fill: $shadow-strong;
}
}
}
.expand-sidebar:hover {
background: $shadow-hint;
}
.expand-header {
display: none;
&:hover {
background: $shadow-hint;
}
}
.collapse-header {
width: 100%;
justify-content: center;
align-items: center;
padding: 0;
background: $profile;
.icon {
width: 100%;
fill: $highlight;
padding: .5rem 0;
}
&:hover .icon {
background: $highlight-hint;
fill: $text-contrast;
}
}

View File

@ -177,11 +177,6 @@ function curateSocialEntry(url, actorId) {
pattern: 'http(s)\\://(*)modelhub.com/:username(/)(?*)', pattern: 'http(s)\\://(*)modelhub.com/:username(/)(?*)',
format: username => `https://www.modelhub.com/${username}`, format: username => `https://www.modelhub.com/${username}`,
}, },
{
label: 'imdb',
pattern: 'http(s)\\://(*)imdb.com/name/:userId(/)(?*)',
format: userId => `https://www.imdb.com/name/${userId}/`,
},
]; ];
const match = platforms.reduce((acc, platform) => { const match = platforms.reduce((acc, platform) => {
@ -398,7 +393,7 @@ async function scrapeActors(actorNames) {
}, newActorEntry.name); }, newActorEntry.name);
} }
} catch (error) { } catch (error) {
logger.warn(actorName, error); logger.warn(`${actorName}: ${error}`);
} }
}, { }, {
concurrency: 3, concurrency: 3,

View File

@ -98,10 +98,16 @@ async function scrapeScene(html, url, site) {
duration, duration,
poster, poster,
photos, photos,
trailer: { trailer: [
{
src: trailer.replace('hd', '1080p'),
quality: 1080,
},
{
src: trailer, src: trailer,
quality: parseInt(videoData.sizeOnLoad, 10), quality: parseInt(videoData.sizeOnLoad, 10),
}, },
],
tags, tags,
rating: { rating: {
stars, stars,