diff options
| author | Stan Lo <[email protected]> | 2024-08-03 11:29:40 +0100 |
|---|---|---|
| committer | Hiroshi SHIBATA <[email protected]> | 2024-08-05 08:27:45 +0800 |
| commit | cbc40bb130fb52f1990ce1fd41e834a5f3fdbcdd (patch) | |
| tree | 56845ee9fb311d5f7fb952c0392eecac93759e5f /lib/rdoc/generator/template | |
| parent | 7d5cb4573d39e5c62058314dcfc73895b4e6dffd (diff) | |
Sync rdoc
Notes
Notes:
Merged: https://github.com/ruby/ruby/pull/11308
Diffstat (limited to 'lib/rdoc/generator/template')
10 files changed, 106 insertions, 21 deletions
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..b51448a8f7 --- /dev/null +++ b/lib/rdoc/generator/template/darkfish/_sidebar_toggle.rhtml @@ -0,0 +1,3 @@ +<button id="navigation-toggle" class="navigation-toggle" aria-label="Toggle sidebar" aria-expanded="true" aria-controls="navigation"> + <span aria-hidden>☰</span> +</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..00045abb58 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,38 @@ 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 */ - resize: horizontal; + width: 300px; + min-height: 100vh; + 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 +246,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 +296,38 @@ nav p { list-style: none; } +.navigation-toggle { + position: fixed; + left: 4px; + z-index: 100; + + background: transparent; + border: none; + cursor: pointer; + padding: 4px; + font-size: 24px; +} +.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 +732,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> |