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

feat: introduce CourseCard component and establish a global design system with light/dark theme variables in main.css.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:30:26 +07:00
parent a8339ed0ab
commit 879ab39998
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
</script>
<template>
<div class="group relative flex flex-col bg-white dark:bg-[#1e293b] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
<div class="group relative flex flex-col !bg-white dark:!bg-[#0f172a] rounded-3xl overflow-hidden border border-slate-200 dark:border-slate-800 shadow-sm hover:shadow-xl dark:shadow-none hover:-translate-y-1 transition-all duration-300 h-full">
<!-- Thumbnail Section -->
<div class="relative w-full aspect-video overflow-hidden">
@ -117,7 +117,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
v-if="showViewDetails && !completed && !progress"
flat
rounded
class="w-full font-bold text-blue-600 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/40 dark:text-blue-300 dark:hover:bg-blue-900/60"
class="w-full font-bold !text-blue-600 !bg-blue-50 hover:!bg-blue-100 dark:!bg-blue-900/40 dark:!text-blue-300 dark:hover:!bg-blue-900/60"
:label="$t('menu.viewDetails')"
:to="`/course/${id}`"
/>
@ -127,7 +127,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
v-if="showContinue || (progress && !completed) || (progress === 0 && !completed)"
unelevated
rounded
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]"
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}`"
/>
@ -138,7 +138,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
v-if="showStudyAgain"
unelevated
rounded
class="w-full font-bold bg-blue-50 text-blue-700 hover:bg-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:hover:bg-blue-900/30 border border-blue-100 dark:border-blue-800/50"
class="w-full font-bold !bg-blue-50 !text-blue-700 hover:!bg-blue-100 dark:!bg-blue-900/20 dark:!text-blue-400 dark:hover:!bg-blue-900/30 border border-blue-100 dark:border-blue-800/50"
:label="$t('course.studyAgain')"
:to="`/classroom/learning?course_id=${id}`"
/>
@ -148,7 +148,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
v-if="showCertificate"
unelevated
rounded
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"
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')"
/>