77 lines
1.3 KiB
Vue
77 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="filter-bar noselect">
|
||
|
|
<Icon icon="filter" />
|
||
|
|
|
||
|
|
<Filters
|
||
|
|
class="filters-container"
|
||
|
|
:filter="filter"
|
||
|
|
@set-filter="filter => $emit('set-filter', filter)"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<v-popover class="filters-compact">
|
||
|
|
<div>Filters</div>
|
||
|
|
|
||
|
|
<div slot="popover">
|
||
|
|
<Filters
|
||
|
|
:compact="true"
|
||
|
|
:filter="filter"
|
||
|
|
@set-filter="filter => $emit('set-filter', filter)"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</v-popover>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Filters from './filters.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
Filters,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
filter: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
@import 'theme';
|
||
|
|
|
||
|
|
.filter-bar {
|
||
|
|
background: $background;
|
||
|
|
display: block;
|
||
|
|
padding: .5rem 1rem;
|
||
|
|
font-size: 0;
|
||
|
|
box-shadow: 0 0 3px $shadow;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
fill: $shadow;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.filters-container {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filters-compact {
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: bold;
|
||
|
|
display: none;
|
||
|
|
margin: 0 0 0 .5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(max-width: $breakpoint) {
|
||
|
|
.filters-container {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filters-compact {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|