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

Refactor VocabCourseView layout for improved structure and styling

Browse Source 
- Introduced wrapper divs for lesson title, status, and actions to enhance layout organization and readability.
- Updated CSS styles to ensure consistent display and alignment of lesson elements, improving overall user experience.
- Enhanced flexbox usage for better responsiveness and visual clarity in the lessons table.
This commit is contained in:
Torsten Schulz (local)
2026-01-20 14:50:09 +01:00
parent 175a61c81c
commit adcbd1a95a
1 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,26 +33,32 @@
<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>
<div class="lesson-title-content">
<span class="title-label">{{ lesson.title }}</span>
<span v-if="lesson.description" class="lesson-description">{{ lesson.description }}</span>
</div>
</td>
<td class="lesson-status">
<span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
{{ $t('socialnetwork.vocab.courses.completed') }}
</span>
<span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
{{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
</span>
<span v-else class="status-new">
{{ $t('socialnetwork.vocab.courses.notStarted') }}
</span>
<div class="lesson-status-content">
<span v-if="getLessonProgress(lesson.id)?.completed" class="badge completed">
{{ $t('socialnetwork.vocab.courses.completed') }}
</span>
<span v-else-if="getLessonProgress(lesson.id)?.score" class="score">
{{ $t('socialnetwork.vocab.courses.score') }}: {{ getLessonProgress(lesson.id).score }}%
</span>
<span v-else class="status-new">
{{ $t('socialnetwork.vocab.courses.notStarted') }}
</span>
</div>
</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>
<div class="lesson-actions-content">
<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>
</div>
</td>
</tr>
</tbody>
@@ -319,17 +325,20 @@ export default {
.lessons-table td {
padding: 15px;
vertical-align: top;
display: table-cell;
}
.lesson-number {
font-weight: 600;
color: #666;
font-size: 0.95em;
vertical-align: top;
padding-top: 15px;
}
.lesson-title {
display: block;
}
.lesson-title-content {
display: flex;
flex-direction: column;
gap: 5px;
@@ -348,13 +357,15 @@ export default {
}
.lesson-status {
display: block;
}
.lesson-status-content {
display: flex;
flex-direction: column;
gap: 5px;
align-items: flex-start;
justify-content: flex-start;
white-space: nowrap;
overflow: visible;
}
.badge.completed {
@@ -379,6 +390,10 @@ export default {
}
.lesson-actions {
display: block;
}
.lesson-actions-content {
display: flex;
gap: 8px;
flex-wrap: wrap;