Fix sidebar scroll and footer display (#1152)

* Set nav's bottom to make it scrollable again * Improve layout and navigation scroll behavior - Ensured the footer is part of the `nav` and sticks to the bottom by default, appearing at the bottom of the scroll when content overflows. - Applied flexbox layout to `nav` and `main` to manage space distribution.
ruby · Aug 12, 2024 · 6abf596 · 6abf596
1 parent d711a2c
commit 6abf596
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/lib/rdoc/generator/darkfish.rb b/lib/rdoc/generator/darkfish.rb
@@ -677,7 +677,6 @@ def assemble_template body_file
     return body if body =~ /<html/
 
     head_file = @template_dir + '_head.rhtml'
-    footer_file = @template_dir + '_footer.rhtml'
 
     <<-TEMPLATE
 <!DOCTYPE html>
@@ -687,8 +686,6 @@ def assemble_template body_file
 #{head_file.read}
 
 #{body}
-
-#{footer_file.read}
     TEMPLATE
   end
 

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -24,7 +24,9 @@ body {
 
   /* Layout */
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
 }
 
 body > :last-child {
@@ -209,16 +211,35 @@ nav {
   border-right: 1px solid #ccc;
   position: fixed;
   top: 0;
-  overflow: auto;
+  bottom: 0;
+  overflow: hidden;
   z-index: 10;
 
   /* Layout */
   width: var(--sidebar-width);
   min-height: 100vh;
   background: white;
+
+  display: flex;
+  flex-direction: column;
+}
+
+nav[hidden] {
+  display: none;
+}
+
+nav #project-metadata {
+  overflow: auto; /* Make the content scrollable */
+  flex: 1; /* Take up remaining space */
+}
+
+nav footer {
+  padding: 1em;
+  border-top: 1px solid #ccc;
 }
 
 main {
+  flex: 1;
   display: block;
   margin: 3em auto 1em;
   padding: 0 1em; /* Add padding to keep space between main content and sidebar/right side of the screen */
@@ -728,8 +749,4 @@ pre {
   font-family: "Source Code Pro", Monaco, monospace;
 }
 
-footer {
-  z-index: 20;
-}
-
 /* @end */
diff --git a/lib/rdoc/generator/template/darkfish/index.rhtml b/lib/rdoc/generator/template/darkfish/index.rhtml
@@ -12,6 +12,8 @@
     <%= render '_sidebar_pages.rhtml' %>
     <%= render '_sidebar_classes.rhtml' %>
   </div>
+
+  <%= render '_footer.rhtml' %>
 </nav>
 
 <main role="main">