fix: footer links on all pages and scroll behavior

- Render footer lesson links in initializeModules() for all pages
- Fix scroll to top using requestAnimationFrame for proper timing
- Move dice button to left of editor tools

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
2026-01-16 04:50:47 +01:00
parent 68368560cb
commit d6ff5edf5c
2 changed files with 10 additions and 3 deletions

View File

@@ -404,6 +404,9 @@ function initializeModules() {
// Use the new renderModuleList function with both callbacks // Use the new renderModuleList function with both callbacks
renderModuleList(elements.moduleList, modules, selectModule, selectLesson); renderModuleList(elements.moduleList, modules, selectModule, selectLesson);
// Render footer lesson links (for all pages)
renderFooterLessonLinks();
// Handle route (home, section, or lesson) // Handle route (home, section, or lesson)
handleRoute(false); handleRoute(false);
@@ -2031,7 +2034,6 @@ function updateSectionColor(sectionId) {
function showLandingPage() { function showLandingPage() {
hideAllPages(); hideAllPages();
elements.landingPage?.classList.remove("hidden"); elements.landingPage?.classList.remove("hidden");
window.scrollTo(0, 0);
// Reset section color on landing page // Reset section color on landing page
updateSectionColor(null); updateSectionColor(null);
@@ -2041,6 +2043,9 @@ function showLandingPage() {
// Render footer lesson links // Render footer lesson links
renderFooterLessonLinks(); renderFooterLessonLinks();
// Scroll to top after content is rendered
requestAnimationFrame(() => window.scrollTo(0, 0));
} }
/** /**
@@ -2166,7 +2171,6 @@ function showSectionPage(sectionId) {
function showReferencePage(refId) { function showReferencePage(refId) {
hideAllPages(); hideAllPages();
elements.referencePage?.classList.remove("hidden"); elements.referencePage?.classList.remove("hidden");
window.scrollTo(0, 0);
// Default to CSS if no refId // Default to CSS if no refId
const activeRef = refId || "css"; const activeRef = refId || "css";
@@ -2194,6 +2198,9 @@ function showReferencePage(refId) {
} else if (elements.referenceBody) { } else if (elements.referenceBody) {
elements.referenceBody.innerHTML = `<p>Reference for "${activeRef}" coming soon...</p>`; elements.referenceBody.innerHTML = `<p>Reference for "${activeRef}" coming soon...</p>`;
} }
// Scroll to top after content is rendered
requestAnimationFrame(() => window.scrollTo(0, 0));
} }
/** /**

View File

@@ -342,6 +342,7 @@
<label for="code-input" class="editor-label" data-i18n="editorLabel">CSS Editor</label> <label for="code-input" class="editor-label" data-i18n="editorLabel">CSS Editor</label>
<div class="editor-actions"> <div class="editor-actions">
<div class="editor-tools"> <div class="editor-tools">
<button id="random-template-btn" class="btn btn-icon hidden" title="Load random template"><img src="./dice.svg" alt="" /></button>
<button id="undo-btn" class="btn btn-icon" data-i18n-title="undoTitle" title="Undo (Ctrl+Z)"></button> <button id="undo-btn" class="btn btn-icon" data-i18n-title="undoTitle" title="Undo (Ctrl+Z)"></button>
<button id="redo-btn" class="btn btn-icon" data-i18n-title="redoTitle" title="Redo (Ctrl+Shift+Z)"></button> <button id="redo-btn" class="btn btn-icon" data-i18n-title="redoTitle" title="Redo (Ctrl+Shift+Z)"></button>
<button <button
@@ -352,7 +353,6 @@
> >
</button> </button>
<button id="random-template-btn" class="btn btn-icon hidden" title="Load random template"><img src="./dice.svg" alt="" /></button>
</div> </div>
<button id="run-btn" class="btn btn-run"><img src="./gear.svg" alt="" /><span data-i18n="run">Run</span></button> <button id="run-btn" class="btn btn-run"><img src="./gear.svg" alt="" /><span data-i18n="run">Run</span></button>
</div> </div>