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

feat: add CurriculumSidebar component for displaying course chapters, lessons, and progress.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-12 13:10:09 +07:00
parent a0ca6f7e6b
commit 008f712480
1 changed files with 7 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Frontend-Learner/components/classroom/CurriculumSidebar.vue
View file

@ -59,18 +59,17 @@ const progressPercentage = computed(() => {
> >
<div v-if="courseData" class="flex flex-col h-full overflow-hidden"> <div v-if="courseData" class="flex flex-col h-full overflow-hidden">
<!-- Course Progress Header --> <!-- Course Progress Header -->
<div class="p-5 border-b border-gray-200 dark:border-white/5 bg-white dark:bg-slate-900"> <div class="p-5 border-b border-gray-200 dark:border-white/10 bg-slate-50/50 dark:bg-slate-900/50">
<div class="flex justify-between items-center mb-2"> <div class="flex justify-between items-center mb-2">
<span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress', 'ความคืบหน้า') }}</span> <span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress', 'ความคืบหน้า') }}</span>
<span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span> <span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span>
</div> </div>
<q-linear-progress <div class="h-2 w-full bg-slate-200 dark:bg-slate-800 rounded-full overflow-hidden shadow-inner">
:value="progressPercentage / 100" <div
color="primary" class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out shadow-[0_0_12px_rgba(37,99,235,0.3)]"
track-color="blue-1" :style="{ width: `${progressPercentage}%` }"
class="rounded-full h-2" ></div>
rounded </div>
/>
</div> </div>
<div class="flex-grow scroll"> <div class="flex-grow scroll">