Skip to content

[Docs] Improve mobile UX #25413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AmjadHD wants to merge 12 commits into
base: devel
Choose a base branch
from
Open

[Docs] Improve mobile UX #25413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f4e5f74
[Docs] Remove horizontal scrolling on mobile
AmjadHD Dec 20, 2025
0eb7b32
Merge branch 'devel' into doc-css-mobile
AmjadHD Jan 5, 2026
c577866
[Docs] Improve mobile UX
AmjadHD Jan 5, 2026
e5b6e13
Hide hrizontal overflow in main
AmjadHD Jan 5, 2026
c61c21d
Merge branch 'devel' into doc-css-mobile
AmjadHD Jan 6, 2026
c22bd52
Merge branch 'devel' into doc-css-mobile
AmjadHD Jan 7, 2026
c3b67be
Merge remote-tracking branch 'upstream/devel' into doc-css-mobile
AmjadHD Jan 9, 2026
93a33b1
progress
AmjadHD Jan 10, 2026
9b3ff3f
Fix CI
AmjadHD Jan 10, 2026
4deacf3
Merge remote-tracking branch 'upstream/devel' into doc-css-mobile
AmjadHD Jan 13, 2026
232ae72
Fix [skip ci]
AmjadHD Jan 13, 2026
785fa2a
Merge branch 'devel' into doc-css-mobile
AmjadHD Jan 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 38 additions & 54 deletions config/nimdoc.cfg
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ split.item.toc = "20"
# after this number of characters

doc.section = """
<div class="section" id="$sectionID">
<section id="$sectionID">
<h1><a class="toc-backref" href="#$sectionID">$sectionTitle</a></h1>
<dl class="item">
$content
</dl>
</div>
</section>
"""

# Just a single item in the TOC (e.g. imports, exports)
Expand Down Expand Up @@ -118,9 +118,9 @@ doc.toc = """
"""

doc.body_toc_groupsection = """
<div class="search-groupby">
Group by:
<select onchange="groupBy(this.value)">
<div id="search-groupby">
<label for="groupBy">Group by</label>
<select id="groupBy" onchange="groupBy(this.value)">
<option value="section">Section</option>
<option value="type">Type</option>
</select>
Expand All @@ -133,17 +133,9 @@ doc.body_toc_groupsection = """
# As a user, tweak the block below instead.
# You can add your own global-links entries
doc.body_toc_group = """
<div class="row">
<div class="three columns">
<div class="theme-select-wrapper">
<label for="theme-select">Theme:&nbsp;</label>
<select id="theme-select" onchange="setTheme(this.value)">
<option value="auto">🌗 Match OS</option>
<option value="dark">🌑 Dark</option>
<option value="light">🌕 Light</option>
</select>
</div>
<div id="global-links">
<div id="content">
<aside id="sidebar">
<nav id="global-links">
<ul class="simple-boot">
<li><a href="manual.html">Manual</a></li>
<li><a href="lib.html">Standard library</a></li>
Expand All @@ -152,61 +144,48 @@ doc.body_toc_group = """
<li><a href="https://nim-lang.github.io/fusion/theindex.html">Fusion docs</a></li>
<li><a href="https://nim-lang.github.io/Nim/">devel</a>, <a href="https://nim-lang.org/documentation.html">stable</a></li>
</ul>
</div>
<div id="searchInputDiv">
Search: <input type="search" id="searchInput"
oninput="search()" />
</div>
</nav>
$body_toc_groupsection
$tableofcontents
</div>
<div class="nine columns" id="content">
</aside>
<main>
<h1 id="title">$title</h1>$subtitle
$seeSrc
<div id="tocRoot"></div>
$deprecationMsg
<p class="module-desc">$moduledesc</p>
$content
</div>
</main>
</div>
"""

@else
# keep in sink with other `doc.body_toc_group` or better, refactor
doc.body_toc_group = """
<div class="row">
<div class="three columns">
<div class="theme-select-wrapper">
<label for="theme-select">Theme:&nbsp;</label>
<select id="theme-select" onchange="setTheme(this.value)">
<option value="auto">🌗 Match OS</option>
<option value="dark">🌑 Dark</option>
<option value="light">🌕 Light</option>
</select>
</div>
<div id="global-links">
<div id="content">
<aside id="sidebar">
<nav id="global-links">
<ul class="simple">
<li><a id="indexLink" href="$theindexhref">Index</a></li>
</ul>
</div>
<div id="searchInputDiv">
Search: <input type="search" id="searchInput" oninput="search()"/>
</div>
</nav>
<div>
Group by:
<select onchange="groupBy(this.value)">
<label for="groupBy">Group by</label>
<select id="groupBy" onchange="groupBy(this.value)">
<option value="section">Section</option>
<option value="type">Type</option>
</select>
</div>
$tableofcontents
</div>
<div class="nine columns" id="content">
</aside>
<main>
<h1 id="title">$title</h1>$subtitle
$seeSrc
<div id="tocRoot"></div>
$deprecationMsg
<p class="module-desc">$moduledesc</p>
$content
</div>
</main>
</div>
"""
@end
Expand Down Expand Up @@ -247,17 +226,22 @@ doc.file = """<?xml version="1.0" encoding="utf-8" ?>
<script type="text/javascript" src="${dochackjs}?v=$nimVersion"></script>
</head>
<body>
<div class="document" id="documentId">
<div class="container">
<h1 class="title">$title</h1>$subtitle
$content
<div class="twelve-columns footer">
<span class="nim-sprite"></span>
<br>
<small style="color: var(--hint);">Made with Nim. Generated: $date $time UTC</small>
</div>
<header>
<button id="sidebarToggle" aria-label="Toggle Sidebar" title="Toggle Sidebar" aria-controls="sidebar">☰</button>
<div id="navbar-right-elements">
<input type="search" id="searchInput" placeholder="Search…" oninput="search()"/>
<select id="theme-select" aria-label="Change Theme" title="Change Theme" onchange="setTheme(this.value)">
<option aria-label="Match OS" title="Match OS" value="auto">🌗</option>
<option aria-label="Dark" title="Dark" value="dark">🌑</option>
<option aria-label="Light" title="Light" value="light">🌕</option>
</select>
</div>
</div>
</header>
$content
<footer>
<span class="nim-sprite"></span>
<small style="color: var(--hint);">Made with Nim. Generated: $date $time UTC</small>
</footer>
$analytics
</body>
</html>
Expand Down
Loading
Loading