1.198.1

assets/components/actors/actors.vue

@@ -1,213 +1,203 @@
 <template>
-	<div class="actors">
+	<div
+		ref="content"
+		class="actors"
+	>
 		<nav
-			ref="filter"
-			class="filter"
+			ref="filters"
+			class="filters"
 		>
-			<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>
+			<div class="filters-row">
+				<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>
+				<ul class="nolist">
+					<li>
+						<Tooltip class="filter boobs">
+							<span
+								class="filter-trigger"
+								:class="{ enabled: ageRequired }"
+							><Icon icon="vcard" />Age</span>
 
-		<nav class="filter">
-			<ul class="nolist">
-				<li>
-					<Tooltip class="filter boobs">
-						<span
-							class="filter-trigger"
-							:class="{ enabled: ageRequired }"
-						><Icon icon="vcard" />Age</span>
-
-						<template v-slot:tooltip>
-							<RangeFilter
-								label="age"
-								:min="18"
-								:max="100"
-								:value="age"
-								:disabled="!ageRequired"
-								@enable="(checked) => updateValue('ageRequired', checked, true)"
-								@input="(range) => updateValue('age', range, false)"
-								@change="(range) => updateValue('age', range, true)"
-							>
-								<template v-slot:start><Icon icon="leaf" /></template>
-								<template v-slot:end><Icon icon="tree3" /></template>
-							</RangeFilter>
-
-							<div class="filter-section">
-								<label class="filter-label">
-									<span class="label">
-										<Checkbox
-											:checked="dobRequired"
-											class="checkbox"
-											@change="(checked) => updateValue('dobRequired', checked, true)"
-										/>Date of birth
-									</span>
-								</label>
-
-								<div
-									class="input-container"
-									@click="() => updateValue('dobRequired', true, true)"
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="age"
+									:min="18"
+									:max="100"
+									:value="age"
+									:disabled="!ageRequired"
+									@enable="(checked) => updateValue('ageRequired', checked, true)"
+									@input="(range) => updateValue('age', range, false)"
+									@change="(range) => updateValue('age', range, true)"
 								>
-									<input
-										v-model="dob"
-										:disabled="!dobRequired"
-										type="date"
-										class="input"
-										@change="updateFilters"
+									<template v-slot:start><Icon icon="leaf" /></template>
+									<template v-slot:end><Icon icon="tree3" /></template>
+								</RangeFilter>
+
+								<div class="filter-section">
+									<label class="filter-label">
+										<span class="label">
+											<Checkbox
+												:checked="dobRequired"
+												class="checkbox"
+												@change="(checked) => updateValue('dobRequired', checked, true)"
+											/>Date of birth
+										</span>
+									</label>
+
+									<div
+										class="input-container"
+										@click="() => updateValue('dobRequired', true, true)"
 									>
+										<input
+											v-model="dob"
+											:disabled="!dobRequired"
+											type="date"
+											class="input"
+											@change="updateFilters"
+										>
+									</div>
 								</div>
-							</div>
-						</template>
-					</Tooltip>
-				</li>
+							</template>
+						</Tooltip>
+					</li>
 
-				<li>
-					<Tooltip class="filter">
-						<span
-							class="filter-trigger boobs"
-							:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
-						><Icon icon="boobs" />Boobs</span>
+					<li>
+						<Tooltip class="filter">
+							<span
+								class="filter-trigger boobs"
+								:class="{ enabled: boobSizeRequired || naturalBoobs !== 1 }"
+							><Icon icon="boobs" />Boobs</span>
 
-						<template v-slot:tooltip>
-							<RangeFilter
-								label="size"
-								:min="0"
-								:max="boobSizes.length - 1"
-								:value="boobSize"
-								:values="boobSizes"
-								:disabled="!boobSizeRequired"
-								@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
-								@input="(range) => updateValue('boobSize', range, false)"
-								@change="(range) => updateValue('boobSize', range, true)"
-							>
-								<template v-slot:start><Icon icon="boobs-small" /></template>
-								<template v-slot:end><Icon icon="boobs-big" /></template>
-							</RangeFilter>
-
-							<div class="filter-section">
-								<span class="filter-label">Enhanced</span>
-
-								<span
-									:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
-									class="toggle-container noclick"
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="size"
+									:min="0"
+									:max="boobSizes.length - 1"
+									:value="boobSize"
+									:values="boobSizes"
+									:disabled="!boobSizeRequired"
+									@enable="(checked) => updateValue('boobSizeRequired', checked, true)"
+									@input="(range) => updateValue('boobSize', range, false)"
+									@change="(range) => updateValue('boobSize', range, true)"
 								>
