Added footer and basic stats page.

assets/components/actors/actor.vue

@@ -307,6 +307,8 @@
 					class="pagination-top"
 				/>
 			</div>
+
+			<Footer />
 		</div>
 	</div>
 </template>

assets/components/actors/actors.vue

@@ -80,6 +80,8 @@
 			:items-per-page="limit"
 			class="pagination-top"
 		/>
+
+		<Footer />
 	</div>
 </template>
 

assets/components/entities/entity.vue

@@ -106,6 +106,8 @@
 					class="pagination-top"
 				/>
 			</div>
+
+			<Footer />
 		</div>
 	</div>
 </template>

assets/components/footer/footer.vue

@@ -0,0 +1,34 @@
+<template>
+	<footer class="footer">
+		<span class="segment">© traxxx</span>
+
+		<router-link
+			:to="{ name: 'stats' }"
+			class="segment footer-link nolink"
+		>stats</router-link>
+	</footer>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+	margin: 2rem 0 0 0;
+	background: var(--background);
+	color: var(--shadow);
+	box-shadow: inset 0 1px 3px var(--darken-hint);
+	font-size: .8rem;
+	font-weight: bold;
+	text-align: center;
+}
+
+.segment {
+	padding: .5rem;
+
+	&:not(:last-child) {
+		border-right: solid 1px var(--shadow-hint);
+	}
+}
+
+.footer-link {
+	text-decoration: underline;
+}
+</style>

assets/components/home/home.vue

@@ -20,6 +20,8 @@
 				:items-per-page="limit"
 				class="pagination-bottom"
 			/>
+
+			<Footer />
 		</div>
 	</div>
 </template>

assets/components/networks/networks.vue

@@ -40,6 +40,8 @@
 				:entity="entity"
 			/>
 		</div>
+
+		<Footer />
 	</div>
 </template>
 

assets/components/releases/movies.vue

@@ -1,12 +1,16 @@
 <template>
 	<div class="movies">
-		<div class="tiles">
-			<MovieTile
-				v-for="movie in movies"
-				:key="`movie-${movie.id}`"
-				:movie="movie"
-			/>
+		<div class="content-inner">
+			<div class="tiles">
+				<MovieTile
+					v-for="movie in movies"
+					:key="`movie-${movie.id}`"
+					:movie="movie"
+				/>
+			</div>
 		</div>
+
+		<Footer />
 	</div>
 </template>
 
@@ -40,7 +44,9 @@ export default {
 @import 'breakpoints';
 
 .movies {
-    padding: 1rem;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
 }
 
 .tiles {

assets/components/stats/stats.vue

@@ -0,0 +1,95 @@
+<template>
+	<div class="stats">
+		<div class="content-inner">
+			<h1 class="heading">Stats</h1>
+
+			<dl class="stat-table">
+				<div class="stat-row">
+					<dt class="stat-label">Networks</dt>
+					<dd class="stat-value">{{ totalNetworks }}</dd>
+				</div>
+
+				<div class="stat-row">
+					<dt class="stat-label">Channels</dt>
+					<dd class="stat-value">{{ totalChannels }}</dd>
+				</div>
+
+				<div class="stat-row">
+					<dt class="stat-label">Scenes</dt>
+					<dd class="stat-value">{{ totalScenes }}</dd>
+				</div>
+
+				<div class="stat-row">
+					<dt class="stat-label">Movies</dt>
+					<dd class="stat-value">{{ totalMovies }}</dd>
+				</div>
+
+				<div class="stat-row">
+					<dt class="stat-label">Actors</dt>
+					<dd class="stat-value">{{ totalActors }}</dd>
+				</div>
+			</dl>
+		</div>
+
+		<Footer />
+	</div>
+</template>
+
+<script>
+async function mounted() {
+	const stats = await this.$store.dispatch('fetchStats');
+
+	this.totalScenes = stats.totalScenes;
+	this.totalMovies = stats.totalMovies;
+	this.totalActors = stats.totalActors;
+	this.totalNetworks = stats.totalNetworks;
+	this.totalChannels = stats.totalChannels;
+}
+
+export default {
+	data() {
+		return {
+			totalScenes: 0,
+			totalMovies: 0,
+			totalActors: 0,
+			totalNetworks: 0,
+			totalChannels: 0,
+		};
+	},
+	mounted,
+};
+</script>
+
+<style lang="scss" scoped>
+.stats {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
+	padding: 1rem;
+}
+
+.stat-row {
+	width: 20rem;
+	max-width: 100%;
+	display: flex;
+	padding: .5rem 0;
+	justify-content: space-between;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stat-label {
+	display: inline-block;
+	font-weight: bold;
+	color: var(--shadow-strong);
+}
+
+.stat-value {
+	display: inline-block;
+}
+</style>

assets/components/tags/tag.vue

@@ -31,6 +31,8 @@
 
 			<FilterBar :fetch-releases="fetchReleases" />
 			<Releases :releases="tag.releases" />
+
+			<Footer />
 		</div>
 	</div>
 </template>

assets/components/tags/tags.vue

@@ -20,6 +20,8 @@
 				/>
 			</div>
 		</div>
+
+		<Footer />
 	</div>
 </template>
 
@@ -146,7 +148,7 @@ export default {
 @import 'theme';
 
 .tags {
-    padding: 1rem;
+    padding: 1rem 1rem 0 1rem;
 }
 
 .tiles {