2024-01-05 23:30:30 +00:00
|
|
|
<template>
|
2024-01-07 01:35:24 +00:00
|
|
|
<div class="filters-frame">
|
|
|
|
<div
|
2024-01-05 23:30:30 +00:00
|
|
|
v-show="showFilters"
|
2024-01-07 01:35:24 +00:00
|
|
|
class="filters-container"
|
|
|
|
:class="{ show: showFiltersCompact }"
|
|
|
|
@click="toggleFilters(false)"
|
2024-01-05 23:30:30 +00:00
|
|
|
>
|
2024-01-07 01:35:24 +00:00
|
|
|
<div class="filters-sidebar">
|
|
|
|
<form
|
|
|
|
class="filters"
|
2024-03-19 01:35:37 +00:00
|
|
|
:class="{ loading }"
|
2024-01-07 01:35:24 +00:00
|
|
|
@submit.prevent
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<slot />
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<button
|
|
|
|
v-if="typeof results === 'number'"
|
|
|
|
class="button results"
|
|
|
|
>Show {{ results }} {{ results > 1 ? 'results' : 'result' }}</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="filters-toggle close"
|
|
|
|
:class="{ 'show-full': showFilters, 'show-compact': showFiltersCompact }"
|
|
|
|
@click.stop="toggleFilters(false)"
|
|
|
|
>
|
|
|
|
<Icon
|
|
|
|
icon="arrow-left3"
|
|
|
|
class="arrow"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Icon
|
|
|
|
icon="cross2"
|
|
|
|
class="cross"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
class="filters-toggle open"
|
|
|
|
:class="{ 'show-full': !showFilters, 'show-compact': !showFiltersCompact }"
|
|
|
|
@click.stop="toggleFilters(true)"
|
|
|
|
><Icon icon="filter" /></div>
|
2024-01-05 23:30:30 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { ref } from 'vue';
|
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
defineProps({
|
|
|
|
results: {
|
|
|
|
type: Number,
|
|
|
|
default: null,
|
|
|
|
},
|
2024-03-19 01:35:37 +00:00
|
|
|
loading: {
|
|
|
|
type: Boolean,
|
|
|
|
default: false,
|
|
|
|
},
|
2024-01-07 01:35:24 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
// desktop defaults to open, compact defaults to closed
|
|
|
|
// we can't measure viewframe in SSR, so use separate toggles
|
2024-01-05 23:30:30 +00:00
|
|
|
const showFilters = ref(true);
|
2024-01-07 01:35:24 +00:00
|
|
|
const showFiltersCompact = ref(false);
|
2024-01-05 23:30:30 +00:00
|
|
|
|
|
|
|
function toggleFilters(state) {
|
|
|
|
showFilters.value = state ?? !showFilters.value;
|
2024-01-07 01:35:24 +00:00
|
|
|
showFiltersCompact.value = state ?? !showFiltersCompact.value;
|
2024-01-05 23:30:30 +00:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2024-01-07 22:44:33 +00:00
|
|
|
<style>
|
2024-01-08 01:21:57 +00:00
|
|
|
.filter {
|
|
|
|
padding: .5rem;
|
|
|
|
|
|
|
|
.input {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(:last-child) {
|
|
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-07 22:44:33 +00:00
|
|
|
.filter-mode {
|
|
|
|
width: 100%;
|
|
|
|
color: var(--shadow);
|
|
|
|
background: none;
|
|
|
|
padding: .75rem;
|
|
|
|
margin: 0 0 .5rem 0;
|
|
|
|
font-size: 1rem;
|
|
|
|
border: none;
|
|
|
|
border-bottom: solid 1px var(--shadow-hint);
|
|
|
|
|
|
|
|
option {
|
|
|
|
color: var(--text-dark);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-08 01:21:57 +00:00
|
|
|
.filters-sort {
|
|
|
|
display: flex;
|
|
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
|
|
}
|
|
|
|
|
|
|
|
.filters-search {
|
|
|
|
flex-grow: 1;
|
|
|
|
border-bottom: none;
|
|
|
|
width: 0;
|
|
|
|
}
|
|
|
|
|
2024-01-07 22:44:33 +00:00
|
|
|
.filter-clear {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: .5rem 1rem;
|
|
|
|
color: var(--shadow-weak-10);
|
|
|
|
text-decoration: none;
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow-weak-30);
|
|
|
|
margin: 0 0 0 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
color: var(--shadow);
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow-weak-10);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--text);
|
|
|
|
background: var(--shadow-hint);
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-08 01:21:57 +00:00
|
|
|
.filter-items {
|
|
|
|
max-height: 15rem;
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
box-shadow: 0 -1px 3px var(--shadow-weak-30);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.available {
|
|
|
|
box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-07 22:44:33 +00:00
|
|
|
.filter-items .filter-item {
|
|
|
|
display: flex;
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: var(--shadow-weak-30);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
.filter-include {
|
|
|
|
.filter-add {
|
|
|
|
fill: var(--success);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
.filter-add {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-remove {
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-01-26 00:31:15 +00:00
|
|
|
|
|
|
|
&.disabled {
|
|
|
|
opacity: .5;
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
|
|
.filter-include {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
}
|
2024-01-07 22:44:33 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.filter-name {
|
|
|
|
min-width: 8rem;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
flex-grow: 1;
|
2024-01-09 01:26:32 +00:00
|
|
|
padding: .25rem 0 .25rem .25rem;
|
2024-01-07 22:44:33 +00:00
|
|
|
color: var(--text);
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
2024-01-09 01:26:32 +00:00
|
|
|
.filter-text {
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
|
2024-01-07 22:44:33 +00:00
|
|
|
.filter-include {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
width: 1rem;
|
|
|
|
padding: 0 .75rem;
|
|
|
|
fill: var(--shadow-weak-30);
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-remove {
|
|
|
|
display: none;
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.filter-include:hover,
|
|
|
|
.filter-name:hover {
|
|
|
|
background: var(--shadow-weak-30);
|
|
|
|
}
|
2024-01-08 01:21:57 +00:00
|
|
|
|
|
|
|
.filter-sort {
|
|
|
|
display: flex;
|
|
|
|
flex-shrink: 0;
|
|
|
|
align-items: center;
|
|
|
|
align-self: stretch;
|
|
|
|
justify-content: center;
|
2024-01-09 01:26:32 +00:00
|
|
|
padding: 0 .25rem;
|
2024-01-08 01:21:57 +00:00
|
|
|
cursor: pointer;
|
|
|
|
font-weight: bold;
|
|
|
|
color: var(--shadow);
|
|
|
|
|
|
|
|
&.order {
|
2024-01-09 01:26:32 +00:00
|
|
|
padding: 0 .5rem 0 .25rem;
|
2024-01-08 01:21:57 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: var(--primary);
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-10 01:00:38 +00:00
|
|
|
.filter-details {
|
|
|
|
display: flex;
|
|
|
|
align-items: stretch;
|
|
|
|
margin-left: .5rem;
|
|
|
|
|
|
|
|
.filter-remove.icon {
|
|
|
|
padding: .25rem .6rem;
|
|
|
|
fill: var(--shadow);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
fill: var(--alert);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-08 01:21:57 +00:00
|
|
|
.filter-count {
|
2024-01-25 02:07:26 +00:00
|
|
|
width: 1.75rem;
|
2024-01-08 01:21:57 +00:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0 .25rem;
|
|
|
|
overflow: hidden;
|
|
|
|
color: var(--shadow-weak-10);
|
|
|
|
font-size: .9rem;
|
|
|
|
}
|
2024-02-22 04:08:06 +00:00
|
|
|
|
|
|
|
.filter-empty {
|
|
|
|
padding: .5rem;
|
|
|
|
color: var(--shadow);
|
|
|
|
font-style: italic;
|
|
|
|
}
|
2024-02-29 00:40:11 +00:00
|
|
|
|
|
|
|
.filter-disclaimer {
|
|
|
|
background: var(--notice);
|
|
|
|
color: var(--highlight-strong-30);
|
|
|
|
padding: .25rem .5rem;
|
|
|
|
box-shadow: inset 0 0 3px var(--shadow-weak-30);
|
|
|
|
line-height: 1.25;
|
|
|
|
font-size: .9rem;
|
|
|
|
}
|
2024-01-07 22:44:33 +00:00
|
|
|
</style>
|
|
|
|
|
2024-01-05 23:30:30 +00:00
|
|
|
<style scoped>
|
2024-01-07 01:35:24 +00:00
|
|
|
.filters-frame {
|
2024-01-05 23:30:30 +00:00
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
.filters-container {
|
|
|
|
display: flex;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.filters-sidebar {
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2024-03-19 01:35:37 +00:00
|
|
|
background: var(--background);
|
2024-01-07 01:35:24 +00:00
|
|
|
}
|
|
|
|
|
2024-01-05 23:30:30 +00:00
|
|
|
.filters {
|
|
|
|
width: 17rem;
|
2024-01-07 01:35:24 +00:00
|
|
|
flex-grow: 1;
|
|
|
|
position: relative;
|
|
|
|
box-sizing: border-box;
|
2024-01-07 22:44:33 +00:00
|
|
|
padding: 0 0 .5rem 0;
|
2024-01-05 23:30:30 +00:00
|
|
|
background: var(--background);
|
|
|
|
box-shadow: 0 0 3px var(--shadow-weak-30);
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.filters-toggle {
|
2024-03-19 01:35:37 +00:00
|
|
|
min-width: 2rem;
|
|
|
|
height: 2.5rem;
|
2024-01-07 01:35:24 +00:00
|
|
|
display: none;
|
2024-01-05 23:30:30 +00:00
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: 0 .25rem;
|
2024-01-07 01:35:24 +00:00
|
|
|
position: absolute;
|
2024-03-19 01:35:37 +00:00
|
|
|
top: .35rem;
|
|
|
|
right: -2.5rem;
|
2024-01-07 01:35:24 +00:00
|
|
|
border-radius: 0 .5rem .5rem 0;
|
2024-01-05 23:30:30 +00:00
|
|
|
background: var(--background);
|
|
|
|
color: var(--shadow);
|
|
|
|
font-weight: bold;
|
|
|
|
box-shadow: inset 0 0 3px var(--shadow-weak-30);
|
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
&.open {
|
|
|
|
left: 0;
|
|
|
|
right: auto;
|
|
|
|
}
|
2024-01-05 23:30:30 +00:00
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
&.show-full {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.close .cross {
|
|
|
|
display: none;
|
2024-01-05 23:30:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--shadow);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
fill: var(--primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
.results {
|
|
|
|
display: none;
|
|
|
|
justify-content: center;
|
|
|
|
background: var(--primary);
|
|
|
|
color: var(--text-light);
|
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
|
2024-03-19 01:35:37 +00:00
|
|
|
.loading {
|
|
|
|
opacity: .3;
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
2024-01-05 23:30:30 +00:00
|
|
|
@media (max-width: 1200px) {
|
|
|
|
.filters-container {
|
2024-01-07 01:35:24 +00:00
|
|
|
display: none;
|
2024-01-05 23:30:30 +00:00
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
2024-03-19 01:35:37 +00:00
|
|
|
z-index: 500;
|
2024-01-05 23:30:30 +00:00
|
|
|
background: var(--background-dim);
|
2024-01-07 01:35:24 +00:00
|
|
|
|
|
|
|
&.show {
|
|
|
|
display: flex;
|
|
|
|
}
|
2024-01-05 23:30:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.filters {
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
|
2024-01-07 01:35:24 +00:00
|
|
|
.filters-toggle {
|
|
|
|
&.show-full {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.show-compact {
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
&.close {
|
|
|
|
background: var(--grey-light-40);
|
|
|
|
position: relative;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.close .cross {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.close .arrow {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-01-05 23:30:30 +00:00
|
|
|
.compact-hide {
|
|
|
|
display: none;
|
|
|
|
}
|
2024-01-07 01:35:24 +00:00
|
|
|
|
|
|
|
.results {
|
|
|
|
display: flex;
|
|
|
|
}
|
2024-01-05 23:30:30 +00:00
|
|
|
}
|
|
|
|
</style>
|