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