From b3d4344cb7080a3bbd6719b12466e03b0948f9aa Mon Sep 17 00:00:00 2001 From: Thilo Wischmeyer <thwischm@gmail.com> Date: Fri, 17 Sep 2021 16:19:49 +0200 Subject: [PATCH] Fixed scrolling to top on submission change Introducing the two pane layout component broke it. --- frontend/src/components/TwoPaneLayout.vue | 14 +++++++++++++- frontend/src/pages/SubscriptionWorkPage.vue | 10 ++++++++-- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/TwoPaneLayout.vue b/frontend/src/components/TwoPaneLayout.vue index 7d1da6fa..90dc2c6c 100644 --- a/frontend/src/components/TwoPaneLayout.vue +++ b/frontend/src/components/TwoPaneLayout.vue @@ -3,7 +3,10 @@ class="pane-wrapper" no-gutters > - <v-col class="pane"> + <v-col + ref="leftPane" + class="pane" + > <slot name="left" /> </v-col> <v-divider @@ -12,6 +15,7 @@ /> <v-col v-if="showRightPane" + ref="rightPane" class="pane" > <slot name="right" /> @@ -25,6 +29,14 @@ import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class TwoPaneLayout extends Vue { @Prop({ type: Boolean, default: true }) showRightPane!: boolean + + leftPane(): HTMLElement { + return this.$refs.leftPane as HTMLElement + } + + rightPane(): HTMLElement { + return this.$refs.rightPane as HTMLElement + } } </script> diff --git a/frontend/src/pages/SubscriptionWorkPage.vue b/frontend/src/pages/SubscriptionWorkPage.vue index a285f24e..e3f6b154 100644 --- a/frontend/src/pages/SubscriptionWorkPage.vue +++ b/frontend/src/pages/SubscriptionWorkPage.vue @@ -1,5 +1,8 @@ <template> - <two-pane-layout :show-right-pane="showSubmissionType"> + <two-pane-layout + ref="layout" + :show-right-pane="showSubmissionType" + > <template #left> <v-container> <route-change-confirmation :next-route="nextRoute" /> @@ -58,6 +61,9 @@ const onRouteEnterOrUpdate: NavigationGuard = function (to, from, next) { } }) export default class SubscriptionWorkPage extends Vue { + $refs!: { + layout: TwoPaneLayout + } subscriptionActive = false nextRoute = () => {} @@ -112,7 +118,7 @@ export default class SubscriptionWorkPage extends Vue { @Watch('currentAssignment') onCurrentAssignmentChanged() { - window.scrollTo(0, 0) + this.$refs.layout.leftPane().scrollTop = 0 } } </script> -- GitLab