traxxx/assets/components/filters/filter-bar.vue

<template>
	<div class="filter-bar noselect">
		<div class="sort">
			<router-link
				v-for="section in ranges"
				:key="section"
				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
				:class="{ active: $route.name === section || range === section }"
				class="range range-button"
			>{{ section }}</router-link>
		</div>

		<div class="filters">
			<ActorFilter
				class="filters-filter"
				:filter="filter"
				:available-actors="availableActors"
			/>

			<ChannelFilter
				class="filters-filter"
				:filter="filter"
				:available-channels="availableChannels"
			/>

			<TagFilter
				class="filters-filter"
				:filter="filter"
				:available-tags="availableTags"
			/>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';

import ActorFilter from './actor-filter.vue';
import ChannelFilter from './channel-filter.vue';
import TagFilter from './tag-filter.vue';

function filter(state) {
	return state.ui.filter;
}

function range() {
	return this.$route.params.range;
}

function batch(state) {
	return state.ui.batch;
}

async function setRange(newRange) {
	this.$store.dispatch('setRange', newRange);

	await this.fetchReleases();
}

async function setBatch(newBatch) {
	this.$store.dispatch('setBatch', newBatch);

	await this.fetchReleases();
}

export default {
	components: {
		ActorFilter,
		ChannelFilter,
		TagFilter,
	},
	props: {
		fetchReleases: {
			type: Function,
			default: null,
		},
		isHome: {
			type: Boolean,
			default: false,
		},
		itemsTotal: {
			type: Number,
			default: 0,
		},
		itemsPerPage: {
			type: Number,
			default: 10,
		},
		ranges: {
			type: Array,
			default: () => ['latest', 'upcoming', 'new'],
		},
		availableTags: {
			type: Array,
			default: () => [],
		},
		availableChannels: {
			type: Array,
			default: () => [],
		},
		availableActors: {
			type: Array,
			default: () => [],
		},
	},
	computed: {
		...mapState({
			filter,
			range,
			batch,
		}),
	},
	methods: {
		setRange,
		setBatch,
	},
};
</script>

<style lang="scss">
@import 'breakpoints';

.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);
	}
}

.filter-clear {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
	color: var(--shadow-weak);
	text-decoration: none;
	cursor: default;

	.icon {
		fill: var(--shadow-hint);
		margin: 0 0 0 1rem;
	}

	&.active {
		color: var(--shadow);

		.icon {
			fill: var(--shadow-weak);
		}

		&:hover {
			color: var(--text);
			background: var(--shadow-hint);
			cursor: pointer;

			.icon {
				fill: var(--alert);
			}
		}
	}
}

.filter-items .filter-item {
	display: flex;
	align-items: center;

	&:hover {
		background: var(--shadow-hint);
		cursor: pointer;
	}

	&.selected {
		.filter-include  {
			.filter-add {
				fill: var(--success);
			}

			&:hover {
				.filter-add {
					display: none;
				}

				.filter-remove {
					display: inline-block;
				}
			}
		}
	}
}

.filter-include {
	.icon {
		width: 1rem;
		height: 1rem;
		padding: .5rem 1rem;
		fill: var(--shadow-hint);
	}

	.filter-remove {
		display: none;
		fill: var(--alert);
	}

	&:hover {
		cursor: pointer;
	}
}

.filter-name {
	min-width: 8rem;
	display: flex;
	flex-grow: 1;
	padding: .5rem .75rem .5rem 1rem;
	color: var(--text);
	text-decoration: none;
}

.filter-include:hover,
.filter-name:hover {
	background: var(--shadow-hint);
}

@media(max-width: $breakpoint-small) {
	.filter-applied {
		display: none;
	}

	.filters-filter:not(:last-child) .filter {
		padding: .5rem;
	}

	.filters-filter:last-child .filter {
		padding: .5rem 0 .5rem .5rem;
	}
}
</style>

<style lang="scss" scoped>
@import 'theme';

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem 0 1rem;
    z-index: 1;
	background: var(--background-dim);
    font-size: 0;

    .icon {
        margin: 0 .5rem 0 0;
        fill: var(--shadow);
    }
}

::v-deep(.filter) {
	color: var(--shadow);
	display: inline-flex;
	align-items: center;

	.filter-applied {
		flex-grow: 1;
		padding: .75rem .5rem;
		font-size: 1rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;

		&.empty {
			color: var(--shadow);
		}
	}

	.icon {
		fill: var(--shadow);
		margin: -.1rem 0 0 0;
	}

	&:hover {
		cursor: pointer;

		.applied {
			color: var(--shadow-strong);
		}

		.icon {
			fill: var(--shadow-strong);
		}
	}
}

.filters {
	flex-shrink: 0;
}

.sort {
    display: flex;
    align-items: center;
}

.range-button {
    color: var(--shadow);
    display: inline-block;
    padding: .8rem 1rem;
    border: none;
	position: relative;
    font-size: .8rem;
    font-weight: bold;
    text-decoration: none;
	border: solid 1px transparent;
	border-bottom: none;
	text-transform: capitalize;

    &:hover:not(.active) {
        color: var(--shadow-strong);
        cursor: pointer;
    }

    &.active {
        color: var(--primary);
		background: var(--background-soft);
		border-color: var(--crease);

		&::after {
			/* hide grey border for tab effect, negative margin shows grey crease on mobile */
			content: '';
			width: 100%;
			height: 2px;
			background: var(--background-soft);
			position: absolute;
			left: 0;
			bottom: -2px;
		}
    }
}

.filters-filter {
    display: inline-block;
	flex-shrink: 0;

	&:not(:last-child) {
		margin: 0 1rem 0 0;
	}
}
</style>