traxxx/assets/components/actors/actors.vue

47 lines
818 B
Vue
Raw Normal View History

<template>
<div class="actors">
<Actor
v-for="actor in actors"
:key="`actor-${actor.id}`"
:actor="actor"
/>
</div>
</template>
<script>
import Actor from '../tile/actor.vue';
async function mounted() {
this.actors = await this.$store.dispatch('fetchActors', { limit: 1000 });
}
export default {
components: {
Actor,
},
data() {
return {
actors: [],
};
},
mounted,
};
</script>
<style lang="scss" scoped>
@import 'theme';
.actors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, .5fr));
grid-gap: 0 .5rem;
padding: 1rem;
}
@media(max-width: $breakpoint) {
.actors {
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
}
</style>