public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix: header pill shows module name + level, fix RTL checkmark spacing

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-14 17:53:29 +01:00
parent 72362de88b
commit e53233b08c
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.js
View File

@@ -479,7 +479,11 @@ function loadCurrentLesson() {
// Update level indicator // Update level indicator
renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons); renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
renderLevelIndicator(elements.headerLevelPill, engineState.lessonIndex + 1, engineState.totalLessons); // Header pill shows module name + level
if (elements.headerLevelPill && engineState.module) {
const label = t("lessonLabel");
elements.headerLevelPill.innerHTML = `<span class="header-module-name">${engineState.module.title}</span> <span class="header-level">${label} ${engineState.lessonIndex + 1} / ${engineState.totalLessons}</span>`;
}
// Update active lesson in sidebar // Update active lesson in sidebar
updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex); updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);

28
src/main.css
View File

@@ -151,6 +151,15 @@ kbd {
margin-left: var(--spacing-sm); margin-left: var(--spacing-sm);
} }
.header-module-name {
font-weight: 600;
color: var(--text-color);
}
.header-level {
margin-left: 0.5em;
}
.header-left { .header-left {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1652,12 +1661,29 @@ input:checked + .toggle-slider::before {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
/* RTL: Module completed checkmark position (::after) */
[dir="rtl"] .module-header.completed::after {
margin-left: 0;
margin-right: 8px;
}
/* RTL: Lesson checkmark position */ /* RTL: Lesson checkmark position */
[dir="rtl"] .lesson-list-item::before { [dir="rtl"] .lesson-list-item.completed::before {
margin-left: 6px; margin-left: 6px;
margin-right: 0; margin-right: 0;
} }
/* RTL: Header level pill */
[dir="rtl"] .header-level-pill {
margin-left: 0;
margin-right: var(--spacing-sm);
}
[dir="rtl"] .header-level {
margin-left: 0;
margin-right: 0.5em;
}
/* RTL: Toggle switch slider */ /* RTL: Toggle switch slider */
[dir="rtl"] .toggle-slider { [dir="rtl"] .toggle-slider {
margin-right: 0; margin-right: 0;