From 0fc85e5de2b4729585b861c1f59a6a64f9beb1b8 Mon Sep 17 00:00:00 2001
From: Niels Simenon <niels.simenon@gmail.com>
Date: Tue, 7 Jul 2020 19:23:36 +0200
Subject: [PATCH] Updated actor photos to use expand and load events with
 scroll component. Fixed actor description independent entity logo. Fixed
 unwanted actor horizontal scroll.

---
 assets/components/actors/actor.vue  | 24 +++++++-----------------
 assets/components/actors/photos.vue | 10 ++++------
 assets/js/actors/actions.js         |  3 ++-
 3 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/assets/components/actors/actor.vue b/assets/components/actors/actor.vue
index f8b86d68..c1cb69f5 100644
--- a/assets/components/actors/actor.vue
+++ b/assets/components/actors/actor.vue
@@ -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"
-						/>
-					</template>
+					<Photos
+						:actor="actor"
+						:class="{ expanded }"
+					/>
 				</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);
diff --git a/assets/components/actors/photos.vue b/assets/components/actors/photos.vue
index a4cfd10c..61a59210 100644
--- a/assets/components/actors/photos.vue
+++ b/assets/components/actors/photos.vue
@@ -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;
diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js
index f921d1a1..f04e12cb 100644
--- a/assets/js/actors/actions.js
+++ b/assets/js/actors/actions.js
@@ -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