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

View File

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

View File

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