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

Refactor VocabCourseListView for improved layout and styling

Browse Source 
- 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.
This commit is contained in:
Torsten Schulz (local)
2026-01-19 14:27:41 +01:00
parent 64f4468664
commit 33787ba796
1 changed files with 113 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
frontend/src/views/social/VocabCourseListView.vue
View File

@@ -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 {