-									<span
-										class="toggle-label off"
-										@click="updateValue('naturalBoobs', 0)"
-									><Icon icon="leaf" /></span>
+									<template v-slot:start><Icon icon="boobs-small" /></template>
+									<template v-slot:end><Icon icon="boobs-big" /></template>
+								</RangeFilter>
 
-									<input
-										v-model.number="naturalBoobs"
-										class="toggle"
-										type="range"
-										min="0"
-										max="2"
-										@change="updateFilters"
+								<div class="filter-section">
+									<span class="filter-label">Enhanced</span>
+
+									<span
+										:class="{ [['off', 'default', 'on'][naturalBoobs]]: true }"
+										class="toggle-container noclick"
 									>
+										<span
+											class="toggle-label off"
+											@click="updateValue('naturalBoobs', 0)"
+										><Icon icon="leaf" /></span>
 
-									<span
-										class="toggle-label on"
-										@click="updateValue('naturalBoobs', 2)"
-									><Icon icon="magic-wand2" /></span>
-								</span>
-							</div>
-						</template>
-					</Tooltip>
-				</li>
+										<input
+											v-model.number="naturalBoobs"
+											class="toggle"
+											type="range"
+											min="0"
+											max="2"
+											@change="updateFilters"
+										>
 
-				<li>
-					<Tooltip class="filter boobs">
-						<span
-							class="filter-trigger"
-							:class="{ enabled: heightRequired || weightRequired }"
-						><Icon icon="rulers" />Physique</span>
+										<span
+											class="toggle-label on"
+											@click="updateValue('naturalBoobs', 2)"
+										><Icon icon="magic-wand2" /></span>
+									</span>
+								</div>
+							</template>
+						</Tooltip>
+					</li>
 
-						<template v-slot:tooltip>
-							<RangeFilter
-								label="height"
-								:min="50"
-								:max="220"
-								:value="height"
-								:disabled="!heightRequired"
-								unit="cm"
-								@enable="(checked) => updateValue('heightRequired', checked, true)"
-								@input="(range) => updateValue('height', range, false)"
-								@change="(range) => updateValue('height', range, true)"
-							>
-								<template v-slot:start><Icon icon="height-short" /></template>
-								<template v-slot:end><Icon icon="height" /></template>
-							</RangeFilter>
+					<li>
+						<Tooltip class="filter boobs">
+							<span
+								class="filter-trigger"
+								:class="{ enabled: heightRequired || weightRequired }"
+							><Icon icon="rulers" />Physique</span>
 
-							<RangeFilter
-								label="weight"
-								:min="30"
-								:max="200"
-								:value="weight"
-								:disabled="!weightRequired"
-								unit="kg"
-								@enable="(checked) => updateValue('weightRequired', checked, true)"
-								@input="(range) => updateValue('weight', range, false)"
-								@change="(range) => updateValue('weight', range, true)"
-							>
-								<template v-slot:start><Icon icon="meter-slow" /></template>
-								<template v-slot:end><Icon icon="meter-fast" /></template>
-							</RangeFilter>
-						</template>
-					</Tooltip>
-				</li>
-			</ul>
+							<template v-slot:tooltip>
+								<RangeFilter
+									label="height"
+									:min="50"
+									:max="220"
+									:value="height"
+									:disabled="!heightRequired"
+									unit="cm"
+									@enable="(checked) => updateValue('heightRequired', checked, true)"
+									@input="(range) => updateValue('height', range, false)"
+									@change="(range) => updateValue('height', range, true)"
+								>
+									<template v-slot:start><Icon icon="height-short" /></template>
+									<template v-slot:end><Icon icon="height" /></template>
+								</RangeFilter>
+
+								<RangeFilter
+									label="weight"
+									:min="30"
+									:max="200"
+									:value="weight"
+									:disabled="!weightRequired"
+									unit="kg"
+									@enable="(checked) => updateValue('weightRequired', checked, true)"
+									@input="(range) => updateValue('weight', range, false)"
+									@change="(range) => updateValue('weight', range, true)"
+								>
+									<template v-slot:start><Icon icon="meter-slow" /></template>
+									<template v-slot:end><Icon icon="meter-fast" /></template>
+								</RangeFilter>
+							</template>
+						</Tooltip>
+					</li>
+				</ul>
+			</div>
+
+			<SearchBar :placeholder="`Search ${totalCount} actors`" />
 		</nav>
 
 		<div class="tiles">
@@ -236,10 +226,11 @@ import Actor from './tile.vue';
 import Gender from './gender.vue';
 import Checkbox from '../form/checkbox.vue';
 import RangeFilter from './filter-range.vue';
