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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

168
assets/components/actors/actor.vue
View File

@ -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>
<p
v-if="actor.description"
class="description"
>{{ actor.description }}</p>
</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>

81
public/css/style.css
View File

@ -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,16 +1161,19 @@
width: 1.25rem;
height: 1.25rem;
}
.header-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] {
fill: #0af;
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);
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);
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);
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);
}
.birthdate[data-v-ea0483c2] {
display: block;
@ -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;
}
}