MIDNIGHT/enlight-lms
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: remove hero banners, fix theme tokens, align course card stats

Browse Source 
- Remove dark gradient hero sections from Courses and Olympiads pages
- Move search input inline with tab filters
- Fix StudentProfile scoped styles to use Frappe UI CSS variables
  instead of hardcoded hex colors (fixes white/dark theme compatibility)
- Fix CourseCard stats row jumping by adding min-height to description
  and stats container

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
joylessorchid
2026-03-16 06:15:55 +03:00
parent 3882787e50
commit e9b26ee639
4 changed files with 71 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/CourseCard.vue
View File

@@ -75,13 +75,13 @@
{{ course.title }}
</div>
<!-- Short intro -->
<p class="text-xs text-ink-gray-5 leading-relaxed line-clamp-2 mb-3 mt-0.5">
<!-- Short intro: fixed 2-line height so cards stay aligned -->
<p class="text-xs text-ink-gray-5 leading-relaxed line-clamp-2 mb-3 mt-0.5" style="min-height: 2.5rem">
{{ course.short_introduction }}
</p>
<!-- Stats row -->
<div class="flex items-center gap-3 text-xs text-ink-gray-5 mb-3 flex-wrap">
<!-- Stats row: always occupies space even when empty -->
<div class="flex items-center gap-3 text-xs text-ink-gray-5 mb-3 flex-wrap" style="min-height: 1.25rem">
<span v-if="course.lessons" class="flex items-center gap-1">
<BookOpen class="h-3.5 w-3.5" />
{{ course.lessons }} {{ __('lessons') }}

37
frontend/src/pages/Courses/Courses.vue
View File

@@ -47,33 +47,22 @@
</Dropdown>
</header>
<!-- Hero search bar -->
<div class="bg-gradient-to-br from-ink-gray-9 to-surface-gray-7 px-5 py-8">
<div class="max-w-xl">
<div class="flex items-center gap-2 mb-1">
<BookOpen class="h-5 w-5 text-ink-blue-3" />
<span class="text-xs font-semibold text-ink-blue-3 uppercase tracking-wider">
{{ __('Courses') }}
</span>
</div>
<h1 class="text-2xl font-bold text-white mb-4">{{ __('Explore Our Courses') }}</h1>
<div class="relative">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-gray-5" />
<input
v-model="title"
type="text"
:placeholder="__('Search by title...')"
class="w-full pl-9 pr-4 py-2.5 rounded-lg bg-white border border-outline-gray-2 text-sm text-ink-gray-9 focus:outline-none focus:ring-2 focus:ring-ink-blue-3"
@input="updateCourses()"
/>
</div>
</div>
</div>
<div class="p-5 pb-10">
<!-- Filters row -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
<div class="flex items-center gap-2 flex-wrap">
<TabButtons :buttons="courseTabs" v-model="currentTab" class="w-fit" />
<div class="relative">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ink-gray-4 pointer-events-none" />
<input
v-model="title"
type="text"
:placeholder="__('Search...')"
class="pl-8 pr-3 py-1.5 rounded-md border border-outline-gray-2 text-sm text-ink-gray-9 bg-surface-white focus:outline-none focus:ring-1 focus:ring-ink-blue-3 w-44"
@input="updateCourses()"
/>
</div>
</div>
<div class="flex items-center gap-3 flex-wrap">
<div class="min-w-0 w-36">
<Select

40
frontend/src/pages/Olympiads/Olympiads.vue
View File

