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

feat: Establish design system with Tailwind, CSS variables, and core UI components, and introduce discovery page.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 15:55:31 +07:00
parent a7de3aca72
commit f6cb4e4f81
2 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1113,3 +1113,23 @@ ul {
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 24px; margin-bottom: 24px;
} }
/* ===========================
Checkbox Visibility Enhancement
=========================== */
.checkbox-visible .q-checkbox__bg {
border: 2px solid #475569 !important; /* slate-600 - dark border for visibility */
}
.checkbox-visible .q-checkbox__svg {
color: #ffffff !important; /* white checkmark */
}
.checkbox-visible.q-checkbox--truthy .q-checkbox__bg {
background-color: #3b82f6 !important; /* primary blue when checked */
border-color: #3b82f6 !important;
}
.checkbox-visible.q-checkbox--dense .q-checkbox__bg {
border-width: 2px !important;
}

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

@ -229,15 +229,17 @@ const { currentUser } = useAuth();
<!-- LEFT SIDEBAR: Category Filter --> <!-- LEFT SIDEBAR: Category Filter -->
<div class="w-full lg:w-64 flex-shrink-0 sticky top-24"> <div class="w-full lg:w-64 flex-shrink-0 sticky top-24">
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden"> <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<q-expansion-item <q-expansion-item
expand-separator expand-separator
:label="`หมวดหมู่ (${selectedCategoryIds.length})`" :label="`หมวดหมู่ (${selectedCategoryIds.length})`"
class="font-bold text-slate-800 dark:text-white" class="font-bold text-slate-900"
header-class="bg-white dark:bg-slate-800" header-class="bg-white"
text-color="slate-900"
:header-style="{ color: '#0f172a' }"
default-opened default-opened
> >
<q-list class="bg-white dark:bg-slate-800 border-t border-slate-100 dark:border-slate-700"> <q-list class="bg-white border-t border-slate-200">
<q-item <q-item
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))" v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
:key="cat.id" :key="cat.id"
@ -247,10 +249,16 @@ const { currentUser } = useAuth();
dense dense
> >
<q-item-section avatar> <q-item-section avatar>
<q-checkbox v-model="selectedCategoryIds" :val="cat.id" color="primary" dense /> <q-checkbox
v-model="selectedCategoryIds"
:val="cat.id"
color="primary"
dense
class="checkbox-visible"
/>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(cat.name) }}</q-item-label> <q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
@ -260,7 +268,7 @@ const { currentUser } = useAuth();
clickable clickable
v-ripple v-ripple
@click="showAllCategories = !showAllCategories" @click="showAllCategories = !showAllCategories"
class="text-blue-600 dark:text-blue-400 font-bold text-sm" class="text-blue-600 font-bold text-sm"
> >
<q-item-section> <q-item-section>
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">