traxxx/assets/components/releases/releases.vue

106 lines
2.0 KiB
Vue

<template>
<div class="releases">
<h3
v-if="context"
class="heading"
><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
<ul class="nolist tiles">
<li
v-for="(release, index) in releases"
:key="`release-${release.id}`"
>
<ReleaseTile
: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 ReleaseTile from '../tile/release.vue';
function range() {
return this.$store.state.ui.range;
}
export default {
components: {
ReleaseTile,
},
props: {
releases: {
type: Array,
default: () => [],
},
context: {
type: String,
default: null,
},
referer: {
type: String,
default: null,
},
},
computed: {
range,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.heading {
padding: 0;
margin: 0 0 1rem 0;
.range {
text-transform: capitalize;
}
}
.tiles {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, .25fr));
grid-gap: 1rem;
}
.empty {
color: var(--shadow-strong);
font-weight: bold;
}
@media(max-width: $breakpoint4) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
}
}
@media(max-width: $breakpoint3) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(20rem, .5fr));
}
}
@media(max-width: $breakpoint) {
.tiles {
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
}
</style>