traxxx/assets/components/entities/children.vue

75 lines
1.1 KiB
Vue
Executable File

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