Added pagination to actor overview. Lazy loading actor avatars. Reduced hash digest length.

assets/components/actors/actor.vue

@@ -81,7 +81,7 @@
 						v-if="actor.dateOfDeath"
 						class="bio-item"
 					>
-						<dfn class="bio-label"><Icon icon="christian-cross" />Date of death</dfn>
+						<dfn class="bio-label"><Icon icon="tombstone" />Date of death</dfn>
 
 						<span class="birthdate">{{ formatDate(actor.dateOfDeath, 'MMMM D, YYYY') }}<span
 							v-if="actor.ageAtDeath"

assets/components/actors/actors.vue

@@ -47,28 +47,47 @@
 			</ul>
 		</nav>
 
-		<div class="tiles">
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="limit"
+		/>
+
+		<div
+			v-lazy-container="{ selector: '.lazy' }"
+			class="tiles"
+		>
 			<Actor
 				v-for="actor in actors"
 				:key="`actor-${actor.id}`"
 				:actor="actor"
 			/>
 		</div>
+
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="limit"
+			class="pagination-top"
+		/>
 	</div>
 </template>
 
 <script>
 import Actor from '../tile/actor.vue';
 import Gender from './gender.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchActors() {
 	const curatedGender = this.gender.replace('trans', 'transsexual');
 
-	this.actors = await this.$store.dispatch('fetchActors', {
-		limit: 1000,
+	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,
 	});
