traxxx/assets/components/tags/photos.vue

<template>
	<div class="photos">
		<Campaign
			:tag="tag"
			:min-height="240"
			:max-ratio="1.5"
			class="photo-link photo"
			@campaign="campaign => $emit('campaign', campaign)"
		/>

		<a
			v-for="photo in photos"
			:key="`photo-${photo.id}`"
			:title="photo.comment"
			:href="`/img/${photo.path}`"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="getPath(photo, 'thumbnail', { local: true })"
				:style="{ 'background-image': getBgPath(photo, 'lazy', { local: true }) }"
				:alt="photo.comment"
				:width="photo.thumbnailWidth"
				:height="photo.thumbnailHeight"
				class="photo"
				@load="$emit('load', $event)"
			>

			<Logo :photo="photo" />

			<router-link
				v-if="photo.comment && photo.entity"
				:to="`/${photo.entity.type}/${photo.entity.slug}`"
				class="photo-comment"
			>{{ photo.comment }} for {{ photo.entity.name }}</router-link>

			<span
				v-else-if="photo.comment"
				class="photo-comment"
			>{{ photo.comment }}</span>
		</a>
	</div>
</template>

<script>
import Logo from '../album/logo.vue';
import Campaign from '../campaigns/campaign.vue';

function photos() {
	if (this.tag.poster && this.$store.state.ui.sfw) {
		return [this.tag.poster].concat(this.tag.photos).map((photo) => photo.sfw);
	}

	if (this.$store.state.ui.sfw) {
		return this.tag.photos.map((photo) => photo.sfw);
	}

	if (this.tag.poster) {
		return [this.tag.poster].concat(this.tag.photos);
	}

	return this.tag.photos;
}

export default {
	components: {
		Logo,
		Campaign,
	},
	props: {
		tag: {
			type: Object,
			default: null,
		},
	},
	emits: ['load', 'campaign'],
	computed: {
		photos,
	},
};
</script>

<style lang="scss" scoped>
.photos {
	width: 100%;
	padding: .5rem 1rem;
	box-sizing: border-box;
	white-space: nowrap;
    font-size: 0;
	border-bottom: solid 1px var(--shadow-hint);

    &::-webkit-scrollbar {
        display: none;
    }

	&.expanded {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 0 0 1rem;

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

		.poster,
		.photo {
			max-height: 18rem;
		}
	}
}

.photo-link {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 0 .5rem 0 0;

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

	&:hover {
		.photo-comment {
			transform: translateY(0);
		}

		::v-deep(.album-logo) {
			opacity: 0;
		}
	}
}

.poster,
.photo {
	width: auto;
	max-height: 15rem;
	max-width: 100%;
	box-shadow: 0 0 3px var(--shadow-weak);
	object-fit: cover;
	background-position: center;
	background-size: cover;
}

.photo-comment {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	padding: .5rem;
	color: var(--text-light);
	background: var(--shadow);
	font-size: .9rem;
	text-shadow: 0 0 3px var(--shadow);
	text-decoration: none;
	white-space: normal;
	line-height: 1.25;
	transform: translateY(100%);
	transition: transform .25s ease;
}

::v-deep(.campaign) .campaign-banner {
	max-height: 15rem;
	width: auto;
}
</style>