diff --git a/docslib/templates/client.css b/docslib/templates/client.css index f201762..3808039 100644 --- a/docslib/templates/client.css +++ b/docslib/templates/client.css @@ -63,7 +63,7 @@ button { color: inherit; } .tree-number { flex: 0 0 auto; color: var(--muted); } .tree-title { min-width: 0; overflow-wrap: anywhere; } -.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; } +.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; } .desktop-toolbar { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; } .desktop-search-shell { position: relative; width: min(320px, 30vw); max-width: min(320px, 30vw); flex: 0 1 min(320px, 30vw); transition: max-width .24s ease, opacity .16s ease, transform .24s ease; } .search-control { display: flex; width: 100%; height: 44px; align-items: center; border-radius: 24px; background: var(--control); } diff --git a/docslib/templates/client.js b/docslib/templates/client.js index 9c95573..7be72f4 100644 --- a/docslib/templates/client.js +++ b/docslib/templates/client.js @@ -39,6 +39,7 @@ let placeholderText = ""; let placeholderTarget = ""; let placeholderIndex = 0; + let placeholderDots = 0; let placeholderPhase = "typing"; let lastPlaceholderPage = -1; @@ -330,8 +331,8 @@ return words.slice(0, Math.max(1, count)).join(" "); } - function applyPlaceholder(value, complete = false) { - const display = value ? `${value}${complete ? "…" : ""}` : ""; + function applyPlaceholder(value, dots = 0) { + const display = value ? `${value}${".".repeat(dots)}` : ""; elements.desktopSearchInput.placeholder = display; elements.mobileSearchInput.placeholder = display; } @@ -347,14 +348,22 @@ if (placeholderPhase === "typing") { placeholderIndex += 1; placeholderText = placeholderTarget.slice(0, placeholderIndex); - const complete = placeholderIndex >= placeholderTarget.length; - applyPlaceholder(placeholderText, complete); + applyPlaceholder(placeholderText); if (placeholderIndex >= placeholderTarget.length) { + placeholderPhase = "dots"; + placeholderTimer = setTimeout(placeholderTick, 180); + } else placeholderTimer = setTimeout(placeholderTick, 95 + Math.random() * 90); + } else if (placeholderPhase === "dots") { + placeholderDots += 1; + applyPlaceholder(placeholderText, placeholderDots); + if (placeholderDots >= 3) { placeholderPhase = "waiting"; - placeholderTimer = setTimeout(placeholderTick, 10000); - } else placeholderTimer = setTimeout(placeholderTick, 130 + Math.random() * 120); + placeholderTimer = setTimeout(placeholderTick, 5000); + } else placeholderTimer = setTimeout(placeholderTick, 220); } else if (placeholderPhase === "waiting") { placeholderPhase = "erasing"; + placeholderDots = 0; + applyPlaceholder(placeholderText); placeholderTimer = setTimeout(placeholderTick, 180); } else { placeholderIndex -= 1; @@ -373,9 +382,10 @@ placeholderText = ""; placeholderTarget = choosePlaceholder(); placeholderIndex = 0; + placeholderDots = 0; placeholderPhase = "typing"; if (reducedMotion.matches) { - applyPlaceholder(placeholderTarget, true); + applyPlaceholder(placeholderTarget, 3); return; } placeholderTimer = setTimeout(placeholderTick, 500); diff --git a/tests/test_server.py b/tests/test_server.py index 5993a9d..33dc3a8 100644 --- a/tests/test_server.py +++ b/tests/test_server.py @@ -74,6 +74,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path): assert "100vh" not in html assert "html, body { width: 100%; height: 100dvh" in html assert "overflow-y: auto" in html + assert "flex: 1 1 auto; flex-direction: column" in html assert "elements.pageSurface.scrollTo" in html assert "font-family: system-ui; font-size: 16px" in html assert ".glyph-button, .refresh-glyph { font-family: Arial" in html @@ -87,7 +88,8 @@ def test_all_endpoints_and_self_contained_build(tmp_path): assert 'id="mobile-menu-view"' in html assert 'id="mobile-search-view"' in html assert "placeholderTick" in html - assert "setTimeout(placeholderTick, 10000)" in html + assert '".".repeat(dots)' in html + assert "setTimeout(placeholderTick, 5000)" in html assert '.sidebar-header-buttons .header-link:not(.active):first-child' not in html assert "--tree-line: #2c2c2c" in html assert "height: 44px" in html