traxxx/assets/components/releases/movies.vue

64 lines
959 B
Vue

<template>
<div class="movies">
<div class="content-inner">
<div class="tiles">
<MovieTile
v-for="movie in movies"
:key="`movie-${movie.id}`"
:movie="movie"
/>
</div>
</div>
<Footer />
</div>
</template>
<script>
import MovieTile from './movie-tile.vue';
async function mounted() {
const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
limit: 30,
});
this.movies = movies;
this.totalCount = totalCount;
}
export default {
components: {
MovieTile,
},
data() {
return {
movies: [],
totalCount: 0,
};
},
mounted,
};
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.movies {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-gap: 1rem;
}
@media(max-width: $breakpoint) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
}
</style>