traxxx/assets/components/actors/actors.vue

<template>
	<div class="actors">
		<nav class="filter">
			<ul class="genders nolist">
				<li class="gender">
					<router-link
						:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
						:class="{ selected: gender === 'all' }"
						class="gender-link all"
					>all</router-link>
				</li>
				<li class="gender">
					<router-link
						:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }"
						:class="{ selected: gender === 'female' }"
						class="gender-link female"
					><Gender gender="female" /></router-link>
				</li>
				<li class="gender">
					<router-link
						:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }"
						:class="{ selected: gender === 'male' }"
						class="gender-link male"
						replace
					><Gender gender="male" /></router-link>
				</li>
				<li class="gender">
					<router-link
						:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
						:class="{ selected: gender === 'trans' }"
						class="gender-link transsexual"
						replace
					><Gender gender="transsexual" /></router-link>
				</li>
				<li class="gender">
					<router-link
						:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
						:class="{ selected: gender === 'other' }"
						class="gender-link other"
						replace
					><Icon icon="question5" /></router-link>
				</li>
			</ul>

			<ul class="letters nolist">
				<li
					v-for="letterX in letters"
					:key="letterX"
					class="letter"
				>
					<router-link
						:to="{ name: 'actors', params: { gender, letter: letterX, pageNumber: 1 } }"
						:class="{ selected: letterX === letter }"
						class="letter-link"
						replace
					>{{ letterX || 'All' }}</router-link>
				</li>
			</ul>
		</nav>

		<nav class="filter">
			<ul class="nolist">
				<li>
					<Tooltip class="filter boobs">
						<span class="filter-trigger"><Icon icon="boobs" />Boobs</span>

						<template v-slot:tooltip>
							<div class="filter-section">
								<label class="filter-label off">Size</label>

								<span class="range-container">
									<span
										class="range-label"
										@click="boobSize = 0"
									><Icon icon="boobs-small" /></span>

									<input
										v-model="boobSize"
										class="range"
										type="range"
										min="0"
										max="10"
									>

									<span
										class="range-label on"
										@click="boobSize = 10"
									><Icon icon="boobs-big" /></span>
								</span>
							</div>

							<div class="filter-section">
								<label class="filter-label">Enhanced</label>

								<span
									:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
									class="range-container"
								>
									<span
										class="range-label off"
										@click="updateValue('naturalBoobs', 0)"
									>no</span>

									<input
										v-model="naturalBoobs"
										class="range-toggle"
										type="range"
										min="0"
										max="2"
										value="1"
										@change="updateFilters"
									>

									<span
										class="range-label on"
										@click="updateValue('naturalBoobs', 2)"
									>yes</span>
								</span>
							</div>
						</template>
					</Tooltip>
				</li>
			</ul>
		</nav>

		<Pagination
			ref="pagination"
			:items-total="totalCount"
			:items-per-page="limit"
		/>

		<div class="tiles">
			<Actor
				v-for="actor in actors"
				:key="`actor-${actor.id}`"
				:actor="actor"
			/>
		</div>

		<Pagination
			v-if="totalCount > 0"
			:items-total="totalCount"
			:items-per-page="limit"
			class="pagination-top"
		/>

		<Footer />
	</div>
</template>

<script>
import Actor from './tile.vue';
import Gender from './gender.vue';
import Pagination from '../pagination/pagination.vue';

const toggleValues = [true, undefined, false];

function updateFilters() {
	this.$router.push({
		name: 'actors',
		params: this.$route.params,
		query: {
			naturalBoobs: toggleValues[this.naturalBoobs],
		},
	});
}

function updateValue(prop, value) {
	this[prop] = value;
	this.updateFilters();
}

async function fetchActors(scroll) {
	const curatedGender = this.gender.replace('trans', 'transsexual');

	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
		limit: this.limit,
		pageNumber: Number(this.$route.params.pageNumber) || 1,
		letter: this.letter.replace('all', ''),
		gender: curatedGender === 'other' ? null : curatedGender,
		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
	});

	this.actors = actors;
	this.totalCount = totalCount;

	if (scroll) {
		this.$refs.pagination.$el.scrollIntoView();
	}
}

function letter() {
	return this.$route.params.letter || 'all';
}

function gender() {
	return this.$route.params.gender || 'all';
}

async function route(to, from) {
	const scroll = to.params.pageNumber !== from.params.pageNumber
		|| to.params.gender !== from.params.gender
		|| to.params.letter !== from.params.letter;

	await this.fetchActors(scroll);
}

async function mounted() {
	this.pageTitle = 'Actors';

	await this.fetchActors();
}

