Separated actor profile header for permanent display when scrolling.
This commit is contained in:
parent
5a51e20966
commit
e8c6d7def6
|
|
@ -5,6 +5,50 @@
|
|||
>
|
||||
<FilterBar :fetch-releases="fetchActor" />
|
||||
|
||||
<div class="actor-header">
|
||||
<h2 class="header-name">
|
||||
{{ actor.name }}
|
||||
<span
|
||||
v-if="actor.gender"
|
||||
class="header-gender"
|
||||
:class="{ [actor.gender]: true }"
|
||||
><Icon :icon="actor.gender" /></span>
|
||||
</h2>
|
||||
|
||||
<li
|
||||
v-if="actor.aliases.length"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
|
||||
<div
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
class="social 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 class="actor-inner">
|
||||
<div class="profile">
|
||||
<a
|
||||
|
|
@ -21,23 +65,6 @@
|
|||
</a>
|
||||
|
||||
<ul class="bio nolist">
|
||||
<li class="bio-header">
|
||||
<h2 class="bio-name">{{ actor.name }}</h2>
|
||||
<span
|
||||
v-if="actor.gender"
|
||||
class="bio-gender"
|
||||
:class="{ [actor.gender]: true }"
|
||||
><Icon :icon="actor.gender" /></span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.aliases.length"
|
||||
class="bio-item"
|
||||
>
|
||||
<dfn class="bio-label">Also known as</dfn>
|
||||
<span>{{ actor.aliases.join(', ') }}</span>
|
||||
</li>
|
||||
|
||||
<li
|
||||
v-if="actor.birthdate"
|
||||
class="bio-item"
|
||||
|
|
@ -182,37 +209,10 @@
|
|||
<li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
|
||||
</ul>
|
||||
|
||||
<div class="extra">
|
||||
<p
|
||||
v-if="actor.description"
|
||||
class="description"
|
||||
>{{ actor.description }}</p>
|
||||
|
||||
<li
|
||||
v-if="actor.social && actor.social.length > 0"
|
||||
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>
|
||||
</li>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -250,7 +250,7 @@ function scrollPhotos(event) {
|
|||
}
|
||||
|
||||
async function mounted() {
|
||||
this.fetchActor();
|
||||
await this.fetchActor();
|
||||
|
||||
if (this.actor) {
|
||||
this.pageTitle = this.actor.name;
|
||||
|
|
@ -282,6 +282,40 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import 'theme';
|
||||
|
||||
.actor-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: $highlight-extreme;
|
||||
background: $profile;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-gender {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 .25rem;
|
||||
transform: translate(0, .1rem);
|
||||
|
||||
.icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header-social {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
|
||||
.actor-inner {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -298,7 +332,6 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 0 0 0;
|
||||
|
||||
.avatar-link {
|
||||
font-size: 0;
|
||||
|
|
@ -333,7 +366,7 @@ export default {
|
|||
}
|
||||
|
||||
.bio-item {
|
||||
width: calc(50% - 2rem);
|
||||
width: calc(50% - 4rem);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -390,6 +423,10 @@ export default {
|
|||
height: 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-gender,
|
||||
.bio-gender {
|
||||
&.female .icon {
|
||||
fill: $female;
|
||||
}
|
||||
|
|
@ -437,15 +474,12 @@ export default {
|
|||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.extra {
|
||||
flex-grow: 1;
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 30rem;
|
||||
max-height: 12rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
margin: 0 2rem 0 0;
|
||||
line-height: 1.5;
|
||||
|
|
@ -461,12 +495,11 @@ export default {
|
|||
|
||||
.social {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: inline-block;
|
||||
padding: 0 1rem 0 0;
|
||||
padding: 0 0 0 1rem;
|
||||
|
||||
.icon {
|
||||
color: $highlight;
|
||||
|
|
@ -515,8 +548,7 @@ export default {
|
|||
}
|
||||
|
||||
@media(max-width: $breakpoint3) {
|
||||
.profile .avatar-link,
|
||||
.extra {
|
||||
.profile .avatar-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -541,6 +573,7 @@ export default {
|
|||
|
||||
@media(max-width: $breakpoint) {
|
||||
.profile {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
padding: 0 0 .5rem 0;
|
||||
}
|
||||
|
|
@ -551,8 +584,9 @@ export default {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.bio-header {
|
||||
margin: 1rem 0;
|
||||
.bio-item {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.city,
|
||||
|
|
@ -565,9 +599,15 @@ export default {
|
|||
.scraped {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
padding: 0 1rem;
|
||||
@media(max-width: $breakpoint0) {
|
||||
.header-social {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1018,6 +1018,41 @@
|
|||
|
||||
/* $primary: #ff886c; */
|
||||
/* $logo-highlight: drop-shadow(1px 0 0 $highlight-weak) drop-shadow(-1px 0 0 $highlight-weak) drop-shadow(0 1px 0 $highlight-weak) drop-shadow(0 -1px 0 $highlight-weak); */
|
||||
.actor-header[data-v-ea0483c2] {
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
background: #222;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
.header-name[data-v-ea0483c2] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-flex;
|
||||
-webkit-box-pack: justify;
|
||||
justify-content: space-between;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.header-gender[data-v-ea0483c2] {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 .25rem;
|
||||
-webkit-transform: translate(0, 0.1rem);
|
||||
transform: translate(0, 0.1rem);
|
||||
}
|
||||
.header-gender .icon[data-v-ea0483c2] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.header-social[data-v-ea0483c2] {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
.actor-inner[data-v-ea0483c2] {
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
|
|
@ -1039,7 +1074,6 @@
|
|||
-webkit-box-direction: normal;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
padding: 1rem 0 0 0;
|
||||
}
|
||||
.profile .avatar-link[data-v-ea0483c2] {
|
||||
font-size: 0;
|
||||
|
|
@ -1076,7 +1110,7 @@
|
|||
margin: 0 0 0 1rem;
|
||||
}
|
||||
.bio-item[data-v-ea0483c2] {
|
||||
width: calc(50% - 2rem);
|
||||
width: calc(50% - 4rem);
|
||||
display: -webkit-box;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
|
|
@ -1127,12 +1161,15 @@
|
|||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
.header-gender.female .icon[data-v-ea0483c2],
|
||||
.bio-gender.female .icon[data-v-ea0483c2] {
|
||||
fill: #f0a;
|
||||
}
|
||||
.header-gender.male .icon[data-v-ea0483c2],
|
||||
.bio-gender.male .icon[data-v-ea0483c2] {
|
||||
fill: #0af;
|
||||
}
|
||||
.header-gender.transsexual .icon[data-v-ea0483c2],
|
||||
.bio-gender.transsexual .icon[data-v-ea0483c2] {
|
||||
fill: #fff;
|
||||
-webkit-filter: drop-shadow(1px 0 0 #f0a) drop-shadow(-1px 0 0 #f0a) drop-shadow(0 1px 0 #f0a) drop-shadow(0 -1px 0 #f0a) drop-shadow(1px 0 0 #0af) drop-shadow(-1px 0 0 #0af) drop-shadow(0 1px 0 #0af) drop-shadow(0 -1px 0 #0af);
|
||||
|
|
@ -1164,15 +1201,13 @@
|
|||
color: rgba(255, 255, 255, 0.2);
|
||||
font-size: .8rem;
|
||||
}
|
||||
.extra[data-v-ea0483c2] {
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
max-width: 40rem;
|
||||
}
|
||||
.description[data-v-ea0483c2] {
|
||||
max-width: 30rem;
|
||||
max-height: 12rem;
|
||||
position: relative;
|
||||
display: block;
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
margin: 0 2rem 0 0;
|
||||
line-height: 1.5;
|
||||
|
|
@ -1186,11 +1221,10 @@
|
|||
}
|
||||
.social[data-v-ea0483c2] {
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.social-link[data-v-ea0483c2] {
|
||||
display: inline-block;
|
||||
padding: 0 1rem 0 0;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
.social-link .icon[data-v-ea0483c2] {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
|
|
@ -1235,8 +1269,7 @@
|
|||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.profile .avatar-link[data-v-ea0483c2],
|
||||
.extra[data-v-ea0483c2] {
|
||||
.profile .avatar-link[data-v-ea0483c2] {
|
||||
display: none;
|
||||
}
|
||||
.actor-content[data-v-ea0483c2] {
|
||||
|
|
@ -1259,6 +1292,7 @@
|
|||
}
|
||||
@media (max-width: 720px) {
|
||||
.profile[data-v-ea0483c2] {
|
||||
height: auto;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
|
|
@ -1269,8 +1303,9 @@
|
|||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
.bio-header[data-v-ea0483c2] {
|
||||
margin: 1rem 0;
|
||||
.bio-item[data-v-ea0483c2] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.city[data-v-ea0483c2],
|
||||
.state[data-v-ea0483c2],
|
||||
|
|
@ -1282,8 +1317,14 @@
|
|||
.scraped[data-v-ea0483c2] {
|
||||
display: none;
|
||||
}
|
||||
.social[data-v-ea0483c2] {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
@media (max-width: 540px) {
|
||||
.header-social[data-v-ea0483c2] {
|
||||
display: none;
|
||||
}
|
||||
.header-name[data-v-ea0483c2] {
|
||||
-webkit-box-flex: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue