john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(docs): mobile UX improvements for docs page

Browse source 
On mobile (<1024px), skip auto-loading first document so users see the
sidebar category browser. Add sticky blue navigation bar showing current
document title. Expand all categories by default on mobile initial view.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
TheFlow 2026-02-23 07:44:25 +13:00
parent 8323cca70a
commit 7e0938f841
1 changed files with 33 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
public/js/docs-app.js
View file

@ -272,10 +272,10 @@ function updatePageUI(lang = currentLanguage) {
} }
}); });
// Update Back to Documents button // Update Back to Documents bar label
const backBtn = document.querySelector('#back-to-docs-btn span'); const backLabel = document.querySelector('#back-to-docs-btn [data-back-label]');
if (backBtn) { if (backLabel) {
backBtn.textContent = t.backToDocuments; backLabel.textContent = t.documentsHeading;
} }
// Update Select Document placeholder (if visible) // Update Select Document placeholder (if visible)
@ -706,11 +706,15 @@ async function loadDocuments() {
const t = getUITranslations(currentLanguage); const t = getUITranslations(currentLanguage);
// On mobile with no ?doc= param, expand all categories for browsing
const isMobileView = window.innerWidth < 1024;
const noDocParam = !new URLSearchParams(window.location.search).get('doc');
sortedCategories.forEach(([categoryId, category]) => { sortedCategories.forEach(([categoryId, category]) => {
const docs = grouped[categoryId] || []; const docs = grouped[categoryId] || [];
if (docs.length === 0) return; if (docs.length === 0) return;
const isCollapsed = category.collapsed || false; const isCollapsed = (isMobileView && noDocParam) ? false : (category.collapsed || false);
const categoryLabel = t.categories[categoryId] || categoryId; const categoryLabel = t.categories[categoryId] || categoryId;
// Category header // Category header
@ -838,10 +842,12 @@ async function loadDocuments() {
} }
// Priority 3: Default behavior // Priority 3: Default behavior
else { else {
// Default: Auto-load first document in "Getting Started" category (order: 1) // On mobile, show sidebar (don't auto-load) so user can browse categories
const isMobile = window.innerWidth < 1024;
if (!isMobile) {
// Desktop: auto-load first Getting Started doc as before
const gettingStartedDocs = grouped['getting-started'] || []; const gettingStartedDocs = grouped['getting-started'] || [];
if (gettingStartedDocs.length > 0) { if (gettingStartedDocs.length > 0) {
// Load the first document (order: 1) if available
const firstDoc = gettingStartedDocs.find(d => d.order === 1); const firstDoc = gettingStartedDocs.find(d => d.order === 1);
if (firstDoc) { if (firstDoc) {
loadDocument(firstDoc.slug); loadDocument(firstDoc.slug);
@ -849,13 +855,14 @@ async function loadDocuments() {
loadDocument(gettingStartedDocs[0].slug); loadDocument(gettingStartedDocs[0].slug);
} }
} else if (documents.length > 0) { } else if (documents.length > 0) {
// Fallback to first available document in any category
const firstCategory = sortedCategories.find(([catId]) => grouped[catId] && grouped[catId].length > 0); const firstCategory = sortedCategories.find(([catId]) => grouped[catId] && grouped[catId].length > 0);
if (firstCategory) { if (firstCategory) {
loadDocument(grouped[firstCategory[0]][0].slug); loadDocument(grouped[firstCategory[0]][0].slug);
} }
} }
} }
// Mobile: sidebar remains visible, user taps to choose a document
}
} catch (error) { } catch (error) {
console.error('Error loading documents:', error); console.error('Error loading documents:', error);
document.getElementById('document-list').innerHTML = document.getElementById('document-list').innerHTML =
@ -1012,6 +1019,12 @@ async function loadDocument(slug, lang = null) {
// Mobile navigation: Add document-active class to show document view // Mobile navigation: Add document-active class to show document view
document.body.classList.add('document-active'); document.body.classList.add('document-active');
// Update mobile sticky bar with current document title
const mobileDocTitle = document.getElementById('mobile-doc-title');
if (mobileDocTitle && currentDocument) {
mobileDocTitle.textContent = currentDocument.title;
}
// Scroll to top // Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' }); window.scrollTo({ top: 0, behavior: 'smooth' });