collapsible filters
This commit is contained in:
parent
18d1b59845
commit
c350bca488
|
@ -62,8 +62,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-auto pt-1 flex-grow-1">
|
<div id="filter-app" class="col-lg-auto pt-1 flex-grow-1">
|
||||||
<div class="float-right">
|
<div class="float-right d-flex">
|
||||||
|
|
||||||
|
<!-- Filter Control -->
|
||||||
|
<div v-if="showFilter" id="filter-control">
|
||||||
<form method="get" class="form-inline">
|
<form method="get" class="form-inline">
|
||||||
<select name="sort"
|
<select name="sort"
|
||||||
onchange="this.form.submit()"
|
onchange="this.form.submit()"
|
||||||
|
@ -110,6 +113,15 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<a v-if="!showFilter" @click="toggleFilter()" class="btn btn-secondary">
|
||||||
|
<i class="fe fe-chevrons-left"></i> Filters
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a v-if="showFilter" @click="toggleFilter()" class="btn btn-outline-secondary">
|
||||||
|
<i class="fe fe-chevrons-right"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -582,4 +594,26 @@
|
||||||
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="{{ url_for('static', filename='node_modules/vue/dist/vue.min.js') }}"></script>
|
||||||
|
<script>
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#filter-app',
|
||||||
|
delimiters: ["[[", "]]"], // necessary to avoid conflict with jinja
|
||||||
|
data: {
|
||||||
|
showFilter: false
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async toggleFilter() {
|
||||||
|
let that = this;
|
||||||
|
that.showFilter = !that.showFilter;
|
||||||
|
store.set('showFilter', that.showFilter);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
if (store.get("showFilter"))
|
||||||
|
this.showFilter = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue