Browse Source

refactor: made scrollIntoView not jump vertically

Kristian Vos 3 years ago
parent
commit
a8aaec5e90

+ 3 - 1
frontend/src/components/modals/EditPlaylist/index.vue

@@ -585,7 +585,9 @@ export default {
 		},
 		...mapActions({
 			showTab(dispatch, payload) {
-				this.$refs[`${payload}-tab`].scrollIntoView();
+				this.$refs[`${payload}-tab`].scrollIntoView({
+					block: "nearest"
+				});
 				return dispatch("modals/editPlaylist/showTab", payload);
 			}
 		}),

+ 1 - 1
frontend/src/components/modals/EditSong/Tabs/Reports.vue

@@ -279,7 +279,7 @@ export default {
 	},
 	methods: {
 		showTab(tab) {
-			this.$refs[`${tab}-tab`].scrollIntoView();
+			this.$refs[`${tab}-tab`].scrollIntoView({ block: "nearest" });
 			this.tab = tab;
 		},
 		resolve(reportId) {

+ 3 - 1
frontend/src/components/modals/EditSong/index.vue

@@ -1566,7 +1566,9 @@ export default {
 		]),
 		...mapActions({
 			showTab(dispatch, payload) {
-				this.$refs[`${payload}-tab`].scrollIntoView();
+				this.$refs[`${payload}-tab`].scrollIntoView({
+					block: "nearest"
+				});
 				return dispatch("modals/editSong/showTab", payload);
 			}
 		}),

+ 1 - 1
frontend/src/components/modals/ManageStation/Tabs/Playlists.vue

@@ -740,7 +740,7 @@ export default {
 			);
 		},
 		showTab(tab) {
-			this.$refs[`${tab}-tab`].scrollIntoView();
+			this.$refs[`${tab}-tab`].scrollIntoView({ block: "nearest" });
 			this.tab = tab;
 		},
 		isOwner() {

+ 3 - 1
frontend/src/components/modals/ManageStation/index.vue

@@ -644,7 +644,9 @@ export default {
 		...mapActions({
 			showTab(dispatch, payload) {
 				if (this.$refs[`${payload}-tab`])
-					this.$refs[`${payload}-tab`].scrollIntoView(); // Only works if the ref exists, which it doesn't always
+					this.$refs[`${payload}-tab`].scrollIntoView({
+						block: "nearest"
+					}); // Only works if the ref exists, which it doesn't always
 				return dispatch("modals/manageStation/showTab", payload);
 			}
 		}),

+ 2 - 1
frontend/src/pages/Admin/index.vue

@@ -218,7 +218,8 @@ export default {
 		showTab(tab) {
 			if (this.$refs[`${tab}-tab`])
 				this.$refs[`${tab}-tab`].scrollIntoView({
-					inline: "center"
+					inline: "center",
+					block: "nearest"
 				});
 			this.currentTab = tab;
 		}