feat: implement initial e-learning frontend UI, including course details, layout, navigation, and dashboard components.
This commit is contained in:
supalerk-ar66
parent
a54251f11e
commit
a8339ed0ab
8 changed files with 99 additions and 105 deletions
|
|
@ -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}`"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -23,17 +23,17 @@ const getLocalizedText = (text: any) => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 overflow-hidden">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${modelValue.length})`"
|
||||
class="font-bold text-slate-900"
|
||||
header-class="bg-white"
|
||||
class="font-bold text-slate-900 dark:text-white"
|
||||
header-class="bg-white dark:bg-slate-900"
|
||||
text-color="slate-900"
|
||||
:header-style="{ color: '#0f172a' }"
|
||||
default-opened
|
||||
>
|
||||
<q-list class="bg-white border-t border-slate-200">
|
||||
<q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
|
||||
<q-item
|
||||
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
|
||||
:key="cat.id"
|
||||
|
|
@ -53,7 +53,7 @@ const getLocalizedText = (text: any) => {
|
|||
/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
<q-item-label class="text-sm font-medium text-slate-900 dark:text-slate-200">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
|
|
@ -63,7 +63,7 @@ const getLocalizedText = (text: any) => {
|
|||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="text-blue-600 font-bold text-sm"
|
||||
class="text-blue-600 dark:text-blue-400 font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1">
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const handleEnroll = () => {
|
|||
flat
|
||||
icon="arrow_back"
|
||||
label="ย้อนกลับ"
|
||||
class="mb-6 font-bold text-slate-500 hover:text-slate-800 transition-colors"
|
||||
class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors"
|
||||
@click="emit('back')"
|
||||
/>
|
||||
|
||||
|
|
@ -80,11 +80,11 @@ const handleEnroll = () => {
|
|||
|
||||
<!-- Course Title & Description -->
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4 leading-tight">
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h1>
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 mb-6">
|
||||
<span class="flex items-center gap-1 bg-slate-100 px-3 py-1 rounded-full text-slate-700 font-medium">
|
||||
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
|
||||
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
|
||||
<q-icon name="category" size="16px" class="text-blue-500" />
|
||||
{{ course.category?.name?.th || course.category?.name?.en || 'ทั่วไป' }}
|
||||
</span>
|
||||
|
|
@ -98,38 +98,38 @@ const handleEnroll = () => {
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="prose max-w-none text-slate-600 leading-relaxed font-light">
|
||||
<div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light">
|
||||
<p>{{ getLocalizedText(course.description) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum Preview -->
|
||||
<div class="bg-slate-50 rounded-3xl p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-6 flex items-center gap-2">
|
||||
<q-icon name="list_alt" class="text-blue-600" />
|
||||
<div class="bg-slate-50 dark:bg-white/5 rounded-3xl p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
|
||||
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
|
||||
เนื้อหาบทเรียน
|
||||
</h3>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 bg-slate-100 font-bold text-slate-800 flex justify-between items-center">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden">
|
||||
<div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center">
|
||||
<span>{{ idx + 1 }}. {{ getLocalizedText(chapter.title) }}</span>
|
||||
<span class="text-xs text-slate-500 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} บทเรียน</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-100">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<div class="divide-y divide-slate-100 dark:divide-slate-800">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
|
||||
<q-icon
|
||||
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'"
|
||||
:class="lesson.type === 'VIDEO' ? 'text-blue-500' : 'text-orange-500'"
|
||||
:class="lesson.type === 'VIDEO' ? 'text-blue-500 dark:text-blue-400' : 'text-orange-500 dark:text-orange-400'"
|
||||
size="18px"
|
||||
/>
|
||||
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span>
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
||||
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300" />
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} นาที</span>
|
||||
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 py-8">
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 dark:text-slate-600 py-8">
|
||||
ยังไม่มีเนื้อหาในขณะนี้
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,14 +140,14 @@ const handleEnroll = () => {
|
|||
<!-- Right: Enrollment Card -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="bg-white rounded-3xl shadow-xl shadow-slate-200/50 p-6 border border-slate-100 relative overflow-hidden">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-slate-800 relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="text-3xl font-black text-slate-900 mb-2 font-display">
|
||||
<div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display">
|
||||
{{ course.price > 0 ? formatPrice(course.price) : 'เรียนฟรี' }}
|
||||
</div>
|
||||
<div v-if="course.price > 0" class="text-sm text-slate-500 mb-6 line-through">
|
||||
<div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
|
||||
{{ formatPrice(course.price * 2) }}
|
||||
</div>
|
||||
|
||||
|
|
@ -162,22 +162,22 @@ const handleEnroll = () => {
|
|||
@click="handleEnroll"
|
||||
/>
|
||||
|
||||
<div class="text-xs text-center text-slate-400">
|
||||
<div class="text-xs text-center text-slate-400 dark:text-slate-500">
|
||||
รับประกันความพึงพอใจ คืนเงินภายใน 7 วัน
|
||||
</div>
|
||||
|
||||
<hr class="my-6 border-slate-100">
|
||||
<hr class="my-6 border-slate-100 dark:border-slate-800">
|
||||
|
||||
<div class="space-y-3 block">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
เข้าเรียนได้ตลอดชีพ
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ทำแบบทดสอบไม่จำกัด
|
||||
</div>
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600">
|
||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||
<q-icon name="check_circle" class="text-green-500" />
|
||||
ใบประกาศนียบัตรเมื่อเรียนจบ
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,22 +63,17 @@ const handleNavigate = (path: string) => {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Active State styling for Sidebar items */
|
||||
<style scoped>
|
||||
.sidebar-item--active {
|
||||
background: rgb(239 246 255) !important; /* blue-50 */
|
||||
color: rgb(29 78 216) !important; /* blue-700 */
|
||||
background: #eff6ff !important; /* blue-50 */
|
||||
color: #1d4ed8 !important; /* blue-700 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-item--active .q-icon {
|
||||
color: rgb(37 99 235) !important; /* blue-600 */
|
||||
}
|
||||
|
||||
/* Vertical indicator for active item */
|
||||
.sidebar-item--active::after {
|
||||
content: "";
|
||||
.sidebar-item--active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
left: 0;
|
||||
top: 15%;
|
||||
height: 70%;
|
||||
width: 4px;
|
||||
|
|
@ -86,17 +81,17 @@ const handleNavigate = (path: string) => {
|
|||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
/* Dark Mode Active State */
|
||||
/* Dark Mode Active State Enhancement */
|
||||
.dark .sidebar-item--active {
|
||||
background: rgba(37, 99, 235, 0.15) !important;
|
||||
color: rgb(147 197 253) !important; /* blue-300 */
|
||||
color: #93c5fd !important; /* blue-300 */
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active .q-icon {
|
||||
color: rgb(96 165 250) !important; /* blue-400 */
|
||||
color: #60a5fa !important; /* blue-400 */
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active::after {
|
||||
background: #60a5fa;
|
||||
.dark .sidebar-item--active::before {
|
||||
background: #3b82f6;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const handleLogout = async () => {
|
|||
anchor="bottom end"
|
||||
self="top end"
|
||||
:offset="[0, 10]"
|
||||
content-class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/10"
|
||||
content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
|
||||
style="min-width: 240px;"
|
||||
>
|
||||
<q-list class="py-2">
|
||||
|
|
@ -67,16 +67,16 @@ const handleLogout = async () => {
|
|||
clickable
|
||||
v-close-popup
|
||||
@click="navigateTo(item.to)"
|
||||
class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors"
|
||||
class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ item.label }}</q-item-label>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item class="hover:bg-slate-100 dark:hover:bg-white/10 transition-colors">
|
||||
<q-item class="hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-white">{{ $t('userMenu.darkMode') }}</q-item-label>
|
||||
<q-item-label class="font-bold text-sm text-slate-800 dark:text-slate-100">{{ $t('userMenu.darkMode') }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-toggle
|
||||
|
|
@ -89,12 +89,12 @@ const handleLogout = async () => {
|
|||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator class="bg-slate-100 dark:bg-white/10 my-1" />
|
||||
<q-separator class="bg-slate-100 dark:bg-white/5 my-1" />
|
||||
|
||||
<div class="p-4">
|
||||
<div class="px-4 py-2 mt-2">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="w-full bg-red-500/10 text-red-400 hover:bg-red-500/20 font-bold rounded-lg"
|
||||
class="w-full bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-500/10 dark:text-red-400 dark:hover:bg-red-500/20 font-black rounded-xl"
|
||||
no-caps
|
||||
@click="handleLogout"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue