Replaced alphabet index with search bar on actors page.

assets/components/actors/actors.vue

@@ -1,9 +1,13 @@
 <template>
-	<div class="actors">
+	<div
-		<nav
+		ref="content"
-			ref="filter"
+		class="actors"
-			class="filter"
 	>
+		<nav
+			ref="filters"
+			class="filters"
+		>
+			<div class="filters-row">
 				<ul class="genders nolist">
 					<li class="gender">
 						<router-link
@@ -45,23 +49,6 @@
 					</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">
@@ -208,6 +195,9 @@
 						</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 {
+.filters {
-		margin: 1rem 0;
+	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,34 +1,12 @@
 <template>
 	<div class="networks">
-		<form
+		<div class="content-inner">
-			class="search"
+			<SearchBar :placeholder="`Search ${channelCount} channels in ${entities.length} networks`" />
-			@submit.prevent="searchEntities"
-		>
-			<input
-				v-model="query"
-				:placeholder="`Search ${channelCount} channels in ${entities.length} networks`"
-				class="query"
-				@input="searchEntities"
-			>
 
-			<button
+			<span
-				type="submit"
+				v-if="done && entities.length === 0"
-				class="search-button"
+				class="empty"
-			><Icon icon="search" /></button>
+			>No results for "{{ $route.query.query }}"</span>
-		</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
@@ -40,6 +18,7 @@
 					:entity="entity"
 				/>
 			</div>
+		</div>
 
 		<Footer />
 	</div>
@@ -47,21 +26,39 @@
 
 <script>
 import Entity from '../entities/tile.vue';
+import SearchBar from '../search/bar.vue';
 
-async function searchEntities() {
+async function fetchEntities() {
-	this.searchResults = await this.$store.dispatch('searchEntities', {
+	if (this.$route.query.query) {
-		query: this.query,
+		await this.searchEntities();
-		limit: 50,
+		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,6 +95,12 @@ export default {
 @import 'theme';
 
 .networks {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
 	padding: 0 1rem;
 }
 
@@ -112,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/movies.vue

@@ -1,10 +1,7 @@
 <template>
 	<div class="movies">
 		<div class="content-inner">
-			<Search
+			<SearchBar :placeholder="`Search ${totalCount} movies`" />
-				:search="searchMovies"
-				:placeholder="`Search ${totalCount} movies`"
-			/>
 
 			<div class="tiles">
 				<MovieTile
@@ -28,7 +25,7 @@
 
 <script>
 import MovieTile from './movie-tile.vue';
-import Search from '../search/bar.vue';
+import SearchBar from '../search/bar.vue';
 import Pagination from '../pagination/pagination.vue';
 
 async function fetchMovies() {
@@ -66,7 +63,7 @@ async function mounted() {
 export default {
 	components: {
 		MovieTile,
-		Search,
+		SearchBar,
 		Pagination,
 	},
 	data() {

assets/components/search/bar.vue

@@ -44,10 +44,11 @@ export default {
 .search {
     display: flex;
     width: 100%;
-    max-width: 40rem;
 }
 
 .query {
+    max-width: 40rem;
+	min-width: 10rem;
     color: var(--text);
     background: var(--background);
     flex-grow: 1;

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/releases/actions.js

@@ -1,5 +1,10 @@
 import { graphql } from '../api';
-import { releasesFragment, releaseFragment, releaseFields, movieFields } from '../fragments';
+import {
+	releasesFragment,
+	releaseFragment,
+	releaseFields,
+	movieFields,
+} from '../fragments';
 import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 

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',
 	},