traxxx/assets/components/releases/releases.vue

136 lines
2.0 KiB
Vue

<template>
<div class="releases">
<h3
v-if="context"
class="heading"
><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
<Ellipsis v-if="!done" />
<ul
v-else-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-else-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 Ellipsis from '../loading/ellipsis.vue';
import SceneTile from './scene-tile.vue';
function range() {
return this.$route.params.range;
}
function sfw() {
return this.$store.state.ui.sfw;
}
export default {
components: {
Ellipsis,
SceneTile,
},
props: {
releases: {
type: Array,
default: () => [],
},
context: {
type: String,
default: null,
},
done: {
type: Boolean,
default: true,
},
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>