Resolve "Forum 3: Zitieren aus Markierung springt Antworten-Formular nicht an"

Closes #5746

Merge request studip/studip!4374

3 files changed, 33 insertions, 13 deletions

diff --git a/resources/assets/stylesheets/scss/forum.scss b/resources/assets/stylesheets/scss/forum.scss
index 5eb0ca7..1062fbc 100644
--- a/resources/assets/stylesheets/scss/forum.scss
+++ b/resources/assets/stylesheets/scss/forum.scss
@@ -954,18 +954,18 @@ $card-max-width: 300px;
         overflow: hidden;
         box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 
-        button {
+        &__button {
             background: none;
             border: none;
             padding: 6px;
             display: flex;
             align-items: center;
             justify-content: center;
-        }
 
-        button:hover {
-            cursor: pointer;
-            background-color: $content-color-10;
+            &:hover {
+                cursor: pointer;
+                background-color: $content-color-10;
+            }
         }
     }
 
diff --git a/resources/vue/apps/forum/discussions/Show.vue b/resources/vue/apps/forum/discussions/Show.vue
index 9343047..1b09a7b 100644
--- a/resources/vue/apps/forum/discussions/Show.vue
+++ b/resources/vue/apps/forum/discussions/Show.vue
@@ -126,7 +126,7 @@ onMounted(async () => {
         if (urlHash === 'new-post') {
             postCreateForm.value = true;
         }
-        document.getElementById(urlHash).scrollIntoView();
+        document.getElementById(urlHash)?.scrollIntoView();
     } else if (props.read_index < posts.value.length) {
         document.querySelectorAll(".post")[props.read_index].scrollIntoView();
     }
@@ -331,4 +331,7 @@ onMounted(async () => {
     position: sticky;
     top: 50px;
 }
+html {
+    scroll-behavior: smooth;
+}
 </style>
diff --git a/resources/vue/components/forum/posts/Post.vue b/resources/vue/components/forum/posts/Post.vue
index 28e70d2..7ac84f7 100644
--- a/resources/vue/components/forum/posts/Post.vue
+++ b/resources/vue/components/forum/posts/Post.vue
@@ -175,16 +175,23 @@ const removePostHighlight = id => {
                     <div class="post__text">
                         <PostContent ref="postContent" v-model="selectedText" :content="post.content" class="forum-quote">
                             <template #actions>
-                                <button
-                                    type="button"
+                                <a
+                                    :href="`#create_form_${post.id}`"
+                                    class="ballon-action__button"
                                     v-if="!postCreateForm && !discussion.closed_at"
                                     @click="postCreateForm = true; postContent.removeSelection()"
                                     :title="$gettext('Auswahl zitieren und antworten')"
                                     :aria-label="$gettext('Auswahl zitieren und antworten')"
                                 >
                                     <StudipIcon shape="quote" :size="20" />
-                                </button>
-                                <button type="button" @click="copyToClipboard" :title="$gettext('Kopieren')" :aria-label="$gettext('Kopieren')">
+                                </a>
+                                <button
+                                    type="button"
+                                    class="ballon-action__button"
+                                    @click="copyToClipboard"
+                                    :title="$gettext('Kopieren')"
+                                    :aria-label="$gettext('Kopieren')"
+                                >
                                     <StudipIcon shape="clipboard" :size="20" />
                                 </button>
                             </template>
@@ -203,9 +210,19 @@ const removePostHighlight = id => {
                     <div class="inline-flex items-center gap-40">
                         <div v-if="!discussion.closed_at" class="inline-flex items-center gap-10">
                             <template v-if="post.author?.id === auth_user.id">
-                                <button :disabled="editPost === post.id" @click="editPost = post.id" type="button" class="button button--icon-only" :title="$gettext('Beitrag bearbeiten')" :aria-label="$gettext('Beitrag bearbeiten')">
+                                <a
+                                    :href="`#post_${post.id}`"
+                                    @click="editPost = post.id"
+                                    type="button"
+                                    class="button button--icon-only"
+                                    :class="{
+                                        'disabled': editPost === post.id
+                                    }"
+                                    :title="$gettext('Beitrag bearbeiten')"
+                                    :aria-label="$gettext('Beitrag bearbeiten')"
+                                >
                                     <StudipIcon shape="edit" :size="20" aria-hidden="true" />
-                                </button>
+                                </a>
                                 <button @click="deletePost(post)" type="button" class="button button--icon-only" :title="$gettext('Beitrag löschen')" :aria-label="$gettext('Beitrag löschen')">
                                     <StudipIcon shape="trash" :size="20" aria-hidden="true" />
                                 </button>
@@ -222,7 +239,7 @@ const removePostHighlight = id => {
             </div>
         </div>
     </div>
-    <div v-if="postCreateForm && !discussion.closed_at" class="post-form-container">
+    <div v-if="postCreateForm && !discussion.closed_at" :id="`create_form_${post.id}`" class="post-form-container" style="scroll-margin-top: 200px;">
         <PostCreateForm
             :parent_id="post.id"
             :discussion_id="props.discussion.discussion_id"