traxxx/assets/components/networks/networks.vue

47 lines
830 B
Vue

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