traxxx/assets/components/releases/movies.vue

65 lines
975 B
Vue
Raw Normal View History

2020-07-25 01:44:19 +00:00
<template>
<div class="movies">
2020-08-15 17:04:33 +00:00
<div class="content-inner">
<div class="tiles">
<MovieTile
v-for="movie in movies"
:key="`movie-${movie.id}`"
:movie="movie"
/>
</div>
</div>
2020-08-15 17:04:33 +00:00
<Footer />
2020-07-25 01:44:19 +00:00
</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';
2020-07-25 01:44:19 +00:00
.movies {
2020-08-15 17:04:33 +00:00
display: flex;
flex-direction: column;
flex-grow: 1;
2020-07-25 01:44:19 +00:00
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-gap: 1rem;
padding: 1rem;
}
@media(max-width: $breakpoint) {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
}
2020-07-25 01:44:19 +00:00
</style>