Added favorites button to actor page.

assets/components/users/user.vue

@@ -8,31 +8,32 @@
 		</div>
 
 		<section
-			v-if="stashes.length > 0"
+			v-if="user.stashes?.length > 0"
 			class="section"
 		>
 			<h3 class="heading">Stashes</h3>
 
 			<ul class="stashes nolist">
 				<li
-					v-for="stash in stashes"
+					v-for="stash in user.stashes"
 					:key="stash.id"
+					class="stash"
 				>
 					<h4 class="stash-name">{{ stash.name }}</h4>
 
-					<ul class="stash nolist actors">
-						<li
-							v-for="item in stash.actors"
-							:key="item.id"
-						><Actor :actor="item.actor" /></li>
-					</ul>
-
-					<ul class="stash nolist scenes">
+					<ul class="stash-section stash-scenes nolist">
 						<li
 							v-for="item in stash.scenes"
 							:key="item.id"
 						><Scene :release="item.scene" /></li>
 					</ul>
+
+					<ul class="stash-section stash-actors nolist">
+						<li
+							v-for="item in stash.actors"
+							:key="item.id"
+						><Actor :actor="item.actor" /></li>
+					</ul>
 				</li>
 			</ul>
 		</section>
@@ -44,8 +45,8 @@ import Actor from '../actors/tile.vue';
 import Scene from '../releases/scene-tile.vue';
 
 async function mounted() {
-	this.user = await this.$store.dispatch('fetchMe');
-	this.stashes = await this.$store.dispatch('fetchUserStashes', this.user.id);
+	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
+	this.pageTitle = this.user?.username;
 }
 
 export default {
@@ -58,7 +59,7 @@ export default {
 			user: this.$route.params.username === this.$store.state.auth.user?.username
 				? this.$store.state.auth.user
 				: null,
-			stashes: [],
+			pageTitle: null,
 		};
 	},
 	mounted,
@@ -67,7 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 .header {
-	padding: 1rem;
+	padding: .5rem 1rem;
 	background: var(--profile);
 }
 
@@ -87,27 +88,38 @@ export default {
 }
 
 .stash {
+	background: var(--background);
 	margin: 0 0 1rem 0;
+	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
 .stash-name {
 	color: var(--shadow-strong);
-	margin: 0 0 1rem 0;
+	padding: 1rem .5rem 0 .5rem;
+	margin: 0;
 }
 
-.actors {
+.stash-section {
+	padding: 1rem .5rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-actors,
+.stash-scenes {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
     flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.scenes {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
     grid-gap: .5rem;
 	box-sizing: border-box;
 }
+
+.stash-actors {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.stash-scenes {
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+}
 </style>