From 33787ba796f21abde7c839d278330713477a9f91 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 19 Jan 2026 14:27:41 +0100
Subject: [PATCH] Refactor VocabCourseListView for improved layout and styling

- Updated the course item structure to enhance visual clarity and organization.
- Introduced new CSS classes for better styling and hover effects on course items.
- Adjusted padding, margins, and gaps for a more cohesive design.
- Improved button styles for enrollment, continuation, and editing actions, enhancing user interaction.
---
 .../src/views/social/VocabCourseListView.vue  | 159 +++++++++++++-----
 1 file changed, 113 insertions(+), 46 deletions(-)

diff --git a/frontend/src/views/social/VocabCourseListView.vue b/frontend/src/views/social/VocabCourseListView.vue
index 34297c5..fefe828 100644
--- a/frontend/src/views/social/VocabCourseListView.vue
+++ b/frontend/src/views/social/VocabCourseListView.vue
@@ -44,29 +44,31 @@
         </div>
         <div v-else class="course-list">
           <div v-for="course in courses" :key="course.id" class="course-item">
-            <div class="course-header">
-              <h3 @click="openCourse(course.id)" class="course-title">{{ course.title }}</h3>
-              <span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
-              <span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
-              <span v-if="course.isPublic" class="badge public">{{ $t('socialnetwork.vocab.courses.public') }}</span>
-            </div>
-            <p v-if="course.description" class="course-description">{{ course.description }}</p>
-            <div class="course-meta">
-              <span v-if="course.languageName">{{ $t('socialnetwork.vocab.courses.targetLanguage') }}: {{ course.languageName }}</span>
-              <span v-if="course.nativeLanguageName">{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}: {{ course.nativeLanguageName }}</span>
-              <span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
-              <span v-if="course.lessons">{{ $t('socialnetwork.vocab.courses.lessons') }}: {{ course.lessons.length }}</span>
-            </div>
-            <div class="course-actions">
-              <button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)">
-                {{ $t('socialnetwork.vocab.courses.enroll') }}
-              </button>
-              <button v-if="course.enrolledAt" @click="openCourse(course.id)">
-                {{ $t('socialnetwork.vocab.courses.continue') }}
-              </button>
-              <button v-if="course.isOwner" @click="editCourse(course.id)">
-                {{ $t('socialnetwork.vocab.courses.edit') }}
-              </button>
+            <div class="course-content">
+              <div class="course-info">
+                <div class="course-title-row">
+                  <span class="course-title">{{ course.title }}</span>
+                  <span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
+                  <span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
+                </div>
+                <div class="course-meta">
+                  <span v-if="course.languageName" class="meta-item">{{ course.languageName }}</span>
+                  <span v-if="course.nativeLanguageName" class="meta-item">{{ course.nativeLanguageName }}</span>
+                  <span class="meta-item">{{ $t('socialnetwork.vocab.courses.difficulty') }} {{ course.difficultyLevel }}</span>
+                  <span v-if="course.lessons" class="meta-item">{{ course.lessons.length }} {{ $t('socialnetwork.vocab.courses.lessons') }}</span>
+                </div>
+              </div>
+              <div class="course-actions">
+                <button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)" class="btn-enroll">
+                  {{ $t('socialnetwork.vocab.courses.enroll') }}
+                </button>
+                <button v-if="course.enrolledAt" @click="openCourse(course.id)" class="btn-continue">
+                  {{ $t('socialnetwork.vocab.courses.continue') }}
+                </button>
+                <button v-if="course.isOwner" @click="editCourse(course.id)" class="btn-edit">
+                  {{ $t('socialnetwork.vocab.courses.edit') }}
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -357,36 +359,53 @@ export default {
 .course-list {
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  margin-top: 20px;
+  gap: 8px;
+  margin-top: 15px;
 }
 
 .course-item {
   background: white;
-  padding: 15px;
   border: 1px solid #ddd;
   border-radius: 4px;
+  transition: box-shadow 0.2s;
 }
 
-.course-header {
+.course-item:hover {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.course-content {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
+  justify-content: space-between;
+  padding: 12px 15px;
+  gap: 15px;
+}
+
+.course-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.course-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
 .course-title {
-  cursor: pointer;
+  font-weight: 600;
+  font-size: 1em;
+  color: #333;
   margin: 0;
-  flex: 1;
-  color: #0066cc;
-  text-decoration: underline;
 }
 
 .badge {
-  padding: 4px 8px;
+  padding: 2px 6px;
   border-radius: 3px;
-  font-size: 0.85em;
+  font-size: 0.75em;
+  white-space: nowrap;
 }
 
 .badge.owner {
@@ -404,23 +423,71 @@ export default {
   color: white;
 }
 
-.course-description {
-  color: #666;
-  margin: 10px 0;
-}
-
 .course-meta {
   display: flex;
-  gap: 15px;
-  margin: 10px 0;
-  font-size: 0.9em;
-  color: #888;
+  gap: 12px;
+  font-size: 0.85em;
+  color: #666;
+  flex-wrap: wrap;
+}
+
+.meta-item {
+  white-space: nowrap;
 }
 
 .course-actions {
   display: flex;
-  gap: 10px;
-  margin-top: 10px;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.course-actions button {
+  padding: 6px 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  font-size: 0.9em;
+  white-space: nowrap;
+  transition: background-color 0.2s, border-color 0.2s;
+}
+
+.course-actions button:hover {
+  background: #f5f5f5;
+  border-color: #bbb;
+}
+
+.btn-enroll {
+  background: #4CAF50 !important;
+  color: white !important;
+  border-color: #4CAF50 !important;
+}
+
+.btn-enroll:hover {
+  background: #45a049 !important;
+  border-color: #45a049 !important;
+}
+
+.btn-continue {
+  background: #2196F3 !important;
+  color: white !important;
+  border-color: #2196F3 !important;
+}
+
+.btn-continue:hover {
+  background: #0b7dda !important;
+  border-color: #0b7dda !important;
+}
+
+.btn-edit {
+  background: #FF9800 !important;
+  color: white !important;
+  border-color: #FF9800 !important;
+}
+
+.btn-edit:hover {
+  background: #e68900 !important;
+  border-color: #e68900 !important;
 }
 
 .dialog-overlay {