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

feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:26:58 +07:00
parent a54251f11e
commit a8339ed0ab
8 changed files with 99 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

16
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-100 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-[#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">
<!-- Thumbnail Section -->
<div class="relative w-full aspect-video overflow-hidden">
@ -60,12 +60,12 @@ const displayDescription = computed(() => getLocalizedText(props.description))
:alt="displayTitle"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
>
<div v-else class="w-full h-full bg-slate-200 dark:bg-slate-800 flex items-center justify-center">
<q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-700" />
<div v-else class="w-full h-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center">
<q-icon name="image" size="48px" class="text-slate-300 dark:text-slate-600" />
</div>
<!-- Overlays -->
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/40 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
@ -80,7 +80,7 @@ const displayDescription = computed(() => getLocalizedText(props.description))
<!-- Content Section -->
<div class="p-6 flex flex-col flex-grow">
<!-- Meta Info (Lessons/Duration) -->
<div class="flex items-center gap-3 text-xs font-bold text-slate-400 dark:text-slate-500 mb-3 uppercase tracking-wider">
<div class="flex items-center gap-3 text-xs font-bold text-slate-500 dark:text-slate-400 mb-3 uppercase tracking-wider">
<span v-if="lessons" class="flex items-center gap-1">
<q-icon name="menu_book" size="14px" /> {{ lessons }} {{ $t('course.lessonsUnit') }}
</span>
@ -103,8 +103,8 @@ const displayDescription = computed(() => getLocalizedText(props.description))
<!-- Progress Bar -->
<div v-if="progress !== undefined && !completed" class="mb-4">
<div class="flex justify-between text-[10px] font-bold uppercase mb-1">
<span class="text-slate-500">{{ $t('course.progress') }}</span>
<span class="text-blue-600">{{ progress }}%</span>
<span class="text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
<span class="text-blue-600 dark:text-blue-400">{{ progress }}%</span>
</div>
<div class="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-blue-600 rounded-full transition-all duration-500" :style="{ width: `${progress}%` }"></div>
@ -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/20 dark:text-blue-400 dark:hover:bg-blue-900/30"
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}`"
/>