traxxx/assets/components/releases/tags.vue

<template>
	<div
		class="tags-container"
		:class="{ overflowing }"
	>
		<ul
			ref="tags"
			class="tags nolist"
			:class="{ expanded }"
		>
			<li
				v-for="tag in tags"
				:key="`tag-${tag.slug}`"
				class="tag"
			>
				<a
					:href="`/tag/${tag.slug}`"
					class="link"
				>{{ tag.name }}</a>
			</li>
		</ul>

		<button
			v-if="overflowing && !expanded"
			class="tags-more"
			@click="expanded = true"
		>More tags</button>

		<button
			v-if="expanded"
			class="tags-more"
			@click="expanded = false"
		>Fewer tags</button>
	</div>
</template>

<script>
function updateOverflowing() {
	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
	const containerBottom = containerBoundaries.top + containerBoundaries.height;

	this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
		const tagBoundaries = tag.getBoundingClientRect();

		return tagBoundaries.top > containerBottom;
	});
}

function mounted() {
	window.addEventListener('resize', this.updateOverflowing);
	this.updateOverflowing();
}

function beforeUnmount() {
	window.removeEventListener('resize', this.updateOverflowing);
}

export default {
	props: {
		tags: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			overflowing: false,
			expanded: false,
		};
	},
	mounted,
	beforeUnmount,
	methods: {
		updateOverflowing,
	},
};
</script>

<style lang="scss" scoped>
.tags-container {
	margin: 0 0 1.5rem 0;

	&.overflowing {
		margin: 0 0 .5rem 0;
	}
}

.tags {
	max-height: 4.6rem;
	padding: 2px 1rem 0 1rem;
	overflow: hidden;

	&.expanded {
		max-height: unset;
	}
}

.tag .link {
	color: var(--link);
    background: var(--background);
    display: inline-block;
    padding: .5rem;
    margin: 0 .25rem .25rem 0;
    box-shadow: 0 0 2px var(--shadow-weak);
    text-decoration: none;
    text-transform: capitalize;

    &:hover {
        color: var(--primary);
    }
}

.tags-more {
	width: 100%;
	background: none;
	padding: .5rem 1rem;
	border: solid 1px var(--shadow-hint);
	border-left: none;
	border-right: none;
	margin: .25rem 0 .5rem 0;
	color: var(--shadow);
	font-size: .9rem;

	&:hover {
		cursor: pointer;
		color: var(--shadow-strong);
	}
}
</style>