feat(frontend): UI vragen & antwoorden verbeterd.

frontend/src/views/discussions/SingleDiscussion.vue

@@ -15,6 +15,9 @@
     import type { QuestionDTO } from "@dwengo-1/common/interfaces/question";
     import DiscussionsSideBar from "@/components/DiscussionsSideBar.vue";
     import QuestionBox from "@/components/QuestionBox.vue";
+    import { useI18n } from "vue-i18n";
+
+    const { t } = useI18n();
 
     const route = useRoute();
 
@@ -120,21 +123,29 @@
 
 <template>
     <DiscussionsSideBar></DiscussionsSideBar>
-    <QuestionBox
-        :hruid="props.hruid"
-        :language="props.language"
-        :learningObjectHruid="props.learningObjectHruid"
-        :forGroup="forGroup"
-    />
-    <using-query-result
-        :query-result="getQuestionsQuery"
-        v-slot="questionsResponse: { data: QuestionsResponse }"
-    >
-        <QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
-    </using-query-result>
+    <div class="discussions-container">
+        <QuestionBox
+            :hruid="props.hruid"
+            :language="props.language"
+            :learningObjectHruid="props.learningObjectHruid"
+            :forGroup="forGroup"
+            withTitle
+        />
+        <h3>{{ t("questionsCapitalized") }}:</h3>
+        <using-query-result
+            :query-result="getQuestionsQuery"
+            v-slot="questionsResponse: { data: QuestionsResponse }"
+        >
+            <QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
+        </using-query-result>
+    </div>
 </template>
 
 <style scoped>
+    .discussions-container {
+        margin: 20px;
+    }
+
     .learning-path-title {
         white-space: normal;
     }

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -308,12 +308,6 @@
                 v-if="currentNode"
             ></learning-object-view>
         </div>
-        <QuestionBox
-            :hruid="props.hruid"
-            :language="props.language"
-            :learningObjectHruid="props.learningObjectHruid"
-            :forGroup="forGroup"
-        />
         <div class="navigation-buttons-container">
             <v-btn
                 prepend-icon="mdi-chevron-left"
@@ -333,6 +327,7 @@
             </v-btn>
         </div>
         <using-query-result
+            v-if="forGroup"
             :query-result="getQuestionsQuery"
             v-slot="questionsResponse: { data: QuestionsResponse }"
         >
@@ -346,7 +341,12 @@
                     </router-link>
                 </span>
             </div>
-
+            <QuestionBox
+                :hruid="props.hruid"
+                :language="props.language"
+                :learningObjectHruid="props.learningObjectHruid"
+                :forGroup="forGroup"
+            />
             <QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
         </using-query-result>
     </using-query-result>