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

feat: implement course discovery page with browsing, filtering, and detailed course views.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-27 10:32:13 +07:00
parent b8547f83b3
commit fb4f345483
3 changed files with 15 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

16
Frontend-Learner/pages/course/[id].vue
View file

@ -62,13 +62,7 @@ useHead({
<template>
<div class="container mx-auto max-w-7xl px-4 py-8">
<NuxtLink to="/browse/discovery" class="inline-flex items-center gap-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
{{ $t('discovery.backToCatalog') }}
</NuxtLink>
<div v-if="course" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<div class="lg:col-span-8">
@ -76,14 +70,6 @@ useHead({
<div v-if="course.thumbnail_url" class="absolute inset-0">
<img :src="course.thumbnail_url" class="w-full h-full object-cover opacity-90 group-hover:opacity-75 transition-opacity" />
</div>
<!-- Play Icon Overlay -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-16 h-16 md:w-20 md:h-20 bg-blue-600 rounded-full flex items-center justify-center shadow-lg shadow-blue-600/40 group-hover:scale-110 transition-transform duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-10 md:w-10 text-white ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<h1 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-white mb-4 leading-tight">{{ getLocalizedText(course.title) }}</h1>