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

Resolving actor birth and residence place before storage. Layout improvements.

Browse Source
This commit is contained in:
ThePendulum
2019-11-29 05:46:06 +01:00
parent 4be508b388
commit 0dbe853f39
17 changed files with 377 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
assets/components/actor/actor.vue
View File

@@ -33,7 +33,7 @@
v-if="actor.aliases.length"
class="bio-item"
>
<dfn class="bio-heading">Also known as</dfn>
<dfn class="bio-label">Also known as</dfn>
<span>{{ actor.aliases.join(', ') }}</span>
</li>
@@ -41,7 +41,7 @@
v-if="actor.birthdate"
class="bio-item"
>
<dfn class="bio-heading"><Icon icon="cake" />Birthdate</dfn>
<dfn class="bio-label"><Icon icon="cake" />Birthdate</dfn>
<span
v-if="actor.birthdate"
@@ -50,50 +50,55 @@
</li>
<li
v-if="actor.birthCountry || actor.birthPlace"
v-if="actor.origin"
class="bio-item birth"
>
<dfn class="bio-heading"><Icon icon="home2" />Born in</dfn>
<dfn class="bio-label"><Icon icon="home2" />Born in</dfn>
<span>
<span
v-if="actor.birthPlace"
class="place"
>{{ actor.birthPlace }}</span>
v-if="actor.origin.city"
class="city"
>{{ actor.origin.city }}</span><span
v-if="actor.origin.state && actor.origin.country && actor.origin.country.alpha2 === 'US'"
class="state"
>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
<span
v-if="actor.birthCountry"
v-if="actor.origin.country"
class="country birthcountry"
>
<img
class="flag"
:src="`/img/flags/${actor.birthCountry.alpha2.toLowerCase()}.png`"
>{{ actor.birthCountry.name }}
:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.png`"
>{{ actor.origin.country.name }}
</span>
</span>
</li>
<li
v-if="actor.residenceCountry || actor.residencePlace"
v-if="actor.residence"
class="bio-item residence"
>
<dfn class="bio-heading"><Icon icon="location" />Lives in</dfn>
<dfn class="bio-label"><Icon icon="location" />Lives in</dfn>
<span>
<span
v-if="actor.residencePlace"
class="place"
>{{ actor.residencePlace }}</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.residenceCountry"
v-if="actor.residence.country"
class="country"
>
<img
v-if="actor.residenceCountry"
class="flag"
:src="`/img/flags/${actor.residenceCountry.alpha2.toLowerCase()}.png`"
>{{ actor.residenceCountry.name }}
:src="`/img/flags/${actor.residence.country.alpha2.toLowerCase()}.png`"
>{{ actor.residence.country.name }}
</span>
</span>
</li>
@@ -104,7 +109,7 @@
v-if="actor.ethnicity"
class="bio-item ethnicity"
>
<dfn class="bio-heading"><Icon icon="earth2" />Ethnicity</dfn>
<dfn class="bio-label"><Icon icon="earth2" />Ethnicity</dfn>
<span>{{ actor.ethnicity }}</span>
</li>
@@ -113,7 +118,7 @@
title="bust-waist-hip"
class="bio-item"
>
<dfn class="bio-heading"><Icon icon="ruler" />Sizes</dfn>
<dfn class="bio-label"><Icon icon="ruler" />Sizes</dfn>
<span>
<Icon
v-if="actor.naturalBoobs === false"
@@ -128,7 +133,7 @@
v-if="actor.height"
class="bio-item height"
>
<dfn class="bio-heading"><Icon icon="height" />Height</dfn>
<dfn class="bio-label"><Icon icon="height" />Height</dfn>
<span>
<span class="height-metric">{{ actor.height }} cm</span>
<span class="height-imperial">{{ imperialHeight.feet }}' {{ imperialHeight.inches }}"</span>
@@ -139,7 +144,7 @@
v-if="actor.weight"
class="bio-item weight"
>
<dfn class="bio-heading"><Icon icon="scale" />Weight</dfn>
<dfn class="bio-label"><Icon icon="scale" />Weight</dfn>
<span>
<span class="weight-metric">{{ actor.weight }} kg</span>
@@ -147,6 +152,34 @@
</span>
</li>
<li
v-if="actor.hasTattoos"
class="bio-item tattoos"
>
<dfn class="bio-label"><Icon icon="flower" />Tattoos</dfn>
<span
v-if="actor.tattoos"
v-tooltip="actor.tattoos"
class="bio-value"
>{{ actor.tattoos }}</span>
<span v-else>Yes</span>
</li>
<li
v-if="actor.hasPiercings"
class="bio-item piercings"
>
<dfn class="bio-label"><Icon icon="trophy4" />Piercings</dfn>
<span
v-if="actor.piercings"
v-tooltip="actor.piercings"
class="bio-value"
>{{ actor.piercings }}</span>
<span v-else>Yes</span>
</li>
<li class="bio-item scraped">Updated on {{ formatDate(actor.scrapedAt, 'YYYY-MM-DD HH:mm') }}</li>
</ul>
@@ -154,8 +187,7 @@
<p
v-if="actor.description"
class="description"
:class="{ expanded }"
@click="expanded = !expanded"
@wheel.prevent="scrollDescription"
>{{ actor.description }}</p>
<li
@@ -190,10 +222,10 @@
<div
v-if="actor.photos && actor.photos.length > 0"
class="photos-container"
@wheel.prevent="scrollPhotos"
>
<div
class="photos"
:class="{ wide: actor.photos.length > 2 }"
@wheel.prevent="scrollPhotos"
>
<a
@@ -259,13 +291,19 @@ function scrollPhotos(event) {
event.currentTarget.scrollLeft += event.deltaY; // eslint-disable-line no-param-reassign
}
function scrollDescription(event) {
event.currentTarget.scrollTop += event.deltaY; // eslint-disable-line no-param-reassign
}
async function mounted() {
[[this.actor]] = await Promise.all([
this.$store.dispatch('fetchActors', this.$route.params.actorSlug),
this.fetchReleases(),
]);
this.pageTitle = this.actor.name;
if (this.actor) {
this.pageTitle = this.actor.name;
}
}
export default {
@@ -289,6 +327,7 @@ export default {
mounted,
methods: {
fetchReleases,
scrollDescription,
scrollPhotos,
},
};
@@ -315,12 +354,12 @@ export default {
.avatar-link {
font-size: 0;
padding: 1rem;
padding: 1rem 0 1rem 1rem;
}
.avatar {
height: 15rem;
width: 15rem;
height: 12rem;
width: 12rem;
flex-shrink: 0;
margin: 0 1rem 0 0;
object-fit: cover;
@@ -330,10 +369,10 @@ export default {
.bio {
flex-grow: 1;
min-width: 18rem;
min-width: 20rem;
box-sizing: border-box;
padding: 1rem;
margin: 0 3rem 0 0;
margin: 0 2rem 0 0;
}
.bio-header {
@@ -350,20 +389,29 @@ export default {
line-height: 1.75;
text-align: right;
font-size: .9rem;
font-weight: bold;
}
.bio-heading {
.bio-label {
color: $highlight;
font-weight: normal;
display: flex;
align-items: center;
margin: 0 1rem 0 0;
flex-shrink: 0;
font-style: normal;
font-weight: bold;
.icon {
fill: $highlight;
margin: 0 .5rem 0 0;
margin: 0 .5rem .5rem 0;
}
}
.bio-value {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.flag {
margin: 0 .25rem 0 0;
}
@@ -403,21 +451,6 @@ export default {
padding: 0 0 0 .5rem;
border-left: solid 1px $highlight-weak;
margin: 0 0 0 .5rem;
/*
&::before {
content: ' (';
}
&::after {
content: ')';
}
&::before,
&::after {
color: $highlight;
}
*/
}
.country {
@@ -440,18 +473,19 @@ export default {
max-height: 10rem;
flex-grow: 1;
position: relative;
display: inline-block;
display: block;
box-sizing: border-box;
padding: 1rem 0 0 0;
margin: 0 2rem 0 0;
line-height: 1.5;
text-overflow: ellipsis;
font-size: .9rem;
overflow: hidden;
cursor: pointer;
overflow: auto;
scrollbar-width: none;
&.expanded {
overflow: visible;
&::-webkit-scrollbar {
display: none;
}
}
@@ -501,7 +535,6 @@ export default {
}
.photos {
max-width: 35vw;
display: inline-grid;
grid-template-columns: repeat(auto-fit, 15rem);
grid-gap: .5rem;
@@ -535,6 +568,12 @@ export default {
}
}
@media(min-width: $breakpoint3) {
.photos.wide {
max-width: 35vw;
}
}
@media(max-width: $breakpoint3) {
.profile .avatar-link,
.social {
@@ -591,10 +630,13 @@ export default {
margin: 1rem 0;
}
.place,
.city,
.state,
.ethnicity,
.residence,
.weight,
.tattoos,
.piercings,
.scraped {
display: none;
}

1
assets/css/_tooltip.scss
View File

@@ -3,6 +3,7 @@
z-index: 10000;
.tooltip-inner {
max-width: 20rem;
background: #222;
color: white;
border-radius: 16px;

5
assets/img/flower.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>flower</title>
<path d="M15.801 5.902c-0.835-2.568-3.368-2.828-5.323-0.876 1.252-2.463 0.222-4.792-2.478-4.792s-3.73 2.329-2.478 4.792c-1.955-1.951-4.488-1.692-5.323 0.876s1.062 4.267 3.791 3.838c-2.46 1.257-2.996 3.746-0.811 5.333s4.386 0.308 4.821-2.42c0.435 2.728 2.637 4.007 4.822 2.42s1.648-4.077-0.812-5.333c2.729 0.429 4.626-1.27 3.792-3.838zM8 10.717c-1.277 0-2.313-1.035-2.313-2.313s1.035-2.313 2.313-2.313c1.277 0 2.313 1.035 2.313 2.313s-1.036 2.313-2.313 2.313z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

5
assets/img/trophy4.svg Normal file
View File

@@ -0,0 +1,5 @@
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>trophy4</title>
<path d="M13 2h-10l-3 4 8 9-2.222-8h4.444l-2.222 8 8-9-3-4zM1.25 6l2.282-3.043 1.69 3.043h-3.972zM5.778 6l1.667-3h1.111l1.667 3h-4.444zM12.468 2.957l2.282 3.043h-3.972l1.69-3.043z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 350 B