From d5094407f2afc1f0a8b4b6ef2e8955bcbc120951 Mon Sep 17 00:00:00 2001
From: Matheus Richard <matheusrichardt@gmail.com>
Date: Wed, 5 Jul 2023 19:50:15 -0300
Subject: [PATCH 1/3] 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
---
 .../generator/template/darkfish/_head.rhtml   |  1 +
 .../template/darkfish/_sidebar_toggle.rhtml   | 26 +++++++
 .../generator/template/darkfish/class.rhtml   |  4 +-
 .../generator/template/darkfish/css/rdoc.css  | 76 +++++++++++++++----
 .../generator/template/darkfish/index.rhtml   |  4 +-
 .../template/darkfish/js/darkfish.js          | 17 +++++
 .../generator/template/darkfish/page.rhtml    |  5 +-
 .../template/darkfish/servlet_not_found.rhtml |  5 +-
 .../template/darkfish/servlet_root.rhtml      |  4 +-
 .../template/darkfish/table_of_contents.rhtml |  9 +++
 10 files changed, 131 insertions(+), 20 deletions(-)
 create mode 100644 lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml

diff --git a/lib/rdoc/generator/template/darkfish/_head.rhtml b/lib/rdoc/generator/template/darkfish/_head.rhtml
index d5aed3e9ef..69649ad3b5 100644
--- a/lib/rdoc/generator/template/darkfish/_head.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_head.rhtml
@@ -1,4 +1,5 @@
 <meta charset="<%= @options.charset %>">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <title><%= h @title %></title>
 
diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
new file mode 100644
index 0000000000..148b369b51
--- /dev/null
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
@@ -0,0 +1,26 @@
+<button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation">
+  <!--
+    Copyright (c) 2021 Luca Burgio
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+  -->
+  <svg width="20px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
+    <path d="M3 5h18M3 12h18M3 19h18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+  </svg>
+</button>
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
index d6510336df..915b2f9c9f 100644
--- a/lib/rdoc/generator/template/darkfish/class.rhtml
+++ b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="<%= klass.type %>">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 2cc55e03b1..5a024eb399 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -19,12 +19,12 @@ body {
   font-weight: 300;
 
   /* Layout */
-  display: grid;
-  grid-template-columns: auto 1fr;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 body > :last-child {
-  grid-column: 1 / 3;
+  width: 100%;
 }
 
 h1 span,
@@ -203,24 +203,40 @@ nav {
   font-family: Helvetica, sans-serif;
   font-size: 14px;
   border-right: 1px solid #ccc;
-  position: sticky;
+  position: fixed;
   top: 0;
   overflow: auto;
+  z-index: 10;
 
   /* Layout */
-  width: 260px; /* fallback */
-  width: max(50px, 20vw);
-  min-width: 50px;
-  max-width: 80vw;
-  height: calc(100vh - 100px); /* reduce the footer height */
+  width: 300px;
+  min-height: 100vh;
+
   resize: horizontal;
+  background: white;
+}
+
+@media (min-width: 1024px) {
+  nav {
+    min-height: unset;
+    height: calc(100vh - 100px); /* reduce the footer height */
+  }
 }
 
 main {
   display: block;
-  margin: 1em;
+  margin: 3em 1em 1em;
   min-width: 340px;
   font-size: 16px;
+  width: 100%;
+  max-width: 64em;
+}
+
+@media (min-width: 1024px) {
+  main {
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
 
 main h1,
@@ -232,8 +248,10 @@ main h6 {
   font-family: Helvetica, sans-serif;
 }
 
-.table-of-contents main {
-  margin-left: 2em;
+@media (min-width: 1024px) {
+  .table-of-contents main {
+    margin-left: 20em;
+  }
 }
 
 #validator-badges {
@@ -280,6 +298,39 @@ nav p {
   list-style: none;
 }
 
+.navigation-toggle {
+  position: fixed;
+  left: 4px;
+  top: 6px;
+  z-index: 100;
+
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin-left: 7px;
+  padding: 4px;
+}
+.navigation-toggle[aria-expanded="true"] {
+  left: 260px;
+}
+
+/* Adds a suble gradient to help the toggle stand out from the background */
+.navigation-toggle::before {
+  content: "";
+  background: linear-gradient(180deg, rgba(250,250,250,1) 40%, rgba(250,250,250,0.8) 70%, rgba(250,250,250,0) 100%);
+  display: block;
+  z-index: -1;
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  height: 50px;
+  width: 100vw;
+}
+
+.navigation-toggle[aria-expanded="true"]::before {
+  height: 0;
+}
+
 #project-navigation .nav-section {
   margin: 0;
   border-top: 0;
@@ -684,4 +735,3 @@ pre {
 }
 
 /* @end */
-
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
index 423e225b68..b3eede6c00 100644
--- a/lib/rdoc/generator/template/darkfish/index.rhtml
+++ b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
 
diff --git a/lib/rdoc/generator/template/darkfish/js/darkfish.js b/lib/rdoc/generator/template/darkfish/js/darkfish.js
index 19a85c54e1..bea0a5f1cb 100644
--- a/lib/rdoc/generator/template/darkfish/js/darkfish.js
+++ b/lib/rdoc/generator/template/darkfish/js/darkfish.js
@@ -90,8 +90,25 @@ function hookFocus() {
   });
 }
 
+function hookSidebar() {
+  var navigation = document.querySelector('#navigation');
+  var navigationToggle = document.querySelector('#navigation-toggle');
+
+  navigationToggle.addEventListener('click', function() {
+    navigation.hidden = !navigation.hidden;
+    navigationToggle.ariaExpanded = navigationToggle.ariaExpanded !== 'true';
+  });
+
+  var isSmallViewport = window.matchMedia("(max-width: 1024px)").matches;
+  if (isSmallViewport) {
+    navigation.hidden = true;
+    navigationToggle.ariaExpanded = false;
+  }
+}
+
 document.addEventListener('DOMContentLoaded', function() {
   hookSourceViews();
   hookSearch();
   hookFocus();
+  hookSidebar();
 });
diff --git a/lib/rdoc/generator/template/darkfish/page.rhtml b/lib/rdoc/generator/template/darkfish/page.rhtml
index 4a6b006bb3..90b9e4ee3b 100644
--- a/lib/rdoc/generator/template/darkfish/page.rhtml
+++ b/lib/rdoc/generator/template/darkfish/page.rhtml
@@ -1,5 +1,7 @@
 <body id="top" role="document" class="file">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <%= render '_sidebar_navigation.rhtml' %>
     <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 <main role="main" aria-label="Page <%=h file.full_name%>">
 <%= file.description %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
index f0841572c3..b30e64eec5 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_not_found.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <%= render '_sidebar_navigation.rhtml' %>
 
   <%= render '_sidebar_search.rhtml' %>
@@ -15,4 +17,3 @@
 
   <p><%= message %>
 </main>
-
diff --git a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
index cab3092b17..859ce2930b 100644
--- a/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
+++ b/lib/rdoc/generator/template/darkfish/servlet_root.rhtml
@@ -1,5 +1,7 @@
 <body role="document">
-<nav role="navigation">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
   <div id="project-navigation">
     <div id="home-section" class="nav-section">
       <h2>
diff --git a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
index 54a376c9e5..5869873775 100644
--- a/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
+++ b/lib/rdoc/generator/template/darkfish/table_of_contents.rhtml
@@ -1,4 +1,13 @@
 <body id="top" class="table-of-contents">
+<%= render '_sidebar_toggle.rhtml' %>
+
+<nav id="navigation" role="navigation">
+  <div id="project-navigation">
+    <%= render '_sidebar_navigation.rhtml' %>
+
+    <%= render '_sidebar_search.rhtml' %>
+  </div>
+</nav>
 <main role="main">
 <h1 class="class"><%= h @title %></h1>
 

From 37e1d3214f96e9e33aeb7ebc11092cdcb9488bda Mon Sep 17 00:00:00 2001
From: Matheus Richard <matheusrichardt@gmail.com>
Date: Thu, 6 Jul 2023 11:14:38 -0300
Subject: [PATCH 2/3] Make sidebar fixed-width

---
 lib/rdoc/generator/template/darkfish/css/rdoc.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 5a024eb399..63208ccc21 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -211,8 +211,6 @@ nav {
   /* Layout */
   width: 300px;
   min-height: 100vh;
-
-  resize: horizontal;
   background: white;
 }
 

From 98f670e0fe55efb42554610cb195551cdd02cbec Mon Sep 17 00:00:00 2001
From: Matheus Richard <matheusrichardt@gmail.com>
Date: Thu, 25 Jul 2024 18:20:49 -0300
Subject: [PATCH 3/3] Use U+2630 as sidebar toggle icon

---
 .../template/darkfish/_sidebar_toggle.rhtml   | 25 +------------------
 .../generator/template/darkfish/css/rdoc.css  |  3 +--
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
index 148b369b51..b51448a8f7 100644
--- a/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
+++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml
@@ -1,26 +1,3 @@
 <button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation">
-  <!--
-    Copyright (c) 2021 Luca Burgio
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE.
-  -->
-  <svg width="20px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000">
-    <path d="M3 5h18M3 12h18M3 19h18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-  </svg>
+  <span aria-hidden>☰</span>
 </button>
diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
index 63208ccc21..00045abb58 100644
--- a/lib/rdoc/generator/template/darkfish/css/rdoc.css
+++ b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -299,14 +299,13 @@ nav p {
 .navigation-toggle {
   position: fixed;
   left: 4px;
-  top: 6px;
   z-index: 100;
 
   background: transparent;
   border: none;
   cursor: pointer;
-  margin-left: 7px;
   padding: 4px;
+  font-size: 24px;
 }
 .navigation-toggle[aria-expanded="true"] {
   left: 260px;