traxxx-web/components/edit/avatar.vue

<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-strong-20);
		filter: drop-shadow(0 0 1px var(--shadow));
	}
}

.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>