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

feat: implement course discovery page with category filtering, search, and pagination.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 17:52:58 +07:00 • committed by JakkrapartXD
parent e34f2d84da
commit 4e7c25e293
2 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Frontend-Learner/components/discovery/CategorySidebar.vue
View file

@ -29,8 +29,6 @@ const getLocalizedText = (text: any) => {
:label="`หมวดหมู่ (${modelValue.length})`" :label="`หมวดหมู่ (${modelValue.length})`"
class="font-bold text-slate-900 dark:text-white" class="font-bold text-slate-900 dark:text-white"
header-class="bg-white dark:bg-slate-900" header-class="bg-white dark:bg-slate-900"
text-color="slate-900"
:header-style="{ color: '#0f172a' }"
default-opened default-opened
> >
<q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800"> <q-list class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">

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

@ -150,7 +150,7 @@ onMounted(() => {
outlined outlined
rounded rounded
:placeholder="$t('discovery.searchPlaceholder')" :placeholder="$t('discovery.searchPlaceholder')"
class="w-full md:w-72 bg-white dark:bg-slate-800 search-input" class="w-full md:w-72 search-input"
bg-color="transparent" bg-color="transparent"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -250,7 +250,23 @@ onMounted(() => {
/* Standard overrides for Quasar inputs to match Tailwind theme */ /* Standard overrides for Quasar inputs to match Tailwind theme */
.search-input :deep(.q-field__control) { .search-input :deep(.q-field__control) {
border-radius: 9999px; /* Full rounded pill */ border-radius: 9999px; /* Full rounded pill */
background-color: white !important;
transition: all 0.3s ease;
} }
.dark .search-input :deep(.q-field__control) {
background-color: #1e293b !important; /* slate-800: Inner card depth */
border-color: rgba(255, 255, 255, 0.1) !important;
}
.search-input :deep(.q-field__native) {
color: #0f172a !important; /* slate-900: Dark text for light mode */
}
.dark .search-input :deep(.q-field__native) {
color: white !important;
}
.search-input :deep(.q-field__shadow) { .search-input :deep(.q-field__shadow) {
box-shadow: none !important; box-shadow: none !important;
} }