From 46dc18b21c14585737a00ca1ce0d298608050c17 Mon Sep 17 00:00:00 2001 From: Stan Lo Date: Thu, 4 Dec 2025 13:06:55 +0000 Subject: [PATCH 1/4] Redesign main sidebar and make them collapsible --- .../generator/template/aliki/_icons.rhtml | 208 ++++++++++++++++++ .../template/aliki/_sidebar_ancestors.rhtml | 14 +- .../template/aliki/_sidebar_classes.rhtml | 14 +- .../template/aliki/_sidebar_extends.rhtml | 30 ++- .../template/aliki/_sidebar_includes.rhtml | 30 ++- .../template/aliki/_sidebar_methods.rhtml | 44 +++- .../template/aliki/_sidebar_pages.rhtml | 64 +++--- .../template/aliki/_sidebar_sections.rhtml | 22 +- lib/rdoc/generator/template/aliki/class.rhtml | 1 + .../generator/template/aliki/css/rdoc.css | 164 +++++++++++++- lib/rdoc/generator/template/aliki/index.rhtml | 1 + lib/rdoc/generator/template/aliki/page.rhtml | 1 + 12 files changed, 519 insertions(+), 74 deletions(-) create mode 100644 lib/rdoc/generator/template/aliki/_icons.rhtml diff --git a/lib/rdoc/generator/template/aliki/_icons.rhtml b/lib/rdoc/generator/template/aliki/_icons.rhtml new file mode 100644 index 0000000000..9c11a4a120 --- /dev/null +++ b/lib/rdoc/generator/template/aliki/_icons.rhtml @@ -0,0 +1,208 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + C + + + + + + + + + + I + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml index 497b4a669a..e598b25160 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_ancestors.rhtml @@ -1,6 +1,16 @@ <%- if klass.type == 'class' && (ancestors = klass.super_classes).any? %> <%- end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml index d33ecd43f7..11ff53e1de 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_classes.rhtml @@ -1,5 +1,15 @@ diff --git a/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml index d6ce231f03..1544b83778 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_extends.rhtml @@ -1,15 +1,25 @@ <%- unless klass.extends.empty? then %> <%- end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml index cc2255f861..3a293da0d3 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_includes.rhtml @@ -1,15 +1,25 @@ <%- unless klass.includes.empty? then %> <%- end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml index 77b361bed1..443aba37eb 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_methods.rhtml @@ -1,21 +1,41 @@ <% if (class_methods = klass.class_method_list.sort).any? %>
-

Class Methods

- +
+ + + + + Class Methods + + + + +
    + <%- class_methods.each do |meth| %> +
  • class="calls-super" <%- end %>><%= h meth.name -%>
    • + <%- end %> +
+
<% end %> <% if (instance_methods = klass.instance_methods.sort).any? %>
-

Instance Methods

- +
+ + + + + Instance Methods + + + + +
    + <%- instance_methods.each do |meth| %> +
  • class="calls-super" <%- end %>><%= h meth.name -%>
    • + <%- end %> +
