traxxx/assets/components/releases/releases.vue

<template>
	<div class="releases">
		<h3
			v-if="context"
			class="heading"
		><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>

		<ul
			v-if="releases.length > 0"
			:key="sfw"
			class="nolist tiles"
		>
			<li
				v-for="(release, index) in releases"
				:key="`release-${release.id}`"
			>
				<SceneTile
					:release="release"
					:referer="referer"
					:index="index"
				/>
			</li>
		</ul>

		<span
			v-if="releases.length === 0 && range !== 'all'"
			class="empty"
		>No {{ range }} releases</span>

		<span
			v-else-if="releases.length === 0"
			class="empty"
		>No recent or upcoming releases</span>
	</div>
</template>

<script>
import SceneTile from './scene-tile.vue';

function range() {
	return this.$route.params.range;
}

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

export default {
	components: {
		SceneTile,
	},
	props: {
		releases: {
			type: Array,
			default: () => [],
		},
		context: {
			type: String,
			default: null,
		},
		referer: {
			type: String,
			default: null,
		},
	},
	computed: {
		range,
		sfw,
	},
};
</script>

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

.heading {
    padding: 0;
    margin: 0 0 1rem 0;

    .range {
        text-transform: capitalize;
    }
}

.releases {
	flex-grow: 1;
	border-top: solid 1px var(--crease);

	&.embedded {
		border: none;

		.tiles {
			padding: 0;
		}
	}
}

.tiles {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    grid-gap: 1rem;
	box-sizing: border-box;
	padding: 1rem;
}

.empty {
	display: inline-block;
	padding: 1rem;
    color: var(--shadow-strong);
    font-weight: bold;
}

@media(max-width: $breakpoint-kilo) {
    .tiles {
		grid-gap: .5rem;
		padding: .5rem;
    }
}
</style>