From 746868fb18e49f9e2728d795d8a012437e6bc339 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Fri, 7 Jun 2024 03:43:12 +0200
Subject: [PATCH] Further improved actor bio responsiveness. Fixed header
 search bar spacing. Fixed stash page footer.

---
 components/actors/bio.vue       | 37 +++++++++++++++++++++++++++++----
 components/header/header.vue    |  5 +----
 components/stashes/stash.vue    |  7 ++++++-
 pages/actors/@actorId/+Page.vue | 15 +++++++++++--
 4 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/components/actors/bio.vue b/components/actors/bio.vue
index 41b4e01..052635c 100644
--- a/components/actors/bio.vue
+++ b/components/actors/bio.vue
@@ -270,7 +270,10 @@
 			</div>
 		</div>
 
-		<div class="expand-container">
+		<div
+			v-if="showExpand"
+			class="expand-container"
+		>
 			<button
 				type="button"
 				class="expand"
@@ -298,12 +301,30 @@ import { formatDate } from '#/utils/format.js';
 
 const expanded = ref(false);
 
-defineProps({
+const props = defineProps({
 	actor: {
 		type: Object,
 		default: null,
 	},
 });
+
+// if the profile is empty, the expand button overlaps the header
+const showExpand = [
+	'age',
+	'bust',
+	'cup',
+	'eyes',
+	'hairColor',
+	'hasPiercings',
+	'hasTattoos',
+	'height',
+	'hip',
+	'naturalBoobs',
+	'origin',
+	'residence',
+	'waist',
+	'weight',
+].some((attribute) => !!props.actor[attribute]);
 </script>
 
 <style>
@@ -564,6 +585,7 @@ defineProps({
 	display: none;
 	justify-content: center;
 	position: absolute;
+	z-index: 1;
 	bottom: -.75rem;
 }
 
@@ -616,8 +638,15 @@ defineProps({
 }
 
 @media(--compact) {
-    .profile .avatar-container {
-        display: none;
+	.profile {
+		.avatar-container {
+			display: none;
+		}
+
+        &.with-avatar {
+            height: auto;
+            max-height: 18rem;
+        }
     }
 
     .actor-content {
diff --git a/components/header/header.vue b/components/header/header.vue
index 2fd5353..6acb5f8 100644
--- a/components/header/header.vue
+++ b/components/header/header.vue
@@ -420,6 +420,7 @@ function blurSearch(event) {
 
 	.icon {
 		display: none;
+		height: 1rem;
 		padding: 0;
 		fill: var(--text-light);
 	}
@@ -514,9 +515,5 @@ function blurSearch(event) {
 	.logo {
 		margin-right: .75rem;
 	}
-
-	.userpanel {
-		padding-left: 1rem;
-	}
 }
 </style>
diff --git a/components/stashes/stash.vue b/components/stashes/stash.vue
index 57658f6..9f33162 100644
--- a/components/stashes/stash.vue
+++ b/components/stashes/stash.vue
@@ -70,12 +70,14 @@ function getPath(targetDomain) {
 .stash {
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
 }
 
 .header {
 	display: flex;
 	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	z-index: 1;
 	padding: .5rem 1rem;
 	color: var(--text-light);
 	background: var(--grey-dark-40);
@@ -118,8 +120,11 @@ function getPath(targetDomain) {
 
 .domains {
 	display: flex;
+	justify-content: center;
 	gap: .5rem;
 	padding: .5rem 1rem;
+	background: var(--background-base-10);
+	border-bottom: solid 1px var(--shadow-weak-40);
 }
 
 .domain {
diff --git a/pages/actors/@actorId/+Page.vue b/pages/actors/@actorId/+Page.vue
index 61410af..2409c6d 100644
--- a/pages/actors/@actorId/+Page.vue
+++ b/pages/actors/@actorId/+Page.vue
@@ -35,7 +35,10 @@
 		<div class="content">
 			<Bio :actor="actor" />
 
-			<div class="photos nobar">
+			<div
+				class="photos nobar"
+				:class="{ 'has-avatar': actor.avatar, 'has-photos': actor.avatar ? photos.length > 1 : photos.length > 0 }"
+			>
 				<img
 					v-for="photo in photos"
 					:key="`photo-${photo.id}`"
@@ -93,7 +96,7 @@ const photos = [
     align-items: center;
 	position: sticky;
 	top: 0;
-	z-index: 1;
+	z-index: 2;
     color: var(--highlight-strong-30);
     background: var(--grey-dark-40);
 }
@@ -130,6 +133,10 @@ const photos = [
 	border-bottom: solid 1px var(--shadow-weak-40);
 	background: var(--background-base-10);
 	overflow-x: auto;
+
+	&:not(.has-photos) {
+		display: none;
+	}
 }
 
 .photo {
@@ -147,6 +154,10 @@ const photos = [
 }
 
 @media(--compact) {
+	.photos.has-avatar {
+		display: flex;
+	}
+
 	.photo.avatar {
 		display: inline-block;
 	}