From 7e45049e9468c9ad287797ee60fc7e2eda2302ad Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Wed, 1 Apr 2026 08:06:06 +0200
Subject: [PATCH] refactor(VocabLessonView): combine lesson description and
 learning goals into a single component

- Merged the lesson description and learning goals sections into a unified block for improved layout and readability.
- Updated styles to enhance the visual presentation of the combined content, ensuring a more cohesive user experience.
---
 frontend/src/views/social/VocabLessonView.vue | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/social/VocabLessonView.vue b/frontend/src/views/social/VocabLessonView.vue
index d6787df..0cb8faf 100644
--- a/frontend/src/views/social/VocabLessonView.vue
+++ b/frontend/src/views/social/VocabLessonView.vue
@@ -76,16 +76,20 @@
         </div>
 
         <div class="learn-grid">
-          <div v-if="lesson && lesson.description" class="lesson-description-box">
-            <h4>{{ $t('socialnetwork.vocab.courses.lessonDescription') }}</h4>
-            <p>{{ lesson.description }}</p>
-          </div>
-
-          <div v-if="lessonDidactics.learningGoals.length > 0" class="didactic-card">
-            <h4>{{ $t('socialnetwork.vocab.courses.learningGoals') }}</h4>
-            <ul class="didactic-list">
-              <li v-for="(goal, index) in lessonDidactics.learningGoals" :key="'goal-' + index">{{ goal }}</li>
-            </ul>
+          <div
+            v-if="(lesson && lesson.description) || lessonDidactics.learningGoals.length > 0"
+            class="didactic-card lesson-intro-combined"
+          >
+            <div v-if="lesson && lesson.description" class="lesson-intro-block">
+              <h4>{{ $t('socialnetwork.vocab.courses.lessonDescription') }}</h4>
+              <p>{{ lesson.description }}</p>
+            </div>
+            <div v-if="lessonDidactics.learningGoals.length > 0" class="lesson-intro-block">
+              <h4>{{ $t('socialnetwork.vocab.courses.learningGoals') }}</h4>
+              <ul class="didactic-list">
+                <li v-for="(goal, index) in lessonDidactics.learningGoals" :key="'goal-' + index">{{ goal }}</li>
+              </ul>
+            </div>
           </div>
 
           <div v-if="lessonDidactics.corePatterns.length > 0" class="didactic-card">
@@ -2282,7 +2286,6 @@ export default {
 }
 
 .didactic-card,
-.lesson-description-box,
 .cultural-notes {
   padding: 18px;
   background: #f8f9fa;
@@ -2290,6 +2293,20 @@ export default {
   border: 1px solid #e7e7e7;
 }
 
+.lesson-intro-combined {
+  grid-column: 1 / -1;
+}
+
+.lesson-intro-block + .lesson-intro-block {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #e0e4e8;
+}
+
+.lesson-intro-block h4 {
+  margin-top: 0;
+}
+
 .didactic-list {
   margin: 0;
   padding-left: 20px;
@@ -2613,19 +2630,6 @@ export default {
   margin: 0 10px;
 }
 
-.lesson-description-box {
-  margin: 20px 0;
-  padding: 15px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.lesson-description-box h4 {
-  margin-top: 0;
-  color: #333;
-}
-
 .grammar-explanations {
   margin: 20px 0;
   padding: 15px;