Skip to content

Commit 755a2cf

Browse files
MatheusRichMatheusRich
authored
Add support for mobile screen sizes on Darkfish (ruby#1025)
* Add support for mobile screen sizes on Darkfish This adds support for reading the Darkfish-generated docs in mobile devices. I tried to keep the changes minimal, and the current layout was mostly preserved. The most notable change is the navigation sidebar, which is now hidden by default on "small screens" (everything below 1024px). It can be toggled by the button on the top left corner. This button implements the ARIA pattern for a [disclosure widget]. The icon for the button was taken from [Iconoir], which is licensed under the MIT license. The design and some of the implementation were loosely inspired by the [Elixir lang docs]. [disclosure widget]: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/ [Iconoir]: https://iconoir.com/ [Elixir docs]: https://hexdocs.pm/elixir/1.15.2/Kernel.html * Make sidebar fixed-width * Use U+2630 as sidebar toggle icon
1 parent ffe5583 commit 755a2cf

File tree

10 files changed

+106
-21
lines changed

10 files changed

+106
-21
lines changed

‎lib/rdoc/generator/template/darkfish/_head.rhtml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<meta charset="<%= @options.charset %>">
2+
<meta name="viewport" content="width=device-width, initial-scale=1" />
23

34
<title><%= h @title %></title>
45

‎lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation">
2+
<span aria-hidden>☰</span>
3+
</button>

‎lib/rdoc/generator/template/darkfish/class.rhtml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<body id="top" role="document" class="<%= klass.type %>">
2-
<nav role="navigation">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
35
<div id="project-navigation">
46
<%= render '_sidebar_navigation.rhtml' %>
57
<%= render '_sidebar_search.rhtml' %>

‎lib/rdoc/generator/template/darkfish/css/rdoc.css‎

Lines changed: 61 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ body {
1919
font-weight: 300;
2020

2121
/* Layout */
22-
display: grid;
23-
grid-template-columns: auto 1fr;
22+
display: flex;
23+
flex-wrap: wrap;
2424
}
2525

2626
body > :last-child {
27-
grid-column: 1 / 3;
27+
width: 100%;
2828
}
2929

3030
h1 span,
@@ -203,24 +203,38 @@ nav {
203203
font-family: Helvetica, sans-serif;
204204
font-size: 14px;
205205
border-right: 1px solid #ccc;
206-
position: sticky;
206+
position: fixed;
207207
top: 0;
208208
overflow: auto;
209+
z-index: 10;
209210

210211
/* Layout */
211-
width: 260px; /* fallback */
212-
width: max(50px, 20vw);
213-
min-width: 50px;
214-
max-width: 80vw;
215-
height: calc(100vh - 100px); /* reduce the footer height */
216-
resize: horizontal;
212+
width: 300px;
213+
min-height: 100vh;
214+
background: white;
215+
}
216+
217+
@media (min-width: 1024px) {
218+
nav {
219+
min-height: unset;
220+
height: calc(100vh - 100px); /* reduce the footer height */
221+
}
217222
}
218223

219224
main {
220225
display: block;
221-
margin: 1em;
226+
margin: 3em 1em 1em;
222227
min-width: 340px;
223228
font-size: 16px;
229+
width: 100%;
230+
max-width: 64em;
231+
}
232+
233+
@media (min-width: 1024px) {
234+
main {
235+
margin-left: auto;
236+
margin-right: auto;
237+
}
224238
}
225239

226240
main h1,
@@ -232,8 +246,10 @@ main h6 {
232246
font-family: Helvetica, sans-serif;
233247
}
234248

235-
.table-of-contents main {
236-
margin-left: 2em;
249+
@media (min-width: 1024px) {
250+
.table-of-contents main {
251+
margin-left: 20em;
252+
}
237253
}
238254

239255
#validator-badges {
@@ -280,6 +296,38 @@ nav p {
280296
list-style: none;
281297
}
282298

299+
.navigation-toggle {
300+
position: fixed;
301+
left: 4px;
302+
z-index: 100;
303+
304+
background: transparent;
305+
border: none;
306+
cursor: pointer;
307+
padding: 4px;
308+
font-size: 24px;
309+
}
310+
.navigation-toggle[aria-expanded="true"] {
311+
left: 260px;
312+
}
313+
314+
/* Adds a suble gradient to help the toggle stand out from the background */
315+
.navigation-toggle::before {
316+
content: "";
317+
background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
318+
display: block;
319+
z-index: -1;
320+
pointer-events: none;
321+
position: fixed;
322+
top: 0;
323+
height: 50px;
324+
width: 100vw;
325+
}
326+
327+
.navigation-toggle[aria-expanded="true"]::before {
328+
height: 0;
329+
}
330+
283331
#project-navigation .nav-section {
284332
margin: 0;
285333
border-top: 0;
@@ -684,4 +732,3 @@ pre {
684732
}
685733

686734
/* @end */
687-

‎lib/rdoc/generator/template/darkfish/index.rhtml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<body id="top" role="document" class="file">
2-
<nav role="navigation">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
35
<div id="project-navigation">
46
<%= render '_sidebar_navigation.rhtml' %>
57

‎lib/rdoc/generator/template/darkfish/js/darkfish.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,25 @@ function hookFocus() {
9090
});
9191
}
9292

93+
function hookSidebar() {
94+
var navigation = document.querySelector('#navigation');
95+
var navigationToggle = document.querySelector('#navigation-toggle');
96+
97+
navigationToggle.addEventListener('click', function() {
98+
navigation.hidden = !navigation.hidden;
99+
navigationToggle.ariaExpanded = navigationToggle.ariaExpanded !== 'true';
100+
});
101+
102+
var isSmallViewport = window.matchMedia("(max-width: 1024px)").matches;
103+
if (isSmallViewport) {
104+
navigation.hidden = true;
105+
navigationToggle.ariaExpanded = false;
106+
}
107+
}
108+
93109
document.addEventListener('DOMContentLoaded', function() {
94110
hookSourceViews();
95111
hookSearch();
96112
hookFocus();
113+
hookSidebar();
97114
});

‎lib/rdoc/generator/template/darkfish/page.rhtml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<body id="top" role="document" class="file">
2-
<nav role="navigation">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
35
<div id="project-navigation">
46
<%= render '_sidebar_navigation.rhtml' %>
57
<%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
1517
<main role="main" aria-label="Page <%=h file.full_name%>">
1618
<%= file.description %>
1719
</main>
18-

‎lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<body role="document">
2-
<nav role="navigation">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
35
<%= render '_sidebar_navigation.rhtml' %>
46

57
<%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
1517

1618
<p><%= message %>
1719
</main>
18-

‎lib/rdoc/generator/template/darkfish/servlet_root.rhtml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<body role="document">
2-
<nav role="navigation">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
35
<div id="project-navigation">
46
<div id="home-section" class="nav-section">
57
<h2>

‎lib/rdoc/generator/template/darkfish/table_of_contents.rhtml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
<body id="top" class="table-of-contents">
2+
<%= render '_sidebar_toggle.rhtml' %>
3+
4+
<nav id="navigation" role="navigation">
5+
<div id="project-navigation">
6+
<%= render '_sidebar_navigation.rhtml' %>
7+
8+
<%= render '_sidebar_search.rhtml' %>
9+
</div>
10+
</nav>
211
<main role="main">
312
<h1 class="class"><%= h @title %></h1>
413

0 commit comments

Comments
 (0)