<template> <div class="children"> <div v-for="child in entity.children" :key="`child-${child.id}`" class="tile-container" > <EntityTile :entity="child" @load="(event) => $emit('load', event)" /> </div> </div> </template> <script> import EntityTile from './tile.vue'; export default { components: { EntityTile, }, emits: ['load'], props: { entity: { type: Object, default: null, }, }, }; </script> <style lang="scss" scoped> @import 'theme'; .children { display: flex; box-sizing: border-box; padding: 1rem; margin: 0 1rem 0 0; border-bottom: solid 1px var(--darken-hint); .tile-container { display: inline-block; padding: 0 1rem 0 0; } .tile { width: 15rem; height: 6rem; } &.expanded { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); grid-gap: 1rem; margin: 0; .tile-container { padding: 0; } .tile { width: 100%; } } } @media(max-width: $breakpoint0) { .children.expanded { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); } } </style>