Added actor revision overviews to actor and user pages.

components/actors/bio.vue

@@ -12,6 +12,11 @@
 				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
 				class="avatar"
 			>
+
+			<span
+				v-if="actor.avatar?.credit"
+				class="avatar-credit"
+			>{{ actor.avatar.credit }}</span>
 		</div>
 
 		<ul class="bio nolist">
@@ -140,14 +145,14 @@
 			</li>
 
 			<li
-				v-if="!actor.naturalBoobs || !actor.naturalButt"
+				v-if="actor.naturalBoobs === false || actor.naturalButt === false"
 				class="bio-item augmentations"
 			>
-				<dfn class="bio-label"><Icon icon="magic-wand2" />Augmentations</dfn>
+				<dfn class="bio-label"><Icon icon="magic-wand2" />Enhanced</dfn>
 
 				<span class="bio-value">
 					<div
-						v-if="!actor.naturalBoobs"
+						v-if="actor.naturalBoobs === false"
 						:title="[actor.boobsVolume, augmentationMap[actor.boobsPlacement] || actor.boobsPlacement, augmentationMap[actor.boobsImplant] || actor.boobsImplant].filter(Boolean).join(' ')"
 						class="augmentations-section"
 					>Boobs<template v-if="actor.boobsVolume || actor.boobsImplant">:&nbsp;</template>
@@ -156,7 +161,7 @@
 					</div>
 
 					<div
-						v-if="!actor.naturalButt"
+						v-if="actor.naturalButt === false"
 						class="augmentations-section"
 					>Butt<template v-if="actor.buttVolume || actor.buttImplant">:&nbsp;</template>
 						<template v-if="actor.buttVolume">{{ actor.buttVolume }}cc</template>
@@ -258,21 +263,38 @@
 				<span v-else>Yes</span>
 			</li>
 
-			<li class="bio-item updated hideable">Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm') }}, ID: {{ actor.id }}</li>
+			<li
+				v-if="actor.agency"
+				class="bio-item"
+			>
+				<dfn class="bio-label"><Icon icon="user-tie" />Agency</dfn>
 
-			<li class="bio-item actor-actions">
-				<a
-					v-if="user && user.role !== 'user'"
-					:href="`/actor/edit/${actor.id}/${actor.slug}`"
-					target="_blank"
-					class="link"
-				>Edit bio</a>
+				<span
+					:title="actor.agency"
+					class="bio-value"
+				>{{ actor.agency }}</span>
+			</li>
 
-				<a
-					:href="`/actor/revisions/${actor.id}/${actor.slug}`"
-					target="_blank"
-					class="link"
-				>Revisions</a>
+			<li class="bio-item updated hideable">
+				<span
+					class="ellipsis"
+					:title="`#${actor.id} Updated ${formatDate(actor.updatedAt, 'yyyy-MM-dd hh:mm')}`"
+				>#{{ actor.id }} Updated {{ formatDate(actor.updatedAt, 'yyyy-MM-dd') }}</span>
+
+				<div class="actor-actions">
+					<a
+						v-if="user && user.role !== 'user'"
+						:href="`/actor/edit/${actor.id}/${actor.slug}`"
+						target="_blank"
+						class="link"
+					>Edit bio</a>
+
+					<a
+						:href="`/actor/revs/${actor.id}/${actor.slug}`"
+						target="_blank"
+						class="link"
+					>Revisions</a>
+				</div>
 			</li>
 		</ul>
 
@@ -413,17 +435,32 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
     }
 
     .avatar-container {
-        padding: 0 0 1rem 1rem;
+		position: relative;
+        margin: 0 .5rem 1rem 1rem;
         flex-shrink: 0;
+		font-size: 0;
     }
 
     .avatar {
         height: 100%;
         flex-shrink: 0;
-		border: solid 3px var(--highlight-hint);
-        margin: 0 .5rem 0 0;
+		border: solid 3px var(--highlight-weak-30);
+		border-radius: .5rem;
     }
 
+	.avatar-credit {
+		width: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		z-index: 1;
+		box-sizing: border-box;
+		padding: 0 .5rem;
+		color: var(--text-light);
+		font-size: .75rem;
+		text-shadow: 1px 1px 0 var(--shadow-strong-20);
+	}
+
 	&.expanded {
 		padding-bottom: 1.5rem;
 		margin-bottom: .75rem;
@@ -573,10 +610,22 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 }
 
 .updated {
-    color: var(--highlight-weak-20);
+    color: var(--highlight-weak-10);
     font-size: .8rem;
 }
 
+.actor-actions {
+	display: flex;
+	justify-content: flex-start;
+	gap: 1rem;
+	margin-right: .5rem;
+
+	.link {
+		color: inherit;
+		flex-shrink: 0;
+	}
+}
+
 .descriptions-container {
     max-width: 30rem;
     max-height: 100%;
@@ -691,16 +740,6 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 	}
 }
 
-.actor-actions {
-	justify-content: flex-start;
-	gap: 1rem;
-	font-weight: normal;
-
-	.link {
-		color: var(--highlight-strong-20);
-	}
-}
-
 @media(--big) {
     .descriptions-container {
         display: none;