@@ -5,36 +5,22 @@
<Breadcrumbs :items="breadcrumbs" />
</header>
<!-- Hero banner -->
<div class="bg-gradient-to-br from-ink-gray-9 to-surface-gray-7 px-5 py-10 text-white">
<div class="max-w-2xl">
<div class="flex items-center gap-2 mb-2">
<Trophy class="h-6 w-6 text-ink-amber-3" />
<span class="text-sm font-medium text-ink-amber-3 uppercase tracking-wider">
{{ __('Olympiads') }}
</span>
</div>
<h1 class="text-3xl font-bold mb-3">{{ __('Academic Olympiads') }}</h1>
<p class="text-base text-surface-gray-3 mb-6">
{{ __('Test your knowledge, compete with peers and earn recognition.') }}
</p>
<div class="relative max-w-sm">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-gray-5" />
<input
v-model="searchQuery"
type="text"
:placeholder="__('Search olympiads...')"
class="w-full pl-9 pr-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
@input="debouncedSearch"
/>
</div>
</div>
</div>
<div class="p-5 pb-10">
<!-- Tab filters -->
<div class="flex items-center justify-between mb-6 flex-wrap gap-3">
<TabButtons :buttons="statusTabs" v-model="currentStatus" class="w-fit" />
<div class="flex items-center gap-2 flex-wrap">
<TabButtons :buttons="statusTabs" v-model="currentStatus" class="w-fit" />
<div class="relative">
<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-ink-gray-4 pointer-events-none" />
<input
v-model="searchQuery"
type="text"
:placeholder="__('Search...')"
class="pl-8 pr-3 py-1.5 rounded-md border border-outline-gray-2 text-sm text-ink-gray-9 bg-surface-white focus:outline-none focus:ring-1 focus:ring-ink-blue-3 w-44"
@input="debouncedSearch"
/>
</div>
</div>
<div class="text-sm text-ink-gray-5">
{{ filteredOlympiads.length }} {{ __('olympiads') }}
</div>

90
frontend/src/pages/StudentProfile.vue
View File

