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

assets/js/curate.js

@@ -57,6 +57,10 @@ function curateActor(actor, release, curateActorRelease) {
 		curatedActor.releases = actor.releases.map(actorRelease => curateActorRelease(actorRelease.release));
 	}
 
+	if (actor.aliasFor) {
+		curatedActor.aliasFor = curateActor(curatedActor.aliasFor);
+	}
+
 	return curatedActor;
 }
 

assets/js/networks/actions.js

@@ -12,7 +12,7 @@ function initNetworksActions(store, _router) {
 	}) {
 		const { before, after, orderBy } = getDateRange(range);
 
-		const { network, releases } = await graphql(`
+		const { network, connection: { releases, totalCount } } = await graphql(`
             query Network(
                 $networkSlug: String!
                 $limit:Int = 10,
@@ -71,47 +71,50 @@ function initNetworksActions(store, _router) {
                         url
                     }
                 }
-                releases(
-                    first: $limit
+				connection: releasesConnection(
+					first: $limit
 					offset: $offset
-                    orderBy: $orderBy
-                    filter: {
-                        site: {
-                            or: [
-                                { network: { slug: { equalTo: $networkSlug } } },
-                                { network: { parent: { slug: { equalTo: $networkSlug } } } }
-                            ]
-                        }
-                        or: [
-                            {
-                                date: {
-                                    lessThan: $before,
-                                    greaterThan: $after
-                                }
-                            },
-                            {
-                                date: {
-                                    isNull: true
-                                },
-                                createdAt: {
-                                    lessThan: $beforeTime,
-                                    greaterThan: $afterTime,
-                                }
-                            }
-                        ]
-                        releasesTagsConnection: {
-                            none: {
-                                tag: {
-                                    slug: {
-                                        in: $exclude
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ) {
-                    ${releaseFields}
-                }
+					orderBy: $orderBy
+					filter: {
+						site: {
+							or: [
+								{ network: { slug: { equalTo: $networkSlug } } },
+								{ network: { parent: { slug: { equalTo: $networkSlug } } } }
+							]
+						}
+						or: [
+							{
+								date: {
+									lessThan: $before,
+									greaterThan: $after
+								}
+							},
+							{
+								date: {
+									isNull: true
+								},
+								createdAt: {
+									lessThan: $beforeTime,
+									greaterThan: $afterTime,
+								}
+							}
+						]
+						releasesTagsConnection: {
+							none: {
+								tag: {
+									slug: {
+										in: $exclude
+									}
+								}
+							}
+						}
+					}
+				) {
+					releases: nodes {
+						${releaseFields}
+					}
+					totalCount
+				}
             }
         `, {
 			networkSlug,
@@ -125,7 +128,10 @@ function initNetworksActions(store, _router) {
 			exclude: store.state.ui.filter,
 		});
 
-		return curateNetwork(network, releases);
+		return {
+			network: curateNetwork(network, releases),
+			totalCount,
+		};
 	}
 
 	async function fetchNetworks({ _commit }) {

assets/js/router.js

@@ -101,11 +101,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
+				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/network/:networkSlug/:range',
+		path: '/network/:networkSlug/:range/:pageNumber?',
 		component: Network,
 		name: 'networkRange',
 	},

assets/js/ui/actions.js

@@ -92,14 +92,18 @@ function initUiActions(_store, _router) {
                     name
                     slug
                     age
+					ageAtDeath
                     dateOfBirth
+                    dateOfDeath
                     gender
 					aliasFor: actorByAliasFor {
 						id
 						name
 						slug
 						age
+						ageAtDeath
 						dateOfBirth
+						dateOfDeath
 						gender
 						network {
 							id