export default {
	components: {
		Actor,
		Gender,
		Pagination,
	},
	data() {
		const naturalBoobs = ['true', undefined, 'false'].indexOf(this.$route.query.naturalBoobs);

		return {
			actors: [],
			pageTitle: null,
			totalCount: 0,
			limit: 50,
			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
			boobSize: 0,
			naturalBoobs: naturalBoobs > -1 ? naturalBoobs : 1,
		};
	},
	computed: {
		letter,
		gender,
	},
	watch: {
		$route: route,
	},
	mounted,
	methods: {
		fetchActors,
		updateFilters,
		updateValue,
	},
};
</script>

<style lang="scss">
.gender-link {
    &.selected .gender .icon  {
        fill: var(--text-light);
        filter: none;
    }

    &:hover:not(.selected) {
        .gender .icon {
            fill: var(--text-light);
        }

        .male .icon  {
            filter: drop-shadow(0 0 1px var(--male));
        }

        .female .icon  {
            filter: drop-shadow(0 0 1px var(--female));
        }
    }

    &:hover:not(.selected) .transsexual .icon  {
        fill: var(--female);
        filter: drop-shadow(1px 0 0 var(--text-light)) drop-shadow(-1px 0 0 var(--text-light)) drop-shadow(0 1px 0 var(--text-light)) drop-shadow(0 -1px 0 var(--text-light)) drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));
    }
}
</style>

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

.actors {
    display: flex;
    flex-direction: column;
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    grid-gap: .5rem;
    padding: 1rem;
    flex-grow: 1;
}

.filter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    margin: 0 0 1rem 0;

	&:first-child {
		margin: 1rem 0;
	}
}

.genders {
    display: flex;
    flex-shrink: 0;
    padding: 0 .5rem 0 0;
    border-right: solid 1px var(--shadow-hint);
    margin: 0 1rem 0 0;
}

.letter,
.gender {
    display: inline-block;
}

.letter-link,
.gender-link {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: .25rem .5rem .25rem 0;
    color: var(--shadow);
    background: var(--background);
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 3px var(--darken-weak);

    .male,
    .female,
    .transsexual {
        padding: .2rem 0 0 0;
    }

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

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

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

    &.selected {
        background: var(--primary);
        color: var(--text-light);

        &.other .icon {
            fill: var(--text-light);
        }
    }
}

.filter-trigger {
	display: inline-flex;
	align-items: center;
	color: var(--shadow);
	font-weight: bold;

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

	&:hover {
		color: var(--shadow-strong);
		cursor: pointer;

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

.filter-section {
	&:not(:last-child) {
		margin: 0 0 .5rem 0;
	}
}

.filter-label {
	display: flex;
	justify-content: center;
	padding: 0 .5rem;
	margin: .5rem 0 0 0;
	color: var(--shadow);
	font-weight: bold;
	font-size: .9rem;

	.icon {
		margin: 0 .5rem 0 0;
	}
}

.range-container {
	display: flex;
	align-items: center;
	padding: .5rem 0;

	&.on {
		.range-label.on {
			color: var(--enabled);
		}

		.range-toggle::-webkit-slider-thumb {
			background: var(--enabled);
		}
	}

	&.off {
		.range-label.off {
			color: var(--disabled);
		}

		.range-toggle::-webkit-slider-thumb {
			background: var(--disabled);
		}
	}

	.icon {
		fill: var(--shadow);
		width: 1.5rem;
		height: 1.5rem;

		&:hover {
			fill: var(--shadow-strong);
		}
	}
}

.range-label {
	width: 1.5rem;
	padding: 0 .5rem;
	color: var(--shadow);
	font-weight: bold;
	font-size: .9rem;

	&.on {
		text-align: right;
	}

	&:hover {
		cursor: pointer;

		&.on {
			color: var(--enabled);
		}

		&.off {
			color: var(--disabled);
		}
	}
}

.range,
.range-toggle {
	flex-grow: 1;
	height: 1rem;
	appearance: none;
	border-radius: .5rem;
	background: var(--shadow-hint);
	cursor: pointer;

	&::-webkit-slider-thumb {
		appearance: none;
		background: var(--primary);
		width: 1rem;
		height: 1rem;
		border-radius: .5rem;
	}
}

.range-toggle {
	background: radial-gradient(circle at center, var(--shadow-weak) 0, var(--shadow-weak) .5rem, var(--shadow-hint) .5rem);

	&::-webkit-slider-thumb {
		background: #aaa;
	}
}

@media(max-width: $breakpoint) {
    .genders {
        flex-direction: column;
    }
}

@media(max-width: $breakpoint-micro) {
    .tiles {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }
}
</style>