From 755a2cf081e265b3edeee42d8d8bf92f34e8ac72 Mon Sep 17 00:00:00 2001 From: Matheus Richard Date: Sat, 3 Aug 2024 07:21:22 -0300 Subject: [PATCH] Add support for mobile screen sizes on Darkfish (#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 --- .../generator/template/darkfish/_head.rhtml | 1 + .../template/darkfish/_sidebar_toggle.rhtml | 3 + .../generator/template/darkfish/class.rhtml | 4 +- .../generator/template/darkfish/css/rdoc.css | 75 +++++++++++++++---- .../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, 106 insertions(+), 21 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 @@ + <%= h @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..b51448a8f7 --- /dev/null +++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml @@ -0,0 +1,3 @@ + 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 @@ -