traxxx/assets/components/actors/photos.vue

<template>
	<div
		class="photos"
		:class="{
			avatar: !!actor.avatar,
			empty: actor.photos.length === 0,
		}"
	>
		<a
			v-if="actor.avatar"
			:href="`/media/${actor.avatar.path}`"
			target="_blank"
			rel="noopener noreferrer"
			class="avatar-link photo-link"
		>
			<img
				:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
				:style="{ 'background-image': sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}` }"
				:title="actor.avatar.credit && `© ${actor.avatar.credit}`"
				loading="lazy"
				class="avatar photo"
				@load="$emit('load', $event)"
			>
		</a>

		<a
			v-for="photo in photos"
			:key="`photo-${photo.id}`"
			:href="`/media/${photo.path}`"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
				:style="{ 'background-image': sfw ? `/img/${photo.sfw.lazy}` : `/media/${photo.lazy}` }"
				:title="`© ${photo.credit || photo.entity.name}`"
				loading="lazy"
				class="photo"
				@load="$emit('load', $event)"
			>
		</a>
	</div>
</template>

<script>
function photos() {
	return this.actor.photos.filter(photo => !photo.entropy || photo.entropy > 6);
}

function sfw() {
	return this.$store.state.ui.sfw;
}

export default {
	props: {
		actor: {
			type: Object,
			default: null,
		},
	},
	emits: ['load'],
	computed: {
		sfw,
		photos,
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.photos {
    display: flex;
	box-sizing: border-box;
	padding: .5rem 1rem;
    font-size: 0;

	&.expanded {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0;

		.photo-link {
			margin: 0 .5rem .5rem 0;
		}

		.photo {
			height: 18rem;
		}
	}

	&.empty {
		display: none;
	}

    .avatar-link {
        display: none;
    }
}

.photo-link {
	padding: 0 .5rem 0 0;

	&:last-child {
		padding: 0 1rem 0 0;
	}
}

.photo {
    height: 15rem;
    box-shadow: 0 0 3px var(--darken-weak);
	object-fit: cover;
	background-position: center;
	background-size: cover;
}

@media(max-width: $breakpoint3) {
	.photos {
		&.empty.avatar {
			display: flex;
		}

		.avatar-link {
			display: inline-block;
		}

		&.expanded {
			grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
		}
    }
}

@media(max-width: $breakpoint0) {
	.photos.expanded {
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }
}
</style>