Enabled pagination on network page.

assets/components/header/filters.vue

@@ -100,6 +100,7 @@ export default {
 	}
 
 	.name {
+		flex-grow: 1;
 		padding: .5rem;
 		color: var(--text);
 		text-decoration: none;

assets/components/networks/network.vue

@@ -3,8 +3,6 @@
 		v-if="network"
 		class="content"
 	>
-		<FilterBar :fetch-releases="fetchNetwork" />
-
 		<div
 			class="network"
 			:class="{ nosites: sites.length === 0 && networks.length === 0 }"
@@ -89,6 +87,12 @@
 			</div>
 
 			<div class="content-inner">
+				<FilterBar
+					:fetch-releases="fetchNetwork"
+					:items-total="totalCount"
+					:items-per-page="10"
+				/>
+
 				<template v-if="sites.length > 0 || networks.length > 0">
 					<span
 						v-show="expanded"
@@ -128,11 +132,16 @@ import Sites from '../sites/sites.vue';
 import Network from '../tile/network.vue';
 
 async function fetchNetwork() {
-	this.network = await this.$store.dispatch('fetchNetworkBySlug', {
+	const { network, totalCount } = await this.$store.dispatch('fetchNetworkBySlug', {
 		networkSlug: this.$route.params.networkSlug,
+		limit: this.limit,
 		range: this.$route.params.range,
+		pageNumber: Number(this.$route.params.pageNumber),
 	});
 
+	this.network = network;
+	this.totalCount = totalCount;
+
 	if (this.network.studios) {
 		this.studios = this.network.studios.map(studio => ({
 			...studio,
@@ -170,6 +179,8 @@ export default {
 			networks: [],
 			studios: [],
 			releases: [],
+			totalCount: null,
+			limit: 10,
 			pageTitle: null,
 			expanded: false,
 		};

assets/components/search/search.vue

@@ -12,6 +12,7 @@
 
 		<div
 			v-if="!loading && actors.length > 0"
+			v-lazy-container="{ selector: '.lazy' }"
 			class="tiles"
 		>
 			<Actor
@@ -95,7 +96,7 @@ export default {
 .summary {
     display: block;
     margin: 0 0 1rem 0;
-    color: $shadow;
+    color: var(--shadow);
     font-weight: bold;
 }
 

assets/components/tags/tags.vue

@@ -67,7 +67,7 @@ async function mounted() {
 			'blowbang',
 			'pussy-eating',
 			'ass-eating',
-			'ass-to-mouth',
+			'atm',
 		],
 		extreme: [
 			'airtight',

assets/components/tile/actor.vue

@@ -29,7 +29,7 @@
 
 				<Icon
 					v-if="alias"
-					v-tooltip="`Alias for ${alias.name}`"
+					v-tooltip="`Alias of ${alias.name}`"
 					icon="users3"
 					class="favicon alias"
 				/>
@@ -179,7 +179,7 @@ export default {
 	}
 
 	.alias {
-		fill: var(--highlight);
+		fill: var(--shadow);
 	}
 }
 
@@ -192,7 +192,7 @@ export default {
 	}
 
 	&.died {
-		fill: var(--lighten);
+		fill: var(--shadow);
 	}
 }
 
@@ -271,6 +271,11 @@ export default {
     margin: 0 0 0 .5rem;
 }
 
+.age-now,
+.age-death {
+	margin: 0 .25rem 0 0;
+}
+
 .age-then {
     color: var(--lighten);
 }