<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" :stash="stash" @stash="isStashed => $emit('stash', isStashed)" /> </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, }, stash: { type: Object, default: null, }, }, emits: ['stash'], 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: .5rem; 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>