traxxx/assets/components/entities/children.vue

57 lines
803 B
Vue

<template>
<div class="children">
<EntityTile
v-for="child in entity.children"
:key="`child-${child.id}`"
:entity="child"
/>
</div>
</template>
<script>
import EntityTile from './tile.vue';
export default {
components: {
EntityTile,
},
props: {
entity: {
type: Object,
default: null,
},
},
};
</script>
<style lang="scss" scoped>
.children {
display: flex;
box-sizing: border-box;
padding: 1rem;
border-bottom: solid 1px var(--darken-hint);
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
.tile {
width: 15rem;
margin: 0 1rem 0 0;
}
&.expanded {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
grid-gap: 1rem;
.tile {
width: 100%;
}
}
&::-webkit-scrollbar {
display: none;
}
}
</style>