+
+	this.actors = actors;
+	this.totalCount = totalCount;
 }
 
 function letter() {
@@ -93,11 +112,14 @@ export default {
 	components: {
 		Actor,
 		Gender,
+		Pagination,
 	},
 	data() {
 		return {
 			actors: [],
 			pageTitle: null,
+			totalCount: 0,
+			limit: 30,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 		};
 	},

assets/components/pagination/pagination.vue

@@ -1,46 +1,60 @@
 <template>
 	<div class="pagination">
-		<template v-if="pageNumber > 1">
+		<span
+			v-show="pageNumber > 1"
+			class="cursors"
+		>
 			<router-link
-				class="pagination-page"
+				class="pagination-button cursor"
 				:to="{ params: { pageNumber: 1 } }"
-			>&lt;&lt;</router-link>
+			><Icon icon="first2" /></router-link>
 
 			<router-link
-				class="pagination-page"
+				class="pagination-button cursor"
 				:to="{ params: { pageNumber: pageNumber - 1 } }"
-			>&lt;</router-link>
-		</template>
+			><Icon icon="arrow-left" /></router-link>
+		</span>
 
-		<template v-else>
-			<span class="pagination-page disabled">&lt;&lt;</span>
-			<span class="pagination-page disabled">&lt;</span>
-		</template>
+		<span
+			v-show="pageNumber === 1"
+			class="cursors"
+		>
+			<span class="pagination-button cursor disabled"><Icon icon="first2" /></span>
+			<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
+		</span>
 
-		<router-link
-			v-for="pageX in pageCount"
-			:key="`page-${pageX}`"
-			:to="{ params: { pageNumber: pageX } }"
-			:class="{ active: pageX === pageNumber }"
-			class="pagination-page"
-		> {{ pageX }} </router-link>
-
-		<template v-if="pageNumber < pageCount">
+		<span class="pages">
 			<router-link
-				class="pagination-page"
+				v-for="pageX in pageCount"
+				:key="`page-${pageX}`"
+				:to="{ params: { pageNumber: pageX } }"
+				:class="{ active: pageX === pageNumber }"
+				class="pagination-button page"
+			> {{ pageX }} </router-link>
+		</span>
+
+		<span
+			v-show="pageNumber < pageCount"
+			class="cursors"
+		>
+			<router-link
+				class="pagination-button cursor"
 				:to="{ params: { pageNumber: pageNumber + 1 } }"
-			>&gt;</router-link>
+			><Icon icon="arrow-right" /></router-link>
 
 			<router-link
-				class="pagination-page"
+				class="pagination-button cursor"
 				:to="{ params: { pageNumber: pageCount } }"
-			>&gt;&gt;</router-link>
-		</template>
+			><Icon icon="last2" /></router-link>
+		</span>
 
-		<template v-else>
-			<span class="pagination-page disabled">&gt;</span>
-			<span class="pagination-page disabled">&gt;&gt;</span>
-		</template>
+		<span
+			v-show="pageNumber === pageCount"
+			class="cursors"
+		>
+			<span class="pagination-button cursor disabled"><Icon icon="arrow-right" /></span>
+			<span class="pagination-button cursor disabled"><Icon icon="last2" /></span>
+		</span>
 	</div>
 </template>
 
@@ -50,7 +64,9 @@ function pageNumber() {
 }
 
 function pageCount() {
-	return Math.ceil(this.itemsTotal / this.itemsPerPage);
+	const count = Math.max(Math.ceil(this.itemsTotal / this.itemsPerPage), 1);
+
+	return count;
 }
 
 export default {
@@ -78,19 +94,38 @@ export default {
 	justify-content: center;
 }
 
-.pagination-page {
-	width: 2rem;
+.pagination-top {
+	margin: 0 0 1rem 0;
+}
+
+.pagination-bottom {
+	margin: 1rem 0 0 0;
+}
+
+.pagination-button {
+	width: 2.5rem;
 	height: 2rem;
 	display: inline-flex;
+	flex-shrink: 0;
 	align-items: center;
-	margin: 0 .5rem 0 0;
 	justify-content: center;
 	color: var(--shadow);
 	font-weight: bold;
 	text-decoration: none;
 
-	&:hover:not(.active, .disabled) {
+	.icon {
+		width: .8rem;
+		height: .8rem;
+		margin: 0 0 .125rem 0;
+		fill: var(--shadow);
+	}
+
+	&:hover:not(.active):not(.disabled) {
 		color: var(--text);
+
+		.icon {
+			fill: var(--text);
+		}
 	}
 
 	&.active {
@@ -99,14 +134,20 @@ export default {
 
 	&.disabled {
 		color: var(--shadow-weak);
+
+		.icon {
+			fill: var(--shadow-weak);
+		}
 	}
 }
 
-.pagination-top {
-	margin: 0 0 1rem 0;
+.pages,
+.cursors {
+	flex-shrink: 0;
 }
 
-.pagination-bottom{
-	margin: 1rem 0 0 0;
+.cursors {
+	margin: 0 .5rem;
+	font-size: 0;
 }
 </style>

assets/components/releases/release.vue

@@ -99,7 +99,10 @@
 			<h2 class="row title">{{ release.title }}</h2>
 
 			<div class="row associations">
-				<ul class="actors nolist">
+				<ul
+					v-lazy-container="{ selector: '.lazy' }"
+					class="actors nolist"
+				>
 					<li
 						v-for="actor in release.actors"
 						:key="actor.id"

assets/components/tile/actor.vue

@@ -33,13 +33,21 @@
 					icon="users3"
 					class="favicon alias"
 				/>
+
+				<Icon
+					v-if="actor.dateOfDeath"
+					v-tooltip="`Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+					icon="tombstone"
+					class="favicon died"
+				/>
 			</span>
 
 			<div class="avatar-container">
 				<img
 					v-if="actor.avatar"
-					:src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					class="avatar"
+					:data-src="sfw ? `/img/${actor.avatar.sfw.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:data-loading="sfw ? `/img/${actor.avatar.sfw.lazy}` : `/media/${actor.avatar.lazy}`"
+					class="avatar lazy"
 				>
 
 				<span
@@ -57,8 +65,14 @@
 						<Gender :gender="actor.gender" />
 
 						<span
-							v-if="actor.age"
-							v-tooltip="`Born on ${formatDate(actor.birthdate, 'MMMM D, YYYY')}`"
+							v-if="actor.ageAtDeath"
+							v-tooltip="`Born ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}<br>Died ${formatDate(actor.dateOfDeath, 'MMMM D, YYYY')}`"
+							class="age-death"
+						>{{ actor.ageAtDeath }}</span>
+
+						<span
+							v-else-if="actor.age"
+							v-tooltip="`Born on ${formatDate(actor.dateOfBirth, 'MMMM D, YYYY')}`"
 							class="age-now"
 						>{{ actor.age }}</span>
 
@@ -127,7 +141,8 @@ export default {
     position: relative;
     margin: 0 .5rem .5rem 0;
     box-shadow: 0 0 3px var(--darken-weak);
-    background: var(--profile);
+    background: var(--background);
+	overflow: hidden;
 
     &::before {
         content: '';
@@ -144,7 +159,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    color: var(--text-light);
+    color: var(--text);
     text-decoration: none;
 
     &:hover {
@@ -157,6 +172,7 @@ export default {
     align-items: center;
     justify-content: center;
     font-weight: bold;
+	box-shadow: 0 0 3px var(--shadow);
 
 	.name {
 		padding: .5rem;
@@ -174,6 +190,10 @@ export default {
 	&:last-child {
 		padding: .5rem;
 	}
+
+	&.died {
+		fill: var(--lighten);
+	}
 }
 
 .favicon-icon {
@@ -193,6 +213,7 @@ export default {
     flex-grow: 1;
     position: relative;
 	overflow: hidden;
+	background: var(--profile);
 }
 
 .avatar {