Fixed scroll to top.

assets/components/actors/actor.vue

@@ -408,7 +408,7 @@ export default {
 			actor: null,
 			releases: null,
 			totalCount: 0,
-			limit: 15,
+			limit: 20,
 			pageTitle: null,
 			bioExpanded: false,
 			photosExpanded: false,

assets/components/actors/actors.vue

@@ -59,6 +59,7 @@
 		</nav>
 
 		<Pagination
+			ref="pagination"
 			:items-total="totalCount"
 			:items-per-page="limit"
 		/>
@@ -99,6 +100,8 @@ async function fetchActors() {
 
 	this.actors = actors;
 	this.totalCount = totalCount;
+
+	this.$refs.pagination.$el.scrollIntoView();
 }
 
 function letter() {
@@ -130,7 +133,7 @@ export default {
 			actors: [],
 			pageTitle: null,
 			totalCount: 0,
-			limit: 30,
+			limit: 50,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 		};
 	},

assets/components/container/container.vue

@@ -20,8 +20,11 @@
 			@show-filters="(state) => toggleFilters(state)"
 		/>
 
-		<div class="content">
-			<router-view />
+		<div
+			ref="content"
+			class="content"
+		>
+			<router-view @scroll="scrollToTop" />
 		</div>
 
 		<Filters
@@ -68,6 +71,10 @@ function resize(event) {
 	this.events.emit('resize', event);
 }
 
+function scrollToTop() {
+	this.$refs.content.scrollTop = 0;
+}
+
 function mounted() {
 	document.addEventListener('click', this.blur);
 	window.addEventListener('resize', this.resize);
@@ -100,6 +107,7 @@ export default {
 		setConsent,
 		blur,
 		resize,
+		scrollToTop,
 	},
 };
 </script>

assets/components/entities/entity.vue

@@ -75,10 +75,7 @@
 			</router-link>
 		</div>
 
-		<div
-			ref="content"
-			class="content-inner"
-		>
+		<div class="content-inner">
 			<Scroll
 				v-if="entity.children.length > 0"
 				v-slot="scroll"
@@ -94,6 +91,7 @@
 			</Scroll>
 
 			<FilterBar
+				ref="filter"
 				:fetch-releases="fetchEntity"
 				:items-total="totalCount"
 				:items-per-page="limit"
@@ -115,8 +113,6 @@
 </template>
 
 <script>
-import { nextTick } from 'vue';
-
 import FilterBar from '../filters/filter-bar.vue';
 import Pagination from '../pagination/pagination.vue';
 import Releases from '../releases/releases.vue';
@@ -137,9 +133,7 @@ async function fetchEntity() {
 
 	this.pageTitle = entity.name;
 
-	nextTick(() => {
-		this.$refs.content.scrollTop = 0;
-	});
+	this.$refs.filter.$el.scrollIntoView();
 }
 
 async function mounted() {

assets/components/home/home.vue

@@ -1,10 +1,8 @@
 <template>
 	<div class="home">
-		<div
-			ref="content"
-			class="content-inner"
-		>
+		<div class="content-inner">
 			<FilterBar
+				ref="filter"
 				:fetch-releases="fetchReleases"
 				:is-home="true"
 				:items-total="totalCount"
@@ -41,7 +39,7 @@ async function fetchReleases() {
 	this.totalCount = totalCount;
 	this.releases = releases;
 
-	this.$refs.content.scrollTop = 0;
+	this.$refs.filter.$el.scrollIntoView();
 }
 
 async function mounted() {
@@ -61,7 +59,7 @@ export default {
 			releases: [],
 			networks: [],
 			pageTitle: null,
-			limit: 20,
+			limit: 30,
 			totalCount: 0,
 			from: null,
 		};

assets/components/releases/media.vue

@@ -170,6 +170,7 @@ export default {
 		grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 		grid-gap: 1rem;
 		justify-content: center;
+		padding: 1rem;
 		margin: 0 0 1rem 0;
 	}
 }
@@ -250,7 +251,7 @@ export default {
 }
 
 .trailer-container {
-	max-height: 18rem;
+	height: 18rem;
 	width: 32rem;
     max-width: 100%;
 }

assets/components/scroll/scroll.vue

@@ -210,17 +210,21 @@ export default {
 	padding: 1rem .5rem 1rem 2rem;
 }
 
-.scroll-light .expand-dark {
+.scroll .expand-light {
 	display: none;
 }
 
+.scroll-light {
+	.expand-light {
+		display: block;
+	}
+
+	.expand-dark {
+		display: none;
+	}
+}
+
 .scroll-dark .expand-light {
 	display: none;
 }
-
-@media(max-width: $breakpoint) {
-	.scroll-button {
-		display: none;
-	}
-}
 </style>

assets/components/tags/tag.vue

@@ -31,7 +31,11 @@
 				/>
 			</Scroll>
 
-			<FilterBar :fetch-releases="fetchReleases" />
+			<FilterBar
+				ref="filter"
+				:fetch-releases="fetchReleases"
+			/>
+
 			<Releases :releases="releases" />
 
 			<Pagination
@@ -73,6 +77,8 @@ async function fetchReleases() {
 
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
+
+	this.$refs.filter.$el.scrollIntoView();
 }
 
 async function mounted() {
@@ -94,7 +100,7 @@ export default {
 			description: null,
 			releases: null,
 			totalCount: 0,
-			limit: 15,
+			limit: 20,
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,