@@ -370,7 +370,6 @@
/* ===== PAGE ===== */
.student-profile-page {
min-height: 100vh;
background: #f8f9fa;
}
.profile-content {
max-width: 960px;
@@ -383,8 +382,8 @@
/* ===== HERO CARD ===== */
.hero-card {
background: #fff;
border: 1px solid #e5e7eb;
background: rgb(var(--color-surface-white));
border: 1px solid rgb(var(--color-outline-gray-2));
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
@@ -427,24 +426,23 @@
.hero-name {
font-size: 20px;
font-weight: 700;
color: #111827;
color: rgb(var(--color-ink-gray-9));
line-height: 1.3;
}
.hero-subtitle {
font-size: 13px;
color: #6b7280;
color: rgb(var(--color-ink-gray-5));
margin-top: 2px;
}
.hero-bio {
margin-top: 4px;
font-size: 13px;
color: #4b5563;
color: rgb(var(--color-ink-gray-7));
}
.hero-actions {
flex-shrink: 0;
}
/* ===== SECTION GRID ===== */
.section-grid {
display: grid;
@@ -463,8 +461,8 @@
/* ===== INFO CARDS ===== */
.info-card {
background: #fff;
border: 1px solid #e5e7eb;
background: rgb(var(--color-surface-white));
border: 1px solid rgb(var(--color-outline-gray-2));
border-radius: 8px;
transition: box-shadow 0.15s ease;
}
@@ -476,8 +474,8 @@
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
border-bottom: 1px solid rgb(var(--color-outline-gray-1));
background: rgb(var(--color-surface-gray-1));
border-radius: 8px 8px 0 0;
}
.card-header-icon {
@@ -489,7 +487,7 @@
.card-header-title {
font-size: 14px;
font-weight: 600;
color: #111827;
color: rgb(var(--color-ink-gray-9));
}
.card-body {
padding: 16px 18px;
@@ -498,7 +496,7 @@
}
.text-body {
font-size: 14px;
color: #374151;
color: rgb(var(--color-ink-gray-7));
line-height: 1.65;
white-space: pre-line;
overflow-wrap: anywhere;
@@ -510,7 +508,7 @@
display: flex;
align-items: baseline;
padding: 7px 0;
border-bottom: 1px solid #f9fafb;
border-bottom: 1px solid rgb(var(--color-outline-gray-1));
gap: 8px;
}
.info-row:last-child {
@@ -520,7 +518,7 @@
width: 130px;
flex-shrink: 0;
font-size: 13px;
color: #6b7280;
color: rgb(var(--color-ink-gray-5));
font-weight: 500;
}
@media (max-width: 639px) {
@@ -529,35 +527,29 @@
}
.info-value {
font-size: 14px;
color: #111827;
color: rgb(var(--color-ink-gray-9));
word-break: break-word;
}
.text-body {
font-size: 14px;
color: #374151;
line-height: 1.65;
white-space: pre-line;
}
/* ===== TELEGRAM LINK ===== */
.tg-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #2563eb;
color: rgb(var(--color-ink-blue-3));
font-weight: 500;
font-size: 14px;
transition: color 0.15s;
}
.tg-link:hover { color: #1d4ed8; }
.tg-link:hover { color: rgb(var(--color-ink-blue-4)); }
/* ===== BADGES ===== */
.badge-yes {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: #ecfdf5;
color: #059669;
background: rgb(var(--color-surface-green-1));
color: rgb(var(--color-ink-green-3));
font-size: 12px;
font-weight: 600;
}
@@ -565,8 +557,8 @@
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
background: rgb(var(--color-surface-gray-2));
color: rgb(var(--color-ink-gray-5));
font-size: 12px;
font-weight: 500;
}
@@ -574,8 +566,8 @@
/* ===== EMPTY CARD ===== */
.empty-card {
grid-column: 1 / -1;
background: #fff;
border: 1px solid #e5e7eb;
background: rgb(var(--color-surface-white));
border: 1px solid rgb(var(--color-outline-gray-2));
border-radius: 8px;
overflow: hidden;
}
@@ -599,19 +591,19 @@
.empty-title {
font-size: 20px;
font-weight: 700;
color: #111827;
color: rgb(var(--color-ink-gray-9));
margin-bottom: 8px;
}
.empty-desc {
font-size: 14px;
color: #6b7280;
color: rgb(var(--color-ink-gray-5));
line-height: 1.6;
margin-bottom: 20px;
}
.empty-benefits {
text-align: left;
background: #fafafa;
border: 1px solid #f3f4f6;
background: rgb(var(--color-surface-gray-1));
border: 1px solid rgb(var(--color-outline-gray-1));
border-radius: 6px;
padding: 14px 16px;
margin-bottom: 24px;
@@ -621,7 +613,7 @@
align-items: center;
gap: 10px;
font-size: 13px;
color: #374151;
color: rgb(var(--color-ink-gray-7));
padding: 5px 0;
}
.benefit-dot {
@@ -637,27 +629,27 @@
margin-top: 0;
}
.edit-card {
background: #fff;
border: 1px solid #e5e7eb;
background: rgb(var(--color-surface-white));
border: 1px solid rgb(var(--color-outline-gray-2));
border-radius: 8px;
overflow: hidden;
}
.edit-section-title {
font-size: 14px;
font-weight: 600;
color: #374151;
color: rgb(var(--color-ink-gray-7));
padding-bottom: 8px;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid rgb(var(--color-outline-gray-1));
margin-bottom: 4px;
}
.edit-input {
width: 100%;
border: 1px solid #d1d5db;
border: 1px solid rgb(var(--color-outline-gray-3));
border-radius: 6px;
padding: 8px 12px;
font-size: 14px;
color: #111827;
background: #fff;
color: rgb(var(--color-ink-gray-9));
background: rgb(var(--color-surface-white));
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
@@ -667,28 +659,28 @@
}
.dropdown-list {
margin-top: 4px;
border: 1px solid #e5e7eb;
border: 1px solid rgb(var(--color-outline-gray-2));
border-radius: 6px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
background: #fff;
background: rgb(var(--color-surface-white));
max-height: 220px;
overflow-y: auto;
}
.dropdown-item {
padding: 10px 14px;
cursor: pointer;
border-bottom: 1px solid #f9fafb;
border-bottom: 1px solid rgb(var(--color-outline-gray-1));
transition: background 0.1s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background: #fff7ed; }
.dropdown-item:hover { background: rgb(var(--color-surface-amber-1)); }
/* ===== SCROLLBAR ===== */
.dropdown-list::-webkit-scrollbar { width: 5px; }
.dropdown-list::-webkit-scrollbar-track { background: #f9fafb; }
.dropdown-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.dropdown-list::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.dropdown-list::-webkit-scrollbar-track { background: rgb(var(--color-surface-gray-1)); }
.dropdown-list::-webkit-scrollbar-thumb { background: rgb(var(--color-outline-gray-3)); border-radius: 3px; }
.dropdown-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-outline-gray-4)); }
</style>
<script setup>