traxxx/assets/components/entities/children.vue

<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>