Showing scene and channel count on entity page and tile.

assets/components/entities/entity.vue

@@ -51,7 +51,7 @@
 				>{{ tag.name }}</li>
 			</ul>
 
-			<router-link
+			<RouterLink
 				v-if="entity.parent"
 				:to="`/${entity.parent.type}/${entity.parent.slug}`"
 				class="link link-parent"
@@ -74,7 +74,7 @@
 				>{{ entity.parent.name }}</h3>
 
 				<Icon icon="device_hub" />
-			</router-link>
+			</RouterLink>
 		</div>
 
 		<div

assets/components/entities/tile.vue

@@ -4,39 +4,48 @@
 		:title="entity.name"
 		class="tile"
 	>
-		<template v-if="entity.hasLogo">
-			<img
-				v-if="entity.type === 'network' || entity.independent"
-				:src="`/img/logos/${entity.slug}/thumbs/network.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
+		<div class="tile-logo">
+			<template v-if="entity.hasLogo">
+				<img
+					v-if="entity.type === 'network' || entity.independent"
+					:src="`/img/logos/${entity.slug}/thumbs/network.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
-				v-else-if="entity.parent"
-				:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
+				<img
+					v-else-if="entity.parent"
+					:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
 
-			<img
+				<img
+					v-else
+					:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
+					:alt="entity.name"
+					loading="lazy"
+					class="logo"
+					@load="$emit('load', $event)"
+				>
+			</template>
+
+			<span
 				v-else
-				:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
-				:alt="entity.name"
-				loading="lazy"
-				class="logo"
-				@load="$emit('load', $event)"
-			>
-		</template>
+				class="name"
+			>{{ entity.name }}</span>
+		</div>
 
 		<span
-			v-else
-			class="name"
-		>{{ entity.name }}</span>
+			class="count"
+		>
+			<span>{{ entity.sceneTotal }} scenes</span>
+			<span v-if="entity.type === 'network'">{{ entity.childrenTotal }} channels</span>
+		</span>
 	</router-link>
 </template>
 
@@ -59,15 +68,27 @@ export default {
     height: 100%;
     background: var(--tile);
     display: flex;
+	flex-direction: column;
     flex-shrink: 0;
 	justify-content: center;
     align-items: center;
     box-sizing: border-box;
-    padding: .5rem 1rem;
     border-radius: .25rem;
+	position: relative;
     box-shadow: 0 0 3px rgba(0, 0, 0, .25);
     text-align: center;
     text-decoration: none;
+
+	&:hover .count {
+		color: var(--lighten);
+	}
+}
+
+.tile-logo {
+	display: flex;
+	flex-grow: 1;
+    padding: .5rem 1rem;
+	overflow: hidden;
 }
 
 .logo {
@@ -75,6 +96,7 @@ export default {
 	max-height: 100%;
     display: flex;
     align-items: center;
+	align-self: center;
 }
 
 .name {
@@ -82,4 +104,16 @@ export default {
     font-size: 1.25rem;
     font-weight: bold;
 }
+
+.count {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	box-sizing: border-box;
+	padding: .25rem .5rem;
+	border-top: solid 1px var(--lighten-hint);
+	color: var(--lighten-weak);
+	text-align: center;
+	font-size: .8rem;
+}
 </style>

assets/components/filters/filter-bar.vue

@@ -1,15 +1,20 @@
 <template>
 	<div class="filter-bar noselect">
 		<div class="sort">
-			<router-link
+			<RouterLink
 				v-for="section in ranges"
 				:key="section"
 				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
 				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>{{ section }}</router-link>
+			>{{ section }}</RouterLink>
 		</div>
 
+		<span
+			v-if="itemsTotal && showTotal"
+			class="total"
+		>{{ itemsTotal }} <template v-if="itemsTotal === 1">scene</template><template v-else>scenes</template></span>
+
 		<div class="filters">
 			<ActorFilter
 				class="filters-filter"
@@ -78,6 +83,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		showTotal: {
+			type: Boolean,
+			default: true,
+		},
 		itemsTotal: {
 			type: Number,
 			default: 0,
@@ -240,6 +249,10 @@ export default {
 	.filters-filter:last-child .filter {
 		padding: .5rem 0 .5rem .5rem;
 	}
+
+	.total {
+		display: none;
+	}
 }
 </style>
 
@@ -351,4 +364,11 @@ export default {
 		margin: 0 1rem 0 0;
 	}
 }
+
+.total {
+	flex-shrink: 0;
+	padding: 0 1rem;
+	color: var(--shadow);
+	font-size: .8rem;
+}
 </style>

assets/components/home/home.vue

@@ -8,6 +8,7 @@
 				:items-total="totalCount"
 				:items-per-page="limit"
 				:content="$refs.content"
+				:show-total="false"
 			/>
 
 			<Releases

assets/components/releases/scene-tile.vue

@@ -113,21 +113,22 @@
 							:key="actor.id"
 							class="actor"
 						>
-							<router-link
+							<RouterLink
 								:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
+								:class="{ [actor.gender]: !!actor.gender }"
 								class="actor-link"
-							>{{ actor.name }}</router-link>
+							>{{ actor.name }}</RouterLink>
 						</li>
 					</ul>
 				</span>
 
 				<div class="labels">
-					<router-link
+					<RouterLink
 						v-if="release.shootId && release.studio"
 						:to="`/studio/${release.studio.slug}`"
 						:title="release.studio && release.studio.name"
 						class="shoot nolink"
-					>{{ release.shootId }}</router-link>
+					>{{ release.shootId }}</RouterLink>
 
 					<span
 						v-else-if="release.shootId"
@@ -145,10 +146,10 @@
 							:key="`tag-${tag.slug}`"
 							class="tag"
 						>
-							<router-link
+							<RouterLink
 								:to="`/tag/${tag.slug}`"
 								class="tag-link"
-							>{{ tag.name }}</router-link>
+							>{{ tag.name }}</RouterLink>
 						</li>
 					</ul>
 				</div>