+
<% end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml index 2ab60e8552..3295fdabcd 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_pages.rhtml @@ -4,34 +4,44 @@ <%- end %> <%- unless simple_files.empty? then %> <%- end %> diff --git a/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml b/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml index b275657c8e..9ff56e6f60 100644 --- a/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml +++ b/lib/rdoc/generator/template/aliki/_sidebar_sections.rhtml @@ -1,11 +1,21 @@ <%- unless klass.sections.length == 1 then %> <%- end %> diff --git a/lib/rdoc/generator/template/aliki/class.rhtml b/lib/rdoc/generator/template/aliki/class.rhtml index 9bdaa626dc..a190ff9659 100644 --- a/lib/rdoc/generator/template/aliki/class.rhtml +++ b/lib/rdoc/generator/template/aliki/class.rhtml @@ -1,4 +1,5 @@ +<%= render '_icons.rhtml' %> <%= render '_header.rhtml' %> <%= render '_sidebar_toggle.rhtml' %> diff --git a/lib/rdoc/generator/template/aliki/css/rdoc.css b/lib/rdoc/generator/template/aliki/css/rdoc.css index a059160351..92118b6307 100644 --- a/lib/rdoc/generator/template/aliki/css/rdoc.css +++ b/lib/rdoc/generator/template/aliki/css/rdoc.css @@ -146,8 +146,8 @@ --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%); /* Layout Dimensions */ - --layout-sidebar-width: 280px; - --layout-sidebar-width-min: 240px; + --layout-sidebar-width: 300px; + --layout-sidebar-width-min: 300px; --layout-sidebar-width-max: 15%; --layout-toc-width-min: 240px; --layout-toc-width-max: 18%; @@ -228,13 +228,13 @@ body { /* Grid layout with header, sidebar, main, and footer */ display: grid; - grid-template: "header header" var(--layout-header-height) "nav main" 1fr "nav footer" auto / minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr; + grid-template: "header header" var(--layout-header-height) "nav main" 1fr "nav footer" auto / var(--layout-sidebar-width) 1fr; min-height: 100vh; } /* Three-column layout when TOC is present */ body.has-toc { - grid-template: "header header header" var(--layout-header-height) "nav main toc" 1fr "nav footer toc" auto / minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr minmax(var(--layout-toc-width-min), var(--layout-toc-width-max)); + grid-template: "header header header" var(--layout-header-height) "nav main toc" 1fr "nav footer toc" auto / var(--layout-sidebar-width) 1fr minmax(var(--layout-toc-width-min), var(--layout-toc-width-max)); min-height: 100vh; } @@ -1333,7 +1333,7 @@ aside.table-of-contents .toc-list > .toc-h3 { } body.has-toc { - grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr; + grid-template-columns: var(--layout-sidebar-width) 1fr; grid-template-areas: "header header" "nav main" @@ -1620,3 +1620,157 @@ header.top-navbar #search-results.initially-hidden { header.top-navbar #search-results[aria-expanded="false"] { display: none; } + +/* 12. Collapsible Navigation Sections */ + +/* Remove default h3 styling in nav-sections that have collapsible details */ +nav .nav-section > .nav-section-collapsible { + margin: 0; +} + +nav .nav-section-collapsible { + border: none; +} + +/* Section header (clickable summary) */ +nav .nav-section-header { + display: flex; + align-items: center; + gap: var(--space-3); + padding: var(--space-3) 0; + cursor: pointer; + list-style: none; + user-select: none; + -webkit-user-select: none; + border-bottom: 1px solid var(--color-border-default); + margin-bottom: var(--space-3); + transition: color var(--transition-fast); +} + +nav .nav-section-header::-webkit-details-marker { + display: none; +} + +nav .nav-section-header:hover { + color: var(--color-accent-primary); +} + +/* Section icon */ +nav .nav-section-icon { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + flex-shrink: 0; + color: var(--color-accent-primary); +} + +nav .nav-section-icon svg { + width: 100%; + height: 100%; +} + +/* Section title */ +nav .nav-section-title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + color: inherit; +} + +/* Chevron icon */ +nav .nav-section-chevron { + display: flex; + align-items: center; + justify-content: center; + width: 1rem; + height: 1rem; + flex-shrink: 0; + color: var(--color-text-tertiary); + transition: transform var(--transition-base); +} + +nav .nav-section-chevron svg { + width: 100%; + height: 100%; +} + +/* Rotate chevron when open */ +nav .nav-section-collapsible[open] > .nav-section-header .nav-section-chevron { + transform: rotate(90deg); +} + +/* Override old h2/h3 styles for collapsible sections */ +nav .nav-section-collapsible h2, +nav .nav-section-collapsible h3 { + display: none; +} + +/* Content inside details - smooth animation */ +nav .nav-section-collapsible > ul, +nav .nav-section-collapsible > dl, +nav .nav-section-collapsible > p { + margin-top: 0; +} + +/* List items in collapsible sections - nav-list gets border */ +nav .nav-section-collapsible > .nav-list { + padding-left: var(--space-5); + border-left: 1px solid var(--color-border-subtle); + margin-left: var(--space-3); +} + +/* Nested lists inside nav-list don't get border */ +nav .nav-section-collapsible .nav-list .link-list { + border-left: none; + margin-left: 0; + padding-left: var(--space-4); +} + +/* Nested subsections (details within list items) */ +nav .nav-subsection { + margin: 0; +} + +nav .nav-subsection > summary { + position: relative; + padding-left: var(--space-5); + list-style: none; + cursor: pointer; +} + +nav .nav-subsection > summary::-webkit-details-marker { + display: none; +} + +/* Chevron for subsections */ +nav .nav-subsection > summary::before { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 5px solid var(--color-text-tertiary); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; + transition: transform var(--transition-base); +} + +nav .nav-subsection[open] > summary::before { + transform: translateY(-50%) rotate(90deg); +} + +/* Remove the old triangle style for nested details inside nav-section-collapsible */ +nav .nav-section-collapsible .nav-subsection > summary::after { + display: none; +} + +/* Nested list styling */ +nav .nav-subsection > ul { + margin-top: var(--space-2); + margin-left: var(--space-3); + padding-left: var(--space-4); + border-left: 1px solid var(--color-border-subtle); +} diff --git a/lib/rdoc/generator/template/aliki/index.rhtml b/lib/rdoc/generator/template/aliki/index.rhtml index b86154a33e..12ac5a2962 100644 --- a/lib/rdoc/generator/template/aliki/index.rhtml +++ b/lib/rdoc/generator/template/aliki/index.rhtml @@ -1,4 +1,5 @@ +<%= render '_icons.rhtml' %> <%= render '_header.rhtml' %> <%= render '_sidebar_toggle.rhtml' %> diff --git a/lib/rdoc/generator/template/aliki/page.rhtml b/lib/rdoc/generator/template/aliki/page.rhtml index f4a752fe6e..3e19f1c3e6 100644 --- a/lib/rdoc/generator/template/aliki/page.rhtml +++ b/lib/rdoc/generator/template/aliki/page.rhtml @@ -1,4 +1,5 @@ +<%= render '_icons.rhtml' %> <%= render '_header.rhtml' %> <%= render '_sidebar_toggle.rhtml' %> From c3387f5f126f79ffde064bab5941591d48c2295b Mon Sep 17 00:00:00 2001 From: Stan Lo Date: Thu, 4 Dec 2025 15:11:14 +0000 Subject: [PATCH 2/4] Improve nested dropdown's style and animation --- lib/rdoc/generator/darkfish.rb | 2 +- .../template/aliki/_sidebar_pages.rhtml | 72 +++-- .../generator/template/aliki/css/rdoc.css | 303 ++++++++---------- 3 files changed, 180 insertions(+), 197 deletions(-) diff --git a/lib/rdoc/generator/darkfish.rb b/lib/rdoc/generator/darkfish.rb index 7fec36500f..a8cb6c079c 100644 --- a/lib/rdoc/generator/darkfish.rb +++ b/lib/rdoc/generator/darkfish.rb @@ -764,7 +764,7 @@ def generate_class_index_content(classes, rel_prefix) end def traverse_classes(klasses, grouped_classes, rel_prefix, solo = false) - content = +'