traxxx/assets/components/entities/children.vue

67 lines
981 B
Vue
Raw Normal View History

<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>
2020-06-30 22:25:27 +00:00
@import 'theme';
.children {
display: flex;
box-sizing: border-box;
padding: 1rem;
margin: 0 1rem 0 0;
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;
margin: 0;
.tile {
width: 100%;
}
}
&::-webkit-scrollbar {
display: none;
}
}
2020-06-30 22:25:27 +00:00
@media(max-width: $breakpoint0) {
.children.expanded {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
}
</style>