torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor VocabCourseView to enhance lesson display and user interaction

Browse Source 
- Replaced the lesson item layout with a structured table format for improved readability and organization of lesson information.
- Updated lesson status indicators to include completion badges and scores, providing clearer feedback on progress.
- Enhanced action buttons with distinct styles for better user experience and accessibility.
- Improved CSS styles for a more modern and responsive design, ensuring a consistent look and feel across the application.
This commit is contained in:
Torsten Schulz (local)
2026-01-20 14:16:22 +01:00
parent d4a0f78cd0
commit e5d4a5f95f
2 changed files with 687 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
frontend/src/views/social/VocabCourseView.vue
View File

@@ -20,26 +20,43 @@
<div v-if="course.lessons && course.lessons.length > 0" class="lessons-list">
<h3>{{ $t('socialnetwork.vocab.courses.lessons') }}</h3>
<div v-for="lesson in course.lessons" :key="lesson.id" class="lesson-item">
<div class="lesson-header">
<span class="lesson-number">{{ lesson.lessonNumber }}.</span>
<h4 @click="openLesson(lesson.id)" class="lesson-title">{{ lesson.title }}</h4>
<span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
{{ $t('socialnetwork.vocab.courses.completed') }}
</span>
<span v-if="getLessonProgress(lesson.id)?.score" class="score">
{{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}
</span>
</div>
<p v-if="lesson.description" class="lesson-description">{{ lesson.description }}</p>
<div class="lesson-actions">
<button @click="openLesson(lesson.id)">
{{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
</button>
<button v-if="isOwner" @click="editLesson(lesson.id)">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
<button v-if="isOwner" @click="deleteLesson(lesson.id)">{{ $t('general.delete') }}</button>
</div>
</div>
<table class="lessons-table">
<thead>
<tr>
<th class="col-number">{{ $t('socialnetwork.vocab.courses.lessonNumber') }}</th>
<th class="col-title">{{ $t('socialnetwork.vocab.courses.title') }}</th>
<th class="col-status">Status</th>
<th class="col-actions">Aktionen</th>
</tr>
</thead>
<tbody>
<tr v-for="lesson in course.lessons" :key="lesson.id" class="lesson-row">
<td class="lesson-number">{{ lesson.lessonNumber }}</td>
<td class="lesson-title">
<span class="title-label">{{ lesson.title }}</span>
<span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
</td>
<td class="lesson-status">
<span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
{{ $t('socialnetwork.vocab.courses.completed') }}
</span>
<span v-if="getLessonProgress(lesson.id)?.score" class="score">
{{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
</span>
<span v-else-if="!getLessonProgress(lesson.id)" class="status-new">
Nicht begonnen
</span>
</td>
<td class="lesson-actions">
<button @click="openLesson(lesson.id)" class="btn-start">
{{ getLessonProgress(lesson.id)?.completed ? $t('socialnetwork.vocab.courses.review') : $t('socialnetwork.vocab.courses.start') }}
</button>
<button v-if="isOwner" @click="editLesson(lesson.id)" class="btn-edit">{{ $t('socialnetwork.vocab.courses.edit') }}</button>
<button v-if="isOwner" @click="deleteLesson(lesson.id)" class="btn-delete">{{ $t('general.delete') }}</button>
</td>
</tr>
</tbody>
</table>
</div>
<div v-else>
<p>{{ $t('socialnetwork.vocab.courses.noLessons') }}</p>
@@ -233,56 +250,158 @@ export default {
margin-top: 30px;
}
.lesson-item {
background: white;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 15px;
.lessons-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.lesson-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
.lessons-table thead {
background: #f8f9fa;
}
.lessons-table th {
padding: 12px 15px;
text-align: left;
font-weight: 600;
color: #333;
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.lessons-table th.col-number {
width: 60px;
}
.lessons-table th.col-title {
width: auto;
}
.lessons-table th.col-status {
width: 180px;
}
.lessons-table th.col-actions {
width: 200px;
}
.lessons-table tbody tr {
transition: background-color 0.2s ease;
}
.lessons-table tbody tr:hover {
background-color: #f8f9fa;
}
.lessons-table td {
padding: 15px;
vertical-align: top;
}
.lesson-number {
font-weight: bold;
font-weight: 600;
color: #666;
font-size: 0.95em;
}
.lesson-title {
cursor: pointer;
margin: 0;
flex: 1;
color: #0066cc;
text-decoration: underline;
display: flex;
flex-direction: column;
gap: 5px;
}
.title-label {
font-weight: 500;
color: #333;
font-size: 1em;
}
.lesson-description {
color: #666;
font-size: 0.85em;
line-height: 1.4;
}
.lesson-status {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-start;
}
.badge.completed {
background: #4CAF50;
color: white;
padding: 4px 8px;
border-radius: 3px;
font-size: 0.85em;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8em;
font-weight: 500;
white-space: nowrap;
}
.score {
color: #666;
font-size: 0.9em;
font-size: 0.85em;
}
.lesson-description {
color: #666;
margin: 10px 0;
.status-new {
color: #999;
font-size: 0.85em;
font-style: italic;
}
.lesson-actions {
display: flex;
gap: 10px;
margin-top: 10px;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.btn-start {
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9em;
font-weight: 500;
transition: background-color 0.2s ease;
}
.btn-start:hover {
background: #0056b3;
}
.btn-edit {
padding: 6px 12px;
background: #ffc107;
color: #333;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.85em;
transition: background-color 0.2s ease;
}
.btn-edit:hover {
background: #e0a800;
}
.btn-delete {
padding: 6px 12px;
background: #dc3545;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.85em;
transition: background-color 0.2s ease;
}
.btn-delete:hover {
background: #c82333;
}
.dialog-overlay {