Added actor revision overviews to actor and user pages.

components/edit/avatar.vue

@@ -0,0 +1,110 @@
+<template>
+	<div class="avatar noshrink">
+		<img
+			:src="getPath(avatar, 'thumbnail')"
+			class="avatar-image"
+		>
+
+		<span
+			class="avatar-credit"
+			title="Credit"
+		>{{ avatar.credit }}</span>
+
+		<span class="avatar-meta">
+			<span title="Dimensions">{{ avatar.width }}x{{ avatar.height }}</span>
+			<span title="Sharpness">{{ avatar.sharpness.toFixed(2) }}</span>
+		</span>
+
+		<a
+			:href="getPath(avatar)"
+			target="_blank"
+			class="avatar-zoom"
+		>
+			<Icon
+				icon="search"
+			/>
+		</a>
+	</div>
+</template>
+
+<script setup>
+import getPath from '#/src/get-path.js';
+
+defineProps({
+	avatar: {
+		type: Object,
+		default: null,
+	},
+});
+</script>
+
+<style scoped>
+.avatar {
+	display: inline-block;
+	position: relative;
+	border: solid 2px transparent;
+	border-radius: .35rem;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+	margin: 2px; /* clear outline */
+	font-size: 0;
+	overflow: hidden;
+
+	&.selected {
+		border: solid 2px var(--primary);
+	}
+
+	&:hover {
+		/*
+		.avatar-meta,
+		.avatar-credit {
+			display: none;
+		}
+		*/
+
+		.icon {
+			fill: var(--text-light);
+		}
+	}
+}
+
+.avatar-image {
+	height: 10rem;
+}
+
+.avatar-zoom {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 10;
+	padding: .25rem;
+
+	.icon {
+		fill: var(--highlight);
+	}
+}
+
+.avatar-meta,
+.avatar-credit {
+	position: absolute;
+	z-index: 10;
+	box-sizing: border-box;
+	padding: .15rem .25rem;
+	font-size: .7rem;
+	color: var(--text-light);
+	text-shadow: 1px 1px 0 var(--shadow-strong-30);
+	cursor: default;
+}
+
+.avatar-meta {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	bottom: 0;
+	left: 0;
+}
+
+.avatar-credit {
+	bottom: .75rem;
+	left: 0;
+}
+</style>