Separated actor profile header for permanent display when scrolling.

This commit is contained in:
ThePendulum 2020-01-23 04:32:22 +01:00
parent 5a51e20966
commit e8c6d7def6
2 changed files with 165 additions and 84 deletions

View File

@ -5,6 +5,50 @@
> >
<FilterBar :fetch-releases="fetchActor" /> <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="actor-inner">
<div class="profile"> <div class="profile">
<a <a
@ -21,23 +65,6 @@
</a> </a>
<ul class="bio nolist"> <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 <li
v-if="actor.birthdate" v-if="actor.birthdate"
class="bio-item" class="bio-item"
@ -182,37 +209,10 @@
<li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li> <li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
</ul> </ul>
<div class="extra">
<p <p
v-if="actor.description" v-if="actor.description"
class="description" class="description"
>{{ actor.description }}</p> >{{ 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> </div>
@ -250,7 +250,7 @@ function scrollPhotos(event) {
} }
async function mounted() { async function mounted() {
this.fetchActor(); await this.fetchActor();
if (this.actor) { if (this.actor) {
this.pageTitle = this.actor.name; this.pageTitle = this.actor.name;
@ -282,6 +282,40 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import 'theme'; @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 { .actor-inner {
height: 100%; height: 100%;
display: flex; display: flex;
@ -298,7 +332,6 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
padding: 1rem 0 0 0;
.avatar-link { .avatar-link {
font-size: 0; font-size: 0;
@ -333,7 +366,7 @@ export default {
} }
.bio-item { .bio-item {
width: calc(50% - 2rem); width: calc(50% - 4rem);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
@ -390,6 +423,10 @@ export default {
height: 1.25rem; height: 1.25rem;
} }
}
.header-gender,
.bio-gender {
&.female .icon { &.female .icon {
fill: $female; fill: $female;
} }
@ -437,15 +474,12 @@ export default {
font-size: .8rem; font-size: .8rem;
} }
.extra {
flex-grow: 1;
max-width: 40rem;
}
.description { .description {
max-width: 30rem;
max-height: 12rem; max-height: 12rem;
position: relative; position: relative;
display: block; display: block;
flex-grow: 1;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
line-height: 1.5; line-height: 1.5;
@ -461,12 +495,11 @@ export default {
.social { .social {
display: block; display: block;
margin: 1rem 0;
} }
.social-link { .social-link {
display: inline-block; display: inline-block;
padding: 0 1rem 0 0; padding: 0 0 0 1rem;
.icon { .icon {
color: $highlight; color: $highlight;
@ -515,8 +548,7 @@ export default {
} }
@media(max-width: $breakpoint3) { @media(max-width: $breakpoint3) {
.profile .avatar-link, .profile .avatar-link {
.extra {
display: none; display: none;
} }
@ -541,6 +573,7 @@ export default {
@media(max-width: $breakpoint) { @media(max-width: $breakpoint) {
.profile { .profile {
height: auto;
flex-direction: column; flex-direction: column;
padding: 0 0 .5rem 0; padding: 0 0 .5rem 0;
} }
@ -551,8 +584,9 @@ export default {
margin: 0; margin: 0;
} }
.bio-header { .bio-item {
margin: 1rem 0; width: auto;
margin: 0;
} }
.city, .city,
@ -565,9 +599,15 @@ export default {
.scraped { .scraped {
display: none; display: none;
} }
}
.social { @media(max-width: $breakpoint0) {
padding: 0 1rem; .header-social {
display: none;
}
.header-name {
flex-grow: 1;
} }
} }
</style> </style>

View File

@ -1018,6 +1018,41 @@
/* $primary: #ff886c; */ /* $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); */ /* $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] { .actor-inner[data-v-ea0483c2] {
height: 100%; height: 100%;
display: -webkit-box; display: -webkit-box;
@ -1039,7 +1074,6 @@
-webkit-box-direction: normal; -webkit-box-direction: normal;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
padding: 1rem 0 0 0;
} }
.profile .avatar-link[data-v-ea0483c2] { .profile .avatar-link[data-v-ea0483c2] {
font-size: 0; font-size: 0;
@ -1076,7 +1110,7 @@
margin: 0 0 0 1rem; margin: 0 0 0 1rem;
} }
.bio-item[data-v-ea0483c2] { .bio-item[data-v-ea0483c2] {
width: calc(50% - 2rem); width: calc(50% - 4rem);
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
-webkit-box-pack: justify; -webkit-box-pack: justify;
@ -1127,12 +1161,15 @@
width: 1.25rem; width: 1.25rem;
height: 1.25rem; height: 1.25rem;
} }
.header-gender.female .icon[data-v-ea0483c2],
.bio-gender.female .icon[data-v-ea0483c2] { .bio-gender.female .icon[data-v-ea0483c2] {
fill: #f0a; fill: #f0a;
} }
.header-gender.male .icon[data-v-ea0483c2],
.bio-gender.male .icon[data-v-ea0483c2] { .bio-gender.male .icon[data-v-ea0483c2] {
fill: #0af; fill: #0af;
} }
.header-gender.transsexual .icon[data-v-ea0483c2],
.bio-gender.transsexual .icon[data-v-ea0483c2] { .bio-gender.transsexual .icon[data-v-ea0483c2] {
fill: #fff; 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); -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); color: rgba(255, 255, 255, 0.2);
font-size: .8rem; font-size: .8rem;
} }
.extra[data-v-ea0483c2] {
-webkit-box-flex: 1;
flex-grow: 1;
max-width: 40rem;
}
.description[data-v-ea0483c2] { .description[data-v-ea0483c2] {
max-width: 30rem;
max-height: 12rem; max-height: 12rem;
position: relative; position: relative;
display: block; display: block;
-webkit-box-flex: 1;
flex-grow: 1;
box-sizing: border-box; box-sizing: border-box;
margin: 0 2rem 0 0; margin: 0 2rem 0 0;
line-height: 1.5; line-height: 1.5;
@ -1186,11 +1221,10 @@
} }
.social[data-v-ea0483c2] { .social[data-v-ea0483c2] {
display: block; display: block;
margin: 1rem 0;
} }
.social-link[data-v-ea0483c2] { .social-link[data-v-ea0483c2] {
display: inline-block; display: inline-block;
padding: 0 1rem 0 0; padding: 0 0 0 1rem;
} }
.social-link .icon[data-v-ea0483c2] { .social-link .icon[data-v-ea0483c2] {
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
@ -1235,8 +1269,7 @@
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.profile .avatar-link[data-v-ea0483c2], .profile .avatar-link[data-v-ea0483c2] {
.extra[data-v-ea0483c2] {
display: none; display: none;
} }
.actor-content[data-v-ea0483c2] { .actor-content[data-v-ea0483c2] {
@ -1259,6 +1292,7 @@
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.profile[data-v-ea0483c2] { .profile[data-v-ea0483c2] {
height: auto;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;
flex-direction: column; flex-direction: column;
@ -1269,8 +1303,9 @@
padding: 0 1rem; padding: 0 1rem;
margin: 0; margin: 0;
} }
.bio-header[data-v-ea0483c2] { .bio-item[data-v-ea0483c2] {
margin: 1rem 0; width: auto;
margin: 0;
} }
.city[data-v-ea0483c2], .city[data-v-ea0483c2],
.state[data-v-ea0483c2], .state[data-v-ea0483c2],
@ -1282,8 +1317,14 @@
.scraped[data-v-ea0483c2] { .scraped[data-v-ea0483c2] {
display: none; 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;
} }
} }