DebaucheryLibrarian
/
traxxx
2
1
Fork 1
Code Issues 37 Pull Requests 1 Releases Wiki Activity

Updated actor photos to use expand and load events with scroll component. Fixed actor description independent entity logo. Fixed unwanted actor horizontal scroll.

This commit is contained in:
ThePendulum 2020-07-07 19:23:36 +02:00
parent 0fd1edd8fd
commit 0fc85e5de2
3 changed files with 13 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -254,7 +254,7 @@
{{ description.text }} {{ description.text }}
<router-link :to="`/${description.entity.type}/${description.entity.slug}`"> <router-link :to="`/${description.entity.type}/${description.entity.slug}`">
<img <img
v-if="description.entity.type === 'network'" v-if="description.entity.type === 'network' || description.entity.independent"
:src="`/img/logos/${description.entity.slug}/thumbs/network.png`" :src="`/img/logos/${description.entity.slug}/thumbs/network.png`"
class="description-logo" class="description-logo"
> >
@ -285,16 +285,14 @@
<div class="actor-content"> <div class="actor-content">
<Scroll <Scroll
v-if="actor.avatar || (actor.photos && actor.photos.length > 0)" v-if="actor.avatar || (actor.photos && actor.photos.length > 0)"
:expanded="expanded"
class="scroll-light" class="scroll-light"
@expand="(state) => expanded = state"
> >
<Photos :actor="actor" /> <Photos
:actor="actor"
<template v-slot:expanded> :class="{ expanded }"
<Photos />
class="expanded"
:actor="actor"
/>
</template>
</Scroll> </Scroll>
<FilterBar <FilterBar
@ -426,14 +424,6 @@ export default {
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
} }
.actor-inner {
height: 100%;
display: flex;
flex-direction: column;
padding: 0;
overflow-x: auto;
}
.profile { .profile {
background: var(--profile); background: var(--profile);
color: var(--highlight-extreme); color: var(--highlight-extreme);

10
assets/components/actors/photos.vue
View File

@ -20,6 +20,7 @@
:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`" :data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
:title="actor.avatar.copyright && `© ${actor.avatar.copyright}`" :title="actor.avatar.copyright && `© ${actor.avatar.copyright}`"
class="avatar photo" class="avatar photo"
@load="$parent.$emit('load')"
> >
</a> </a>
@ -37,6 +38,7 @@
:data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`" :data-loading="sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}`"
:title="`© ${photo.copyright || photo.entity.name}`" :title="`© ${photo.copyright || photo.entity.name}`"
class="photo" class="photo"
@load="$parent.$emit('load')"
> >
</a> </a>
</div> </div>
@ -67,6 +69,7 @@ export default {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
padding: .5rem 1rem; padding: .5rem 1rem;
margin: 0 1rem 0 0;
font-size: 0; font-size: 0;
overflow-x: scroll; overflow-x: scroll;
scroll-behavior: smooth; scroll-behavior: smooth;
@ -75,12 +78,7 @@ export default {
&.expanded { &.expanded {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
margin: 0;
/*
display: grid;
grid-gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
*/
.photo-link { .photo-link {
margin: 0 .5rem .5rem 0; margin: 0 .5rem .5rem 0;

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

@ -88,7 +88,7 @@ function initActorActions(store, router) {
comment comment
} }
} }
profiles: actorsProfiles { profiles: actorsProfiles(orderBy: PRIORITY_DESC) {
description description
descriptionHash descriptionHash
entity { entity {
@ -96,6 +96,7 @@ function initActorActions(store, router) {
name name
slug slug
type type
independent
parent { parent {
id id
name name