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

feat: Implement user profile management, course browsing, and dashboard structure with new components and layouts.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 45s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-19 17:37:28 +07:00
parent c118e5c3dc
commit 0f92f0d00c
10 changed files with 446 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

41
Frontend-Learner/pages/browse/discovery.vue
View file

@ -150,39 +150,26 @@ onMounted(() => {
<!-- Top Header Area -->
<div class="flex flex-col gap-6 mb-10">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<!-- Title -->
<h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
{{ $t('discovery.title') }}
</h1>
<!-- Right Side: Search -->
<div class="flex items-center gap-3 w-full md:w-auto">
<q-input
v-model="searchQuery"
dense
outlined
rounded
:placeholder="$t('discovery.searchPlaceholder')"
class="w-full md:w-72 search-input shadow-sm"
bg-color="transparent"
>
<template v-slot:prepend>
<q-icon name="search" class="text-slate-400" />
</template>
</q-input>
<div class="flex items-start gap-4 mb-4">
<span class="w-1.5 h-10 md:h-12 bg-blue-600 rounded-full shadow-lg shadow-blue-500/50 mt-1 flex-shrink-0"></span>
<div>
<h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
{{ $t('discovery.title') }}
</h1>
<p v-if="filteredCourses.length > 0" class="text-slate-500 dark:text-slate-400 mt-1 font-medium">
พบทั้งหมด <span class="text-blue-600 font-bold leading-none">{{ filteredCourses.length }}</span> รายการ
</p>
</div>
</div>
<!-- Unified Filter Section: Categories -->
<div class="flex flex-wrap items-center gap-2">
<div class="bg-white dark:bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm">
<q-btn
flat
rounded
dense
class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
:class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
:class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
@click="selectedCategoryIds = []"
:label="$t('discovery.showAll')"
/>
@ -192,8 +179,8 @@ onMounted(() => {
flat
rounded
dense
class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
:class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
:class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
@click="toggleCategory(cat.id)"
:label="getLocalizedText(cat.name)"
/>