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.
This commit is contained in:
Torsten Schulz (local)
@@ -44,29 +44,31 @@
|
|||||||
</div>
|
</div>
|
||||||
<div v-else class="course-list">
|
<div v-else class="course-list">
|
||||||
<div v-for="course in courses" :key="course.id" class="course-item">
|
<div v-for="course in courses" :key="course.id" class="course-item">
|
||||||
<div class="course-header">
|
<div class="course-content">
|
||||||
<h3 @click="openCourse(course.id)" class="course-title">{{ course.title }}</h3>
|
<div class="course-info">
|
||||||
<span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
|
<div class="course-title-row">
|
||||||
<span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
|
<span class="course-title">{{ course.title }}</span>
|
||||||
<span v-if="course.isPublic" class="badge public">{{ $t('socialnetwork.vocab.courses.public') }}</span>
|
<span v-if="course.isOwner" class="badge owner">{{ $t('socialnetwork.vocab.courses.owner') }}</span>
|
||||||
</div>
|
<span v-else-if="course.enrolledAt" class="badge enrolled">{{ $t('socialnetwork.vocab.courses.enrolled') }}</span>
|
||||||
<p v-if="course.description" class="course-description">{{ course.description }}</p>
|
</div>
|
||||||
<div class="course-meta">
|
<div class="course-meta">
|
||||||
<span v-if="course.languageName">{{ $t('socialnetwork.vocab.courses.targetLanguage') }}: {{ course.languageName }}</span>
|
<span v-if="course.languageName" class="meta-item">{{ course.languageName }}</span>
|
||||||
<span v-if="course.nativeLanguageName">{{ $t('socialnetwork.vocab.courses.nativeLanguage') }}: {{ course.nativeLanguageName }}</span>
|
<span v-if="course.nativeLanguageName" class="meta-item">{{ course.nativeLanguageName }}</span>
|
||||||
<span>{{ $t('socialnetwork.vocab.courses.difficulty') }}: {{ course.difficultyLevel }}</span>
|
<span class="meta-item">{{ $t('socialnetwork.vocab.courses.difficulty') }} {{ course.difficultyLevel }}</span>
|
||||||
<span v-if="course.lessons">{{ $t('socialnetwork.vocab.courses.lessons') }}: {{ course.lessons.length }}</span>
|
<span v-if="course.lessons" class="meta-item">{{ course.lessons.length }} {{ $t('socialnetwork.vocab.courses.lessons') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="course-actions">
|
</div>
|
||||||
<button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)">
|
<div class="course-actions">
|
||||||
{{ $t('socialnetwork.vocab.courses.enroll') }}
|
<button v-if="!course.enrolledAt && (course.isPublic || course.isOwner)" @click="enroll(course.id)" class="btn-enroll">
|
||||||
</button>
|
{{ $t('socialnetwork.vocab.courses.enroll') }}
|
||||||
<button v-if="course.enrolledAt" @click="openCourse(course.id)">
|
</button>
|
||||||
{{ $t('socialnetwork.vocab.courses.continue') }}
|
<button v-if="course.enrolledAt" @click="openCourse(course.id)" class="btn-continue">
|
||||||
</button>
|
{{ $t('socialnetwork.vocab.courses.continue') }}
|
||||||
<button v-if="course.isOwner" @click="editCourse(course.id)">
|
</button>
|
||||||
{{ $t('socialnetwork.vocab.courses.edit') }}
|
<button v-if="course.isOwner" @click="editCourse(course.id)" class="btn-edit">
|
||||||
</button>
|
{{ $t('socialnetwork.vocab.courses.edit') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -357,36 +359,53 @@ export default {
|
|||||||
.course-list {
|
.course-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 8px;
|
||||||
margin-top: 20px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-item {
|
.course-item {
|
||||||
background: white;
|
background: white;
|
||||||
padding: 15px;
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
border-radius: 4px;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
justify-content: space-between;
|
||||||
margin-bottom: 10px;
|
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 {
|
.course-title {
|
||||||
cursor: pointer;
|
font-weight: 600;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
flex: 1;
|
|
||||||
color: #0066cc;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
padding: 4px 8px;
|
padding: 2px 6px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
font-size: 0.85em;
|
font-size: 0.75em;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge.owner {
|
.badge.owner {
|
||||||
@@ -404,23 +423,71 @@ export default {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-description {
|
|
||||||
color: #666;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-meta {
|
.course-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 12px;
|
||||||
margin: 10px 0;
|
font-size: 0.85em;
|
||||||
font-size: 0.9em;
|
color: #666;
|
||||||
color: #888;
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta-item {
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.course-actions {
|
.course-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
margin-top: 10px;
|
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 {
|
.dialog-overlay {
|
||||||
|
|||||||
Reference in New Issue
Block a user