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

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" />
<template v-slot:expanded>
<Photos <Photos
class="expanded"
:actor="actor" :actor="actor"
:class="{ expanded }"
/> />
</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);

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;

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