Move file links to the footer

For top-level modules, like ActiveRecord the huge list of included files is very obtrusive. By moving the files to the bottom more important content is shown first. To get the footer to stick to the bottom on empty/sparse pages, css-grid is introduced. Co-authored: Keith Gable <[email protected]>
zzak · Apr 2, 2023 · 617ffe2 · 617ffe2
1 parent 2452363
commit 617ffe2
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 21 deletions.
diff --git a/lib/rdoc/generator/template/rails/class.rhtml b/lib/rdoc/generator/template/rails/class.rhtml
@@ -40,11 +40,6 @@
                 </span>
             <% end %>
         </h2>
-        <ul class="files">
-            <% klass.in_files.each do |file| %>
-            <li><a href="<%= "#{rel_prefix}/#{h file.path}" %>"><%= h file.absolute_name %></a></li>
-            <% end  %>
-        </ul>
         <% if ENV['HORO_BADGE_VERSION'] %>
             <div id="version-badge"><%= ENV['HORO_BADGE_VERSION'] %></div>
         <% end %>
@@ -53,5 +48,18 @@
     <main id="bodyContent">
         <%= include_template '_context.rhtml', {:context => klass, :rel_prefix => rel_prefix} %>
     </main>
+
+    <footer>
+        <div id="footerContent">
+            <details>
+                <summary class="sectiontitle">Appears in</summary>
+                <ul class="files">
+                    <% klass.in_files.each do |file| %>
+                    <li><a href="<%= "#{rel_prefix}/#{h file.path}" %>"><%= h file.absolute_name %></a></li>
+                    <% end  %>
+                </ul>
+            </details>
+        </div>
+    </footer>
   </body>
 </html>
diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css
@@ -1,14 +1,47 @@
+html {
+  height: 100%;
+}
 body {
   font-family: "Helvetica Neue", Arial, sans-serif;
   background: #FFF;
   color: #3B3B3B;
   margin: 0px;
   font-size: 15px;
   line-height: 1.25em;
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: min-content min-content auto min-content;
+}
+
+nav {
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+
+div.banner {
+  grid-row-start: 2;
+  grid-row-end: 3;
+}
+
+#bodyContent {
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+
+footer {
+  grid-row-start: 4;
+  grid-row-end: 5;
+}
+
+#footerContent {
+  margin: 2em;
+  margin-left: 3.5em;
+  margin-right: 3.5em;
+  max-width: 980px;
 }
 
 @media (min-width: 40em) {
-  .banner, #bodyContent {
+  .banner, #bodyContent, footer {
     margin-left: 300px;
   }
 }
@@ -140,20 +173,6 @@ ol li
     color: #CCC;
 }
 
-.banner ul
-{
-    margin-top: 0.3em;
-    margin-bottom: 0;
-    font-size: 0.85em;
-}
-
-.banner li
-{
-    list-style: none;
-    margin-left: 0;
-    margin-bottom: 0;
-}
-
 .banner .github_url {
   color: #CCC;
 }
@@ -197,7 +216,6 @@ pre
   max-width: 980px;
 }
 
-
 .sectiontitle {
   margin-top: 2em;
   margin-bottom: 1.3em;
@@ -217,6 +235,18 @@ pre
   font-weight: bold;
 }
 
+#footerContent a {
+  color: #999999;
+}
+
+#footerContent summary {
+  margin-bottom: 1.3em;
+}
+
+#footerContent ul {
+  font-size: 0.85em;
+}
+
 .attr-rw {
   padding-right: 1em;
   text-align: center;