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

feat: Implement default authenticated user layout and initial dashboard pages for 'My Courses' and 'Profile'.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 48s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 2s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-20 15:18:30 +07:00
parent 45b9c6516b
commit 13ad2097df
3 changed files with 5 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

8
Frontend-Learner/layouts/default.vue
View file

@ -48,13 +48,7 @@ const shouldHideSidebar = computed(() => {
</q-page> </q-page>
</q-page-container> </q-page-container>
<!-- Mobile Bottom Nav -->
<q-footer
v-if="$q.screen.lt.md"
class="!bg-white dark:!bg-[#1e293b] text-primary"
>
<MobileNav />
</q-footer>
</q-layout> </q-layout>
</template> </template>

2
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -200,7 +200,7 @@ const validCourseId = computed(() => {
<div v-if="isLoading" class="flex justify-center py-20"> <div v-if="isLoading" class="flex justify-center py-20">
<q-spinner size="3rem" color="primary" /> <q-spinner size="3rem" color="primary" />
</div> </div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<template v-for="course in filteredEnrolledCourses" :key="course.id"> <template v-for="course in filteredEnrolledCourses" :key="course.id">
<!-- In Progress Course Card --> <!-- In Progress Course Card -->
<CourseCard <CourseCard

6
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -294,7 +294,7 @@ onMounted(async () => {
<!-- View Details Content --> <!-- View Details Content -->
<div class="p-8 md:p-12 flex-grow"> <div class="p-8 md:p-12 flex-grow">
<div class="max-w-3xl mx-auto h-full fade-in"> <div class="max-w-3xl mx-auto h-full fade-in">
<h3 class="text-sm font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest flex items-center gap-2 mb-8"> <h3 class="text-sm font-black text-slate-700 dark:text-slate-300 uppercase tracking-widest flex items-center gap-2 mb-8">
<span class="w-2 h-2 bg-blue-600 rounded-full"></span> {{ $t('profile.accountDetails') }} <span class="w-2 h-2 bg-blue-600 rounded-full"></span> {{ $t('profile.accountDetails') }}
</h3> </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
@ -303,7 +303,7 @@ onMounted(async () => {
<q-icon name="smartphone" size="24px" /> <q-icon name="smartphone" size="24px" />
</div> </div>
<div> <div>
<div class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5">{{ $t('profile.phone') }}</div> <div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.phone') }}</div>
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div> <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
</div> </div>
</div> </div>
@ -312,7 +312,7 @@ onMounted(async () => {
<q-icon name="calendar_today" size="24px" /> <q-icon name="calendar_today" size="24px" />
</div> </div>
<div> <div>
<div class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-0.5">{{ $t('profile.joinedAt') }}</div> <div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.joinedAt') }}</div>
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div> <div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
</div> </div>
</div> </div>