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

Added actor assignment to new actors module. Showing network icon on network-specific actors. Improved dark theme. Changed tag tile design. Added Digital Playground logos.

Browse Source
This commit is contained in:
ThePendulum
2020-03-27 04:39:13 +01:00
parent 689dbeefbd
commit fb59bf552a
24 changed files with 202 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,9 @@
<div class="actor-header">
<h2 class="header-name">
{{ actor.name }}
<span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
<span v-else="">{{ actor.name }}</span>
<Gender
:gender="actor.gender"
class="header-gender"

41
assets/components/actors/actors.vue
View File

@@ -109,8 +109,20 @@ export default {
<style lang="scss">
@import 'theme';
.gender-link.selected .gender .icon {
fill: var(--text-light);
.gender-link {
&.selected .gender .icon {
fill: var(--text-light);
filter: none;
}
&:hover:not(.selected) .gender .icon {
fill: var(--text-light);
}
&:hover:not(.selected) .transsexual .icon {
fill: var(--female);
filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
}
}
</style>
@@ -159,7 +171,6 @@ export default {
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: .2rem 0 0 0;
margin: .25rem .5rem .25rem 0;
color: var(--shadow);
background: var(--background);
@@ -167,31 +178,29 @@ export default {
text-decoration: none;
box-shadow: 0 0 3px var(--darken-weak);
.male,
.female,
.transsexual {
padding: .2rem 0 0 0;
}
.icon {
fill: var(--shadow);
}
&:hover {
color: var(--primary);
color: var(--text-light);
cursor: pointer;
.icon {
fill: var(--text-light);
}
}
&.selected {
background: var(--primary);
color: var(--text-light);
&.male {
background: var(--male);
}
&.female {
background: var(--female);
}
&.transsexual {
background: var(--text);
}
&.other .icon {
fill: var(--text-light);
}

1
assets/components/container/container.vue
View File

@@ -72,6 +72,7 @@ export default {
flex-direction: column;
overflow: hidden;
background: var(--background-dim);
color: var(--text);
}
.content {

40
assets/components/releases/release.vue
View File

@@ -246,6 +246,7 @@ async function mounted() {
this.release = await this.$store.dispatch('fetchReleaseById', this.$route.params.releaseId);
this.filename = format(config.filename.pattern, {
...this.release,
shootId: this.release.shootId || '',
date: this.formatDate(this.release.date, config.filename.date),
}, {
spreadSeparator: config.filename.separator,
@@ -287,8 +288,8 @@ export default {
.info {
padding: 1rem;
border-left: solid 1px $shadow-hint;
border-right: solid 1px $shadow-hint;
border-left: solid 1px var(--shadow-hint);
border-right: solid 1px var(--shadow-hint);
flex-grow: 1;
}
@@ -304,15 +305,15 @@ export default {
.icon {
display: inline-block;
width: 1rem;
fill: $shadow-strong;
fill: var(--shadow-strong);
margin: 0 1rem 0 0;
}
}
.details {
background: $profile;
color: $text-contrast;
box-shadow: 0 0 3px $shadow-weak;
background: var(--profile);
color: var(--text-light);
box-shadow: 0 0 3px var(--shadow-weak);
cursor: default;
.column {
@@ -322,7 +323,7 @@ export default {
}
.link {
color: $text-contrast;
color: var(--text-light);
}
}
@@ -331,11 +332,11 @@ export default {
height: 100%;
&:not(:last-child) {
border-right: solid 1px $highlight-hint;
border-right: solid 1px var(--lighten-hint);
}
.icon {
fill: $highlight-weak;
fill: var(--lighten-weak);
margin: 0 .25rem 0 0;
}
@@ -359,7 +360,6 @@ export default {
.logo {
display: inline-block;
filter: $logo-highlight;
}
.logo-site {
@@ -377,7 +377,7 @@ export default {
}
.chain {
color: $highlight;
color: var(--lighten);
padding: 0 .5rem;
font-weight: bold;
font-size: .8rem;
@@ -388,7 +388,7 @@ export default {
}
.description {
line-height: 1.25;
line-height: 1.5;
}
.duration {
@@ -416,34 +416,36 @@ export default {
.filename {
width: 100%;
padding: .5rem;
border: solid 1px $shadow-weak;
color: var(--text);
border: solid 1px var(--shadow-weak);
background: var(--background);
}
.link {
display: inline-block;
color: $link;
color: var(--link);
text-decoration: none;
&:hover {
color: $primary;
color: var(--primary);
.icon {
fill: $primary;
fill: var(--primary);
}
}
}
.tag .link {
background: $background;
background: var(--background);
display: inline-block;
padding: .5rem;
margin: 0 .25rem .25rem 0;
box-shadow: 0 0 2px $shadow-weak;
box-shadow: 0 0 2px var(--shadow-weak);
text-decoration: none;
text-transform: capitalize;
&:hover {
color: $primary;
color: var(--primary);
}
}

71
assets/components/tile/actor.vue
View File

@@ -8,8 +8,21 @@
class="link"
>
<span
v-if="actor.network"
v-tooltip.top="`${actor.name} (${actor.network.name})`"
class="handle"
>
<img
:src="`/img/logos/${actor.network.slug}/favicon.png`"
class="favicon"
>
<span class="name">{{ actor.name }}</span>
</span>
<span
v-else
v-tooltip.top="actor.name"
class="name"
class="handle name"
>{{ actor.name }}</span>
<div class="avatar-container">
@@ -89,28 +102,54 @@ export default {
.actor {
width: 100%;
background: $background;
display: inline-block;
margin: 0 .5rem .5rem 0;
box-shadow: 0 0 3px $shadow-weak;
box-shadow: 0 0 3px var(--darken-weak);
background: var(--profile);
}
.link {
color: $text;
color: var(--text-light);
text-decoration: none;
&:hover {
color: $primary;
color: var(--primary);
}
}
.handle {
display: flex;
align-items: center;
justify-content: center;
padding: .5rem;
font-weight: bold;
}
.favicon {
width: 1rem;
height: 1rem;
margin: 0 .5rem 0 0;
& + .name {
padding: 0 1rem 0 0;
}
}
.name {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.avatar-container {
position: relative;
}
.avatar {
color: $shadow-weak;
background: $shadow-hint;
color: var(--darken-weak);
background: var(--darken-hint);
height: 13rem;
width: 100%;
display: flex;
@@ -123,12 +162,12 @@ export default {
.avatar-fallback {
max-height: 75%;
max-width: 80%;
opacity: .1;
opacity: .5;
}
.details {
background: $shadow;
color: $text-contrast;
background: var(--darken);
color: var(--text-light);
width: 100%;
height: 1.75rem;
display: flex;
@@ -156,16 +195,6 @@ export default {
}
.age-then {
color: $highlight;
}
.name {
display: block;
padding: .5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
color: var(--lighten);
}
</style>

3
assets/components/tile/release.vue
View File

@@ -216,9 +216,8 @@ export default {
object-fit: cover;
background-position: center;
background-size: cover;
background-color: var(--shadow-hint);
background-color: var(--darken-hint);
color: var(--shadow);
text-shadow: 1px 1px 0 var(--highlight);
}
.row {

18
assets/components/tile/tag.vue
View File

@@ -4,14 +4,14 @@
:title="tag.name"
class="tile"
>
<span class="title">{{ tag.name }}</span>
<img
v-if="tag.poster"
:src="sfw ? `/img/${tag.poster.sfw.thumbnail}` : `/img/${tag.poster.thumbnail}`"
:alt="tag.name"
class="poster"
>
<span class="title">{{ tag.name }}</span>
</router-link>
</template>
@@ -44,6 +44,7 @@ export default {
align-items: left;
justify-content: flex-end;
box-sizing: border-box;
position: relative;
text-align: center;
text-decoration: none;
box-shadow: inset 0 0 3px var(--darken);
@@ -51,16 +52,23 @@ export default {
.poster {
width: 100%;
height: 14rem;
height: 16rem;
object-fit: cover;
box-shadow: 0 0 3px var(--darken);
object-position: 50% 100%;
box-shadow: 0 0 1px var(--darken);
}
.title {
width: 100%;
display: flex;
font-size: 1rem;
box-sizing: border-box;
padding: .5rem 1rem;
position: absolute;
bottom: 0;
background: var(--darken);
font-size: 1rem;
font-weight: bold;
text-transform: capitalize;
text-shadow: 0 0 3px var(--darken-strong);
}
</style>

1
assets/css/style.scss
View File

@@ -9,7 +9,6 @@ body {
}
body {
color: var(--text);
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}

10
assets/js/actors/actions.js
View File

@@ -77,6 +77,11 @@ function initActorActions(store, _router) {
tattoos
piercings
description
network {
id
name
slug
}
avatar: actorsAvatarByActorId {
media {
thumbnail
@@ -222,6 +227,11 @@ function initActorActions(store, _router) {
age
birthdate
gender
network {
id
name
slug
}
avatar: actorsAvatarByActorId {
media {
thumbnail

5
assets/js/fragments.js
View File

@@ -37,6 +37,11 @@ const actorFields = `
birthdate
age
gender
network {
id
name
slug
}
originCountry: countryByBirthCountryAlpha2 {
alpha2
name