54 lines
1.0 KiB
Vue
54 lines
1.0 KiB
Vue
<template>
|
|
<div
|
|
:data-scrollto="value.id"
|
|
class="survey-block"
|
|
ref="surveyDiv"
|
|
>
|
|
<router-link
|
|
:to="{ name: 'survey', params: { id: value.id } }"
|
|
class="button button--primary"
|
|
>
|
|
Übung anzeigen
|
|
</router-link>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { PAGE_LOAD_TIMEOUT } from '@/consts/navigation.consts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
export interface Props {
|
|
value: {
|
|
id: string;
|
|
};
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const surveyDiv = ref<HTMLElement | null>(null);
|
|
const route = useRoute();
|
|
|
|
onMounted(() => {
|
|
if (surveyDiv.value !== null) {
|
|
if (route.hash === `#${props.value.id}`) {
|
|
setTimeout(() => {
|
|
const rect = surveyDiv.value.getBoundingClientRect();
|
|
|
|
window.scrollTo({
|
|
top: rect.y,
|
|
behavior: 'smooth',
|
|
});
|
|
}, PAGE_LOAD_TIMEOUT);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import '@/styles/_variables.scss';
|
|
|
|
.survey-block {
|
|
margin-bottom: $large-spacing;
|
|
}
|
|
</style>
|