+import SearchBar from '../search/bar.vue';
 import Pagination from '../pagination/pagination.vue';
 
 const toggleValues = [true, null, false];
-const boobSizes = 'ABCDEFGHZ'.split('');
+const boobSizes = 'ABCDEFGHIJKZ'.split('');
 
 function updateFilters() {
 	this.$router.push({
@@ -269,6 +260,11 @@ function updateValue(prop, value, load = true) {
 }
 
 async function fetchActors(scroll) {
+	if (this.$route.query.query) {
+		await this.searchActors();
+		return;
+	}
+
 	const curatedGender = this.gender.replace('trans', 'transsexual');
 
 	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
@@ -288,7 +284,23 @@ async function fetchActors(scroll) {
 	this.totalCount = totalCount;
 
 	if (scroll) {
-		this.$refs.filter?.scrollIntoView();
+		this.$refs.content.scrollTop = 0;
+		// this.$refs.filter?.scrollIntoView();
+	}
+}
+
+async function searchActors(scroll) {
+	const actors = await this.$store.dispatch('searchActors', {
+		query: this.$route.query.query,
+		limit: this.limit,
+	});
+
+	this.actors = actors;
+	this.totalCount = actors.length;
+
+	if (scroll) {
+		this.$refs.content.scrollTop = 0;
+		// this.$refs.filter?.scrollIntoView();
 	}
 }
 
@@ -320,6 +332,7 @@ export default {
 		Checkbox,
 		Gender,
 		RangeFilter,
+		SearchBar,
 		Pagination,
 	},
 	data() {
@@ -328,7 +341,6 @@ export default {
 			pageTitle: null,
 			totalCount: 0,
 			limit: 50,
-			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 			age: this.$route.query.age?.split(',') || [18, 100],
 			ageRequired: !!this.$route.query.age,
 			dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
@@ -353,6 +365,7 @@ export default {
 	mounted,
 	methods: {
 		fetchActors,
+		searchActors,
 		updateFilters,
 		updateValue,
 	},
@@ -403,24 +416,34 @@ export default {
     flex-grow: 1;
 }
 
-.filter {
+.search {
+	width: 0;
+	flex-grow: 1;
+	justify-content: flex-end;
+	box-sizing: border-box;
+	padding: 0 1rem;
+}
+
+.filters,
+.filters-row {
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 1rem;
-    margin: 0 0 1rem 0;
+}
 
-	&:first-child {
-		margin: 1rem 0;
-	}
+.filters {
+	margin: 1rem 0 .5rem 0;
+}
+
+.filters-row,
+.filter {
+	padding: 0 1rem;
 }
 
 .genders {
     display: flex;
     flex-shrink: 0;
     padding: 0 .5rem 0 0;
-    border-right: solid 1px var(--shadow-hint);
-    margin: 0 1rem 0 0;
 }
 
 .letter,
@@ -661,10 +684,27 @@ export default {
 	}
 }
 
+@media(max-width: $breakpoint-kilo) {
+    .filters {
+        flex-direction: column-reverse;
+    }
+
+	::v-deep(.search) {
+		width: 100%;
+		justify-content: center;
+		margin: 0 0 1rem 0;
+	}
+}
+
 @media(max-width: $breakpoint) {
-    .genders {
+    .filters-row {
         flex-direction: column;
     }
+
+	.genders {
+		padding: 0;
+		margin: 0 0 1.5rem 0;
+	}
 }
 
 @media(max-width: $breakpoint-micro) {
@@ -672,4 +712,10 @@ export default {
         grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }
 }
+
+@media(max-width: $breakpoint-mini) {
+	.filter .icon {
+		display: none;
+	}
+}
 </style>

assets/components/networks/networks.vue

@@ -1,44 +1,23 @@
 <template>
 	<div class="networks">
-		<form
-			class="search"
-			@submit.prevent="searchEntities"
-		>
-			<input
-				v-model="query"
-				:placeholder="`Find ${channelCount} channels in ${entities.length} networks`"
-				class="query"
-				@input="searchEntities"
+		<div class="content-inner">
+			<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
+
+			<span
+				v-if="done && entities.length === 0"
+				class="empty"
+			>No results for "{{ $route.query.query }}"</span>
+
+			<div
+				v-else
+				class="entity-tiles"
 			>
-
-			<button
-				type="submit"
-				class="search-button"
-			><Icon icon="search" /></button>
-		</form>
-
-		<div
-			v-if="query.length > 0"
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in searchResults"
-				:key="`${entity.type}-tile-${entity.slug}`"
-				:entity="entity"
-			/>
-
-			<span v-if="searchResults.length === 0">No results for "{{ query }}"</span>
-		</div>
-
-		<div
-			v-else
-			class="entity-tiles"
-		>
-			<Entity
-				v-for="entity in entities"
-				:key="`entity-tile-${entity.slug}`"
-				:entity="entity"
-			/>
+				<Entity
+					v-for="entity in entities"
+					:key="`entity-tile-${entity.slug}`"
+					:entity="entity"
+				/>
+			</div>
 		</div>
 
 		<Footer />
@@ -47,21 +26,39 @@
 
 <script>
 import Entity from '../entities/tile.vue';
+import SearchBar from '../search/bar.vue';
 
-async function searchEntities() {
-	this.searchResults = await this.$store.dispatch('searchEntities', {
-		query: this.query,
-		limit: 50,
-	});
-}
+async function fetchEntities() {
+	if (this.$route.query.query) {
+		await this.searchEntities();
+		return;
+	}
+
+	this.done = false;
 
-async function mounted() {
 	this.entities = await this.$store.dispatch('fetchEntities', {
 		type: 'network',
 		entitySlugs: [],
 	});
 
-	this.pageTitle = 'Networks';
+	this.done = true;
+}
+
+async function searchEntities() {
+	this.done = false;
+
+	this.entities = await this.$store.dispatch('searchEntities', {
+		query: this.$route.query.query,
+		limit: 20,
+	});
+
+	this.done = true;
+}
+
+async function mounted() {
+	this.pageTitle = 'Channels';
+
+	await this.fetchEntities();
 }
 
 function channelCount() {
@@ -71,20 +68,24 @@ function channelCount() {
 export default {
 	components: {
 		Entity,
+		SearchBar,
 	},
 	data() {
 		return {
-			query: '',
+			done: false,
 			pageTitle: null,
 			entities: [],
-			searchResults: [],
 		};
 	},
 	computed: {
 		channelCount,
 	},
+	watch: {
+		$route: fetchEntities,
+	},
 	mounted,
 	methods: {
+		fetchEntities,
 		searchEntities,
 	},
 };
@@ -94,49 +95,17 @@ export default {
 @import 'theme';
 
 .networks {
-    padding: 0 1rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
+	padding: 0 1rem;
 }
 
 .search {
-    display: flex;
-    width: 100%;
-    max-width: 40rem;
-}
-
-.query {
-    color: var(--text);
-    background: var(--background);
-    flex-grow: 1;
-    box-sizing: border-box;
-    padding: 1rem;
-    border: none;
-    box-sizing: border-box;
-    box-shadow: 0 0 3px var(--darken-weak);
-    margin: 1rem 0;
-    font-size: 1rem;
-    outline: none;
-
-    &:focus {
-        box-shadow: 0 0 3px var(--primary);
-    }
-}
-
-.search-button {
-    padding: 1rem;
-    background: none;
-    border: none;
-
-    .icon {
-        fill: var(--shadow);
-    }
-
-    &:hover {
-        cursor: pointer;
-
-        .icon {
-            fill: var(--primary);
-        }
-    }
+	margin: 1rem 0 0 0;
 }
 
 .entity-tiles {
@@ -150,6 +119,14 @@ export default {
 	}
 }
 
+.empty {
+	display: block;
+	margin: 1rem 0;
+	color: var(--shadow);
+	font-size: 1.25rem;
+	font-weight: bold;
+}
+
 @media(max-width: $breakpoint2) {
     .entity-tiles {
         grid-gap: .5rem;

assets/components/releases/movie-tile.vue

@@ -179,7 +179,7 @@ export default {
 	}
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.movie {
 		height: 12rem;
 	}

assets/components/releases/movies.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="movies">
 		<div class="content-inner">
+			<SearchBar :placeholder="`Search ${totalCount} movies`" />
+
 			<div class="tiles">
 				<MovieTile
 					v-for="movie in movies"
@@ -8,6 +10,13 @@
 					:movie="movie"
 				/>
 			</div>
+
+			<Pagination
+				v-if="totalCount > 0"
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
 		</div>
 
 		<Footer />
@@ -16,27 +25,62 @@
 
 <script>
 import MovieTile from './movie-tile.vue';
+import SearchBar from '../search/bar.vue';
+import Pagination from '../pagination/pagination.vue';
+
+async function fetchMovies() {
+	if (this.$route.query.query) {
+		await this.searchMovies();
+		return;
+	}
 
-async function mounted() {
 	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
-		limit: 30,
+		limit: this.limit,
+		range: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber,
 	});
 
 	this.movies = movies;
 	this.totalCount = totalCount;
 }
 
+async function searchMovies() {
+	const movies = await this.$store.dispatch('searchMovies', {
+		query: this.$route.query.query,
+		limit: this.limit,
+	});
+
+	this.movies = movies;
+	this.totalCount = movies.length;
+}
+
+async function mounted() {
+	this.pageTitle = 'Movies';
+
+	await this.fetchMovies();
+}
+
 export default {
 	components: {
 		MovieTile,
+		SearchBar,
+		Pagination,
 	},
 	data() {
 		return {
 			movies: [],
 			totalCount: 0,
+			limit: 30,
 		};
 	},
+	watch: {
+		$route: fetchMovies,
+	},
 	mounted,
+	methods: {
+		fetchMovies,
+		searchMovies,
+	},
 };
 </script>
 
@@ -49,14 +93,22 @@ export default {
 	flex-grow: 1;
 }
 
+.content-inner {
+	padding: 0 1rem;
+}
+
+.search {
+	margin: 1rem 0;
+}
+
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	padding: 1rem;
+	margin: 0 0 1rem 0;
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	}

assets/components/search/bar.vue

@@ -0,0 +1,85 @@
+<template>
+	<form
+		class="search"
+		@submit.prevent="search"
+	>
+		<input
+			v-model="query"
+			:placeholder="placeholder || 'Search'"
+			class="query"
+			@input="search"
+		>
+
+		<button
+			type="submit"
+			class="search-button"
+		><Icon icon="search" /></button>
+	</form>
+</template>
+
+<script>
+function search() {
+	this.$router.replace({ query: { query: this.query || undefined } });
+}
+
+export default {
+	props: {
+		placeholder: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			query: this.$route.query.query || null,
+		};
+	},
+	methods: {
+		search,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+    display: flex;
+    width: 100%;
+}
+
+.query {
+    max-width: 40rem;
+	min-width: 10rem;
+    color: var(--text);
+    background: var(--background);
+    flex-grow: 1;
+    box-sizing: border-box;
+    padding: 1rem;
+    border: none;
+    box-sizing: border-box;
+    box-shadow: 0 0 3px var(--darken-weak);
+    font-size: 1rem;
+    outline: none;
+
+    &:focus {
+        box-shadow: 0 0 3px var(--primary);
+    }
+}
+
+.search-button {
+    padding: 1rem;
+    background: none;
+    border: none;
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        cursor: pointer;
+
+        .icon {
+            fill: var(--primary);
+        }
+    }
+}
+</style>

assets/components/tags/tags.vue

@@ -132,6 +132,7 @@ async function mounted() {
 			'da-tp',
 			'dv-tp',
 			'tap',
+			'tvp',
 		],
 		misc: [
 			'gaping',

assets/css/_breakpoints.scss

@@ -1,5 +1,6 @@
 $breakpoint-pico: 270px;
 $breakpoint-nano: 320px;
+$breakpoint-mini: 400px;
 $breakpoint-micro: 540px;
 $breakpoint-small: 620px;
 $breakpoint: 720px;

assets/js/fragments.js

@@ -96,6 +96,57 @@ const actorFields = `
 		${actorStashesFields}
 `;
 
+const movieFields = `
+	id
+	title
+	url
+	slug
+	date
+	datePrecision
+	actors {
+		id
+		name
+		slug
+	}
+	tags {
+		id
+		name
+		slug
+	}
+	entity {
+		id
+		name
+		slug
+		type
+		parent {
+			id
+			name
+			slug
+			type
+		}
+	}
+	covers: moviesCovers {
+		media {
+			id
+			path
+			thumbnail
+			lazy
+			width
+			height
+			thumbnailWidth
+			thumbnailHeight
+			isS3
+			sfw: sfwMedia {
+				id
+				path
+				thumbnail
+				lazy
+				comment
+			}
+		}
+	}
+`;
+
 const campaignsFragment = `
 	campaigns(filter: {
 		or: [
@@ -543,6 +594,7 @@ export {
 	actorFields,
 	actorStashesFields,
 	campaignsFragment,
+	movieFields,
 	releaseActorsFragment,
 	releaseFields,
 	releaseTagsFragment,

assets/js/releases/actions.js

@@ -1,5 +1,10 @@
 import { graphql } from '../api';
-import { releasesFragment, releaseFragment, releaseFields } from '../fragments';
+import {
+	releasesFragment,
+	releaseFragment,
+	releaseFields,
+	movieFields,
+} from '../fragments';
 import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
@@ -79,54 +84,7 @@ function initReleasesActions(store, router) {
 					}
 				) {
 					movies: nodes {
-						id
-						title
-						url
-						slug
-						date
-						datePrecision
-						actors {
-							id
-							name
-							slug
-						}
-						tags {
-							id
-							name
-							slug
-						}
-						entity {
-							id
-							name
-							slug
-							type
-							parent {
-								id
-								name
-								slug
-								type
-							}
-						}
-						covers: moviesCovers {
-							media {
-								id
-								path
-								thumbnail
-								lazy
-								width
-								height
-								thumbnailWidth
-								thumbnailHeight
-								isS3
-								sfw: sfwMedia {
-									id
-									path
-									thumbnail
-									lazy
-									comment
-								}
-							}
-						}
+						${movieFields}
 					}
 					totalCount
 				}
@@ -142,6 +100,28 @@ function initReleasesActions(store, router) {
 		};
 	}
 
+	async function searchMovies({ _commit }, { query, limit = 20 }) {
+		const { movies } = await graphql(`
+            query SearchMovies(
+                $query: String!
+                $limit:Int = 20,
+            ) {
+                movies: searchMovies(
+                    query: $query
+					minLength: 1
+                    first: $limit
+                ) {
+					${movieFields}
+                }
+            }
+        `, {
+			query,
+			limit,
+		});
+
+		return movies.map(movie => curateRelease(movie));
+	}
+
 	async function fetchMovieById({ _commit }, movieId) {
 		// const release = await get(`/releases/${releaseId}`);
 
@@ -297,6 +277,7 @@ function initReleasesActions(store, router) {
 		fetchReleaseById,
 		fetchMovies,
 		fetchMovieById,
+		searchMovies,
 	};
 }
 

assets/js/router.js

@@ -176,7 +176,6 @@ const routes = [
 			params: {
 				...from.params,
 				gender: 'all',
-				letter: 'all',
 				tags: 'all',
 				range: 'latest',
 				pageNumber: 1,
@@ -184,7 +183,7 @@ const routes = [
 		}),
 	},
 	{
-		path: '/actors/:gender?/:letter?/:pageNumber',
+		path: '/actors/:gender?/:pageNumber',
 		component: Actors,
 		name: 'actors',
 	},
@@ -196,6 +195,17 @@ const routes = [
 	{
 		path: '/movies',
 		component: Movies,
+		redirect: {
+			name: 'movies',
+			params: {
+				range: 'latest',
+				pageNumber: 1,
+			},
+		},
+	},
+	{
+		path: '/movies/:range/:pageNumber',
+		component: Movies,
 		name: 'movies',
 	},
 	{

migrations/20190325001339_releases.js

@@ -1418,6 +1418,12 @@ exports.up = knex => Promise.resolve()
 				ORDER BY ranks.rank DESC;
 			$$ LANGUAGE SQL STABLE;
 
+			CREATE FUNCTION search_movies(query text, min_length smallint DEFAULT 2) RETURNS SETOF movies AS $$
+				SELECT * FROM movies
+				WHERE length(query) >= min_length
+				AND title ILIKE ('%' || TRIM(query) || '%')
+			$$ LANGUAGE SQL STABLE;
+
 			CREATE FUNCTION search_entities(search text) RETURNS SETOF entities AS $$
 				SELECT * FROM entities
 				WHERE
@@ -1719,8 +1725,10 @@ exports.up = knex => Promise.resolve()
 			COMMENT ON FUNCTION actors_actors IS E'@sortable';
 			COMMENT ON FUNCTION actors_scenes IS E'@sortable';
 			COMMENT ON FUNCTION tags_scenes IS E'@sortable';
+
 			COMMENT ON FUNCTION search_releases IS E'@sortable';
 			COMMENT ON FUNCTION search_actors IS E'@sortable';
+			COMMENT ON FUNCTION search_movies IS E'@sortable';
 			COMMENT ON FUNCTION search_tags IS E'@sortable';
 		`);
 	});

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.197.4",
+    "version": "1.198.1",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.197.4",
+    "version": "1.198.1",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {

seeds/00_tags.js

@@ -390,6 +390,13 @@ const tags = [
 		priority: 7,
 		group: 'penetration',
 	},
+	{
+		name: 'triple vaginal',
+		slug: 'tvp',
+		description: 'Getting fucked in the pussy by *three* cocks at the same time.',
+		priority: 7,
+		group: 'penetration',
+	},
 	{
 		name: 'deepthroat',
 		slug: 'deepthroat',
@@ -1503,6 +1510,11 @@ const aliases = [
 		for: 'dvp',
 		secondary: true,
 	},
+	{
+		name: 'tpp',
+		for: 'tvp',
+		secondary: true,
+	},
 	{
 		name: 'double vaginal (dvp)',
 		for: 'dvp',

seeds/04_media.js

@@ -695,6 +695,7 @@ const tagMedia = [
 	['cum-in-mouth', 2, 'Jaye Summers in "Double The Cum"', 'hardx'],
 	['cum-in-mouth', 'lara_frost_legalporno', 'Lara Frost in NRX059', 'legalporno'],
 	['cum-in-mouth', 0, 'Vina Sky and Avi Love', 'hardx'],
+	['cum-on-boobs', 'september_reign_penthouse', 'September Reign in "Sensual Ride"', 'penthouse'],
 	['cum-on-boobs', 1, 'Kylie Page in "Melt In Your Mouth"', 'twistyshard'],
 	['cum-on-boobs', 0, 'Alessandra Jane', 'private'],
 	['cum-on-boobs', 2, 'Blake Blossom in "Naturally Stacked Cutie"', 'hardx'],
@@ -770,6 +771,7 @@ const tagMedia = [
 	['double-dildo-kiss', 3, 'Kiki Daire and Brittany', 'kenmarcus'],
 	['double-dildo-kiss', 2, 'Adriana Chechik and Vicki Chase in "Anal Savages"', 'julesjordan'],
 	['dp', 3, 'Hime Marie in AA047', 'legalporno'],
+	['dp', 'kenna_james_tushy_1', 'Kenna James in "Yoga Retreat', 'tushy'],
 	['dp', 2, 'Megan Rain in "DP Masters 4"', 'julesjordan'],
 	['dp', 6, 'Kira Noir', 'hardx'],
 	['dp', 'silvia_dellai_dpfanatics', 'Silvia Dellai in "Tempting Promises"', 'dpfanatics'],
@@ -811,20 +813,25 @@ const tagMedia = [
 	['enhanced-boobs', 'jenny_poussin_jennypoussinvip', 'Jenny Poussin in "His Shirt"', 'jennypoussinvip'],
 	['enhanced-boobs', 25, 'Zuleidy', 'private'],
 	['enhanced-boobs', 17, 'Felina in "With Flowers On The Floor"', 'louisdemirabert'],
-	['enhanced-boobs', 1, 'Lela Star in "Thick"', 'julesjordan'],
-	['enhanced-boobs', 'diana_prince_penthouse_2', 'Diana Prince in "It Is What It Seems"', 'penthouse'],
-	['enhanced-boobs', 18, 'Ebony Godess', 'actiongirls'],
 	['enhanced-boobs', 'hunter_bryce_penthouse', 'Hunter Bryce in "On The Bed"', 'penthouse'],
+	['enhanced-boobs', '18a', 'Ebony Godess', 'actiongirls'],
+	['enhanced-boobs', 1, 'Lela Star in "Thick"', 'julesjordan'],
+	['enhanced-boobs', 'september_reign_spizoo', 'September Rain in "September Reign Loves Jessica"', 'spizoo'],
+	['enhanced-boobs', 'sadie_santana_newsensations', 'Sadie Santana in "Backdoor Beauties"', 'newsensations'],
+	['enhanced-boobs', 'diana_prince_penthouse_2', 'Diana Prince in "It Is What It Seems"', 'penthouse'],
+	['enhanced-boobs', 'chessie_kay_chelsey_lanette_eurogirlsongirls', 'Chelsey Lanette and Chessie Kay', 'eurogirlsongirls'],
+	['enhanced-boobs', 'chelsey_lanette_sexart_1', 'Chelsey Lanette in "Tell Me How You Want"', 'sexart'],
 	['enhanced-boobs', 'amy_anderssen_evilangel_1a', 'Amy Anderssen in "Titty Creampies 6"', 'evilangel'],
-	['enhanced-boobs', 'silvia_dellai_pornworld', 'Silvia Dellai in GP1966', 'pornworld'],
-	['enhanced-boobs', 'clanddi_jinkcego_ddfbusty_5', 'Clanddi Jinkcego & Rebecca Jessop', 'ddfbusty'],
 	['enhanced-boobs', 'trudy_photodromm_1', 'Trudy', 'photodromm'],
 	['enhanced-boobs', 'kenzie_anne_playboy', 'Miss Kenzie Anne in "Supercharged"', 'playboy'],
 	['enhanced-boobs', 'kelly_oliveira_teenfidelity', 'Kelly Oliveira in "Keep It Going"', 'teenfidelity'],
 	['enhanced-boobs', 9, 'Putri Cinta', 'watch4beauty'],
+	['enhanced-boobs', 'alexis_zara_wildoncam', 'Alexis Zara', 'wildoncam'],
+	['enhanced-boobs', 'silvia_dellai_pornworld', 'Silvia Dellai in GP1966', 'pornworld'],
 	['enhanced-boobs', 3, 'Ashly Anderson', 'passionhd'],
 	['enhanced-boobs', 'jennifer_mendez_bangbros', 'Jennifer Mendez', 'bangbros'],
 	['enhanced-boobs', 'charlie_atwell_photodromm', 'Charley Atwell', 'photodromm'],
+	['enhanced-boobs', 'clanddi_jinkcego_ddfbusty_5', 'Clanddi Jinkcego & Rebecca Jessop', 'ddfbusty'],
 	['enhanced-boobs', '23d', 'Lulu Sex Bomb in "Tropical Touch"'],
 	['enhanced-boobs', 22, 'Sakura Sena'],
 	['enhanced-boobs', 'mareeva_trudy_photodromm_1', 'Mareeva and Trudy', 'photodromm'],
@@ -936,17 +943,19 @@ const tagMedia = [
 	['piercings', 0, 'Kaegune in "When The Sun Goes Down"', 'suicidegirls'],
 	['piss-drinking', 0, 'Scarlet Domingo in GL227', 'legalporno'],
 	['pussy-eating', 5, 'Claudia Macc and Victoria Pure', 'eurogirlsongirls'],
-	['pussy-eating', 'lilly_evans_jayme_langford_twistys', 'Jayme Langford and Lilly Evans in "The Morning After"', 'twistys'],
 	['pussy-eating', 4, 'Anastasia Knight and Jillian Janson in "Teach Me"', 'screwbox'],
-	['pussy-eating', 'zaawaadi_asia_rae_allblackx', 'Zaawaadi and Asia Rae in "All Black Threesome"', 'allblackx'],
+	['pussy-eating', 'september_reign_penthouse', 'September Reign in "Sensual Ride"', 'penthouse'],
 	['pussy-eating', 'jane_wilde_evilangel', 'Jane Wilde and Brock Cooper in "The Cock Hungry Chronicles"', 'evilangel'],
+	['pussy-eating', 'alexis_zara_tonightsgirlfriend', 'Alexis Zara in "Worships Her Clients Cock"', 'tonightsgirlfriend'],
+	['pussy-eating', 'lilly_evans_jayme_langford_twistys', 'Jayme Langford and Lilly Evans in "The Morning After"', 'twistys'],
+	['pussy-eating', 'zaawaadi_asia_rae_allblackx', 'Zaawaadi and Asia Rae in "All Black Threesome"', 'allblackx'],
+	['pussy-eating', 1, 'Anikka Albrite and Riley Reid', 'inthecrack'],
 	['pussy-eating', 2, 'Anikka Albrite and Mia Malkova in "Big Anal Bombshells"', 'lesbianx'],
+	['pussy-eating', 0, 'Kali Roses and Emily Willis\' pussy in "Peeping On My Neighbor"', 'girlgirl'],
 	['pussy-eating', 8, 'Sia Lust and Lacey London in "Naughty Gamer Girls"', 'girlsgonepink'],
 	['pussy-eating', 7, 'Jewelz Blu and Katie Kush in "Pick Your Pleasure"', 'realitykings'],
 	['pussy-eating', 3, 'Kylie Page and Kalina Ryu in "Training My Masseuse"', 'allgirlmassage'],
 	['pussy-eating', 'azul_hermosa_realitykings_1', 'Azul Hermosa and Van Wylde in "Breakup Sex"', 'realitykings'],
-	['pussy-eating', 0, 'Kali Roses and Emily Willis\' pussy in "Peeping On My Neighbor"', 'girlgirl'],
-	['pussy-eating', 1, 'Anikka Albrite and Riley Reid', 'inthecrack'],
 	['pussy-eating', 6, 'Abella Danger and Karma Rx in "Neon Dreaming"', 'brazzers'],
 	['redhead', 1, 'Lacy Lennon', 'wicked'],
 	['redhead', 0, 'Penny Pax in "The Submission of Emma Marx: Boundaries"', 'newsensations'],
@@ -982,6 +991,7 @@ const tagMedia = [
 	['toy-dp', 0, 'Marley Brinx, Ivy Lebelle and Lyra Law in "Marley Brinx First GGDP"', 'lesbianx'],
 	['toys', 1, 'Chloe Lamour in "Curives In All The Right Places"', 'wetandpuffy'],
 	['toys', 'shawna_lenee_sunrisekings', 'Shawna Lenee', 'sunrisekings'],
+	['tvp', 'september_reign_wefuckblackgirls', 'September Reign in "Second Appearance"', 'wefuckblackgirls'],
 	['trainbang', 'poster', 'Kali Roses in "Passing Me Around"', 'blacked'],
 	['trainbang', 'gina_gerson_assholefever', 'Gina Gerson in "Oppa Gangbang Style"', 'assholefever'],
 	['vr', 0, 'Michelle H', 'metart'],