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

feat: Implement course discovery and catalog page with browsing, filtering, search, and detailed course views.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 16:36:40 +07:00
parent 92ff037150
commit b96f85e650
2 changed files with 73 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

44
Frontend-Learner/assets/css/main.css
View file

@ -1134,45 +1134,35 @@ ul {
border-width: 2px !important;
}
/* ===========================
Dropdown Menu Visibility Enhancement
=========================== */
/* Force white background for all dropdown menus */
.q-menu,
.q-menu .q-list {
/* ✅ FORCE WHITE DROPDOWN เฉพาะ Light mode (กันทับ Dark mode) */
html:not(.dark) .q-menu,
html:not(.dark) .q-menu .q-list {
background-color: #ffffff !important;
}
/* Dropdown menu items - simple dark text */
.q-menu .q-item {
color: #0f172a !important; /* slate-900 - dark text */
html:not(.dark) .q-menu .q-item {
color: #0f172a !important;
background-color: transparent !important;
}
.q-menu .q-item__label {
color: #0f172a !important; /* slate-900 - dark text */
font-weight: 400 !important; /* normal weight */
html:not(.dark) .q-menu .q-item__label {
color: #0f172a !important;
font-weight: 400 !important;
}
/* Subtle hover state */
.q-menu .q-item:hover {
background-color: #f8fafc !important; /* slate-50 - very light hover */
html:not(.dark) .q-menu .q-item:hover {
background-color: #f8fafc !important;
}
/* Selected/Active item - keep simple, just slightly darker text */
.q-menu .q-item--active {
background-color: transparent !important; /* no background color */
color: #0f172a !important; /* same dark text */
html:not(.dark) .q-menu .q-item--active,
html:not(.dark) .q-menu .q-item--active .q-item__label {
background-color: transparent !important;
color: #0f172a !important;
font-weight: 500 !important;
}
.q-menu .q-item--active .q-item__label {
color: #0f172a !important; /* same dark text */
font-weight: 500 !important; /* slightly bolder */
}
/* Force option text to be dark */
.q-item__label,
.q-select__dropdown .q-item {
html:not(.dark) .q-item__label,
html:not(.dark) .q-select__dropdown .q-item {
color: #0f172a !important;
}

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

@ -131,10 +131,7 @@ onMounted(() => {
outlined
rounded
:placeholder="$t('discovery.searchPlaceholder')"
class="bg-white dark:bg-slate-800 w-full md:w-64"
bg-color="white"
color="slate-900"
:input-style="{ color: '#0f172a' }"
class="disc-search w-full md:w-64"
>
<template v-slot:append>
<q-icon name="search" class="text-slate-400" />
@ -149,13 +146,9 @@ onMounted(() => {
outlined
rounded
:dark="false"
class="bg-white w-40"
bg-color="white"
color="slate-900"
:input-style="{ color: '#0f172a' }"
class="disc-sort w-40"
:options-dark="false"
options-dense
:popup-content-style="{ backgroundColor: '#ffffff', color: '#0f172a' }"
popup-content-class="text-slate-900"
behavior="menu"
/>
@ -384,3 +377,57 @@ onMounted(() => {
</div>
</template>
<style scoped>
/* =========================
Discovery: Quasar Field Fix
- จำกัดผลกระทบเฉพาะช่องค้นหา/เรียงตาม
- ตัด focus ring (กรอบขาว 4 เหลี่ยม)
========================= */
/* ให้หน้าตา input เป็น pill ขาวเหมือนรูป (ทั้ง Light/Dark) */
.disc-search :deep(.q-field__control),
.disc-sort :deep(.q-field__control) {
background: #ffffff !important;
border-radius: 9999px !important;
}
/* สีตัวอักษร/placeholder/icon ให้คมชัด */
.disc-search :deep(.q-field__native),
.disc-search :deep(.q-field__input),
.disc-sort :deep(.q-field__native),
.disc-sort :deep(.q-field__input) {
color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;
}
.disc-search :deep(.q-placeholder),
.disc-sort :deep(.q-placeholder) {
color: #64748b !important; /* slate-500 */
}
.disc-search :deep(.q-icon),
.disc-sort :deep(.q-icon),
.disc-sort :deep(.q-select__dropdown-icon) {
color: #64748b !important;
}
/* ✅ ตัด “Focus outline / Focus ring” ที่เป็นกรอบสว่าง */
.disc-search :deep(.q-field__control:after),
.disc-sort :deep(.q-field__control:after) {
opacity: 0 !important; /* ตัวนี้มักเป็นเส้น/แสงตอน focus */
}
/* คุมเส้นขอบปกติให้บาง ๆ ไม่เด้งเป็นกรอบขาว */
.disc-search :deep(.q-field__control:before),
.disc-sort :deep(.q-field__control:before) {
border-color: rgba(203, 213, 225, 0.9) !important; /* slate-300 */
}
/* กัน browser outline ซ้อน */
.disc-search :deep(input:focus),
.disc-sort :deep(input:focus) {
outline: none !important;
box-shadow: none !important;
}
</style>