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:
parent
0fd1edd8fd
commit
0fc85e5de2
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue