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