65 lines
975 B
Vue
65 lines
975 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;
|
|
padding: 1rem;
|
|
}
|
|
|
|
@media(max-width: $breakpoint) {
|
|
.tiles {
|
|
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
|
|
}
|
|
}
|
|
</style>
|