traxxx/assets/components/album/album.vue

<template>
	<teleport to="body">
		<div class="album">
			<div class="album-header">
				<h3 class="album-title">{{ title }}</h3>

				<Icon
					icon="cross2"
					class="close"
					@click.native="$emit('close')"
				/>
			</div>

			<div class="album-items">
				<div
					v-for="item in items"
					:key="item.id"
					class="item-container"
				>
					<a
						:href="`/media/${item.path}`"
						class="item-link"
						target="_blank"
					>
						<img
							:src="`/media/${item.thumbnail}`"
							loading="lazy"
							class="item image"
						>
					</a>
				</div>
			</div>
		</div>
	</teleport>
</template>

<script>
export default {
	props: {
		items: {
			type: Array,
			default: () => [],
		},
		title: {
			type: String,
			default: null,
		},
	},
	emits: ['close'],
};
</script>

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

.album {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--shadow-extreme);
	z-index: 10;
}

.album-header {
	display: flex;
	justify-content: space-between;
	flex-shrink: 0;
}

.album-title {
	display: block;
	flex-grow: 1;
	align-items: center;
	padding: 1rem;
	margin: 0;
	color: var(--text-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.close {
	width: 1.5rem;
	height: 1.5rem;
	padding: 1rem;
	fill: var(--lighten);

	&:hover {
		cursor: pointer;
		fill: var(--text-light);
	}
}

.album-items {
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	grid-gap: 0 1rem;
	padding: 1rem;
	margin: auto 0;
	overflow-y: auto;
}

.item-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.item-link {
	height: 100%;
	margin: 0 0 1rem 0;
}

.item {
	width: 100%;
}

@media(max-width: $breakpoint-kilo) {
	.album-items {
		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	}
}

@media(max-width: $breakpoint) {
	.album-items {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media(max-width: $breakpoint-small) {
	.album-items.portrait {
		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	}
}

@media(max-width: $breakpoint-micro) {
	.album-items {
		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	}
}

@media(max-width: $breakpoint-pico) {
	.album-items {
		grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	}
}
</style>