traxxx/assets/components/releases/releases.vue

126 lines
1.9 KiB
Vue
Raw Normal View History

<template>
2020-05-17 23:22:56 +00:00
<div class="releases">
<h3
v-if="context"
class="heading"
><span class="range">{{ range }}</span> releases for '{{ context }}'</h3>
2020-05-17 23:22:56 +00:00
<ul
2020-06-28 02:22:19 +00:00
v-if="releases.length > 0"
2020-05-17 23:22:56 +00:00
:key="sfw"
v-lazy-container="{ selector: '.thumbnail' }"
class="nolist tiles"
>
<li
v-for="(release, index) in releases"
:key="`release-${release.id}`"
>
<ReleaseTile
:release="release"
:referer="referer"
:index="index"
/>
</li>
</ul>
2020-05-17 23:22:56 +00:00
<span
v-if="releases.length === 0 && range !== 'all'"
class="empty"
>No {{ range }} releases</span>
2020-05-17 23:22:56 +00:00
<span
v-else-if="releases.length === 0"
class="empty"
>No recent or upcoming releases</span>
</div>
</template>
<script>
import ReleaseTile from './tile.vue';
function range() {
2020-05-17 23:22:56 +00:00
return this.$route.params.range;
}
function sfw() {
2020-05-17 23:22:56 +00:00
return this.$store.state.ui.sfw;
}
export default {
2020-05-17 23:22:56 +00:00
components: {
ReleaseTile,
},
props: {
releases: {
type: Array,
default: () => [],
},
context: {
type: String,
default: null,
},
referer: {
type: String,
default: null,
},
},
computed: {
range,
sfw,
},
};
</script>
<style lang="scss" scoped>
@import 'theme';
.heading {
padding: 0;
margin: 0 0 1rem 0;
.range {
text-transform: capitalize;
}
}
2020-06-28 02:22:19 +00:00
.releases {
border-top: solid 1px var(--crease);
&.embedded {
border: none;
.tiles {
padding: 0;
}
}
2020-06-28 02:22:19 +00:00
}
.tiles {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
grid-gap: 1rem;
2020-06-27 02:50:13 +00:00
box-sizing: border-box;
padding: 1rem;
}
.empty {
2020-06-28 02:22:19 +00:00
display: inline-block;
2020-06-27 02:50:13 +00:00
padding: 1rem;
2020-03-23 00:43:49 +00:00
color: var(--shadow-strong);
font-weight: bold;
}
@media(max-width: $breakpoint3) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
}
@media(max-width: $breakpoint2) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}
}
</style>