forked from DebaucheryLibrarian/traxxx
Using query instead of parameters for tag filter URI. Added generic scrolling component, using for actor photos and entity children. Removed pagination from filter bar.
This commit is contained in:
56
assets/components/entities/children.vue
Normal file
56
assets/components/entities/children.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user