chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: implement My Courses page with a new CourseCard component and certificate download functionality, along with new Thai locale strings.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 14:30:05 +07:00
parent 6d31cc2e45
commit 0fc67bf9c3
3 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

34
Frontend-Learner/components/course/CourseCard.vue
View file

@ -67,12 +67,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
<!-- Overlays -->
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/40 to-transparent"></div>
<!-- Category Badge -->
<div class="absolute top-4 left-4">
<span class="px-3 py-1 bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm text-[10px] font-black uppercase tracking-widest rounded-lg shadow-sm text-slate-800 dark:text-slate-200">
{{ category }}
</span>
</div>
<!-- Completed Badge -->
<div v-if="completed" class="absolute inset-0 bg-emerald-900/40 backdrop-blur-[2px] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
@ -117,30 +112,43 @@ const displayDescription = computed(() => getLocalizedText(props.description))
</div>
<!-- Action Buttons -->
<!-- View Details (Secondary Action) -->
<q-btn
v-if="showViewDetails && !completed && !progress"
unelevated
flat
rounded
class="w-full font-bold shadow-blue-200 dark:shadow-none bg-blue-600 text-white"
class="w-full font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30"
:label="$t('menu.viewDetails')"
:to="`/course/${id}`"
/>
<!-- Continue Learning (Primary Action) -->
<q-btn
v-if="showContinue || (progress && !completed)"
v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
unelevated
rounded
class="w-full font-bold bg-slate-900 dark:bg-white text-white dark:text-slate-900"
:label="$t('course.continueLearning')"
class="w-full font-bold bg-blue-600 text-white hover:bg-blue-700 shadow-md shadow-blue-500/20 transition-all hover:scale-[1.02]"
:label="(!progress || progress === 0) ? $t('course.startLearning') : $t('course.continueLearning')"
:to="`/classroom/learning?course_id=${id}`"
/>
<div v-if="completed" class="space-y-2">
<!-- Study Again -->
<q-btn
v-if="showStudyAgain"
flat
rounded
class="w-full font-bold text-slate-600 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400"
:label="$t('course.studyAgain')"
:to="`/classroom/learning?course_id=${id}`"
/>
<!-- Download Certificate -->
<q-btn
v-if="showCertificate"
outline
unelevated
rounded
class="w-full font-bold text-emerald-600 border-emerald-200 dark:text-emerald-400 dark:border-emerald-900"
class="w-full font-bold bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-900/20 dark:text-emerald-400 dark:hover:bg-emerald-900/30 border border-emerald-100 dark:border-emerald-800/50"
:label="$t('course.downloadCertificate')"
@click="emit('viewCertificate')"
/>