Merge pull request #279 from jonathanhefner/file-list-redesign

Redesign "Appears in" file list

Author: jonathanhefner

lib/rdoc/generator/template/rails/class.rhtml

@@ -39,19 +39,9 @@
 
     <main id="bodyContent">
         <%= include_template '_context.rhtml', {:context => klass} %>
-    </main>
 
-    <footer>
-        <div id="footerContent">
-            <details>
-                <summary class="sectiontitle">Appears in</summary>
-                <ul class="files">
-                    <% klass.in_files.each do |file| %>
-                    <li><%= link_to file %></li>
-                    <% end %>
-                </ul>
-            </details>
-        </div>
-    </footer>
+        <div class="sectiontitle">Definition files</div>
+        <%= more_less_ul klass.in_files.map { |file| link_to file }, 5..9 %>
+    </main>
   </body>
 </html>

lib/rdoc/generator/template/rails/resources/css/main.css

@@ -17,19 +17,19 @@ body {
 }
 
 body {
-  grid-template-rows: min-content min-content min-content;
+  grid-template-rows: min-content min-content;
   grid-template-columns: 100%;
 }
 
 @media (min-width: 600px) {
   body {
-    grid-template-rows: min-content min-content min-content;
+    grid-template-rows: min-content min-content;
     grid-template-columns: 300px auto;
   }
 
   nav {
     grid-row-start: 1;
-    grid-row-end: 3;
+    grid-row-end: 2;
     grid-column-start: 1;
     grid-column-end: 1;
   }
@@ -48,18 +48,6 @@ body {
     grid-column-end: 2;
     min-width: 0;
   }
-
-  footer {
-    grid-row-start: 3;
-    grid-row-end: 3;
-    grid-column-start: 2;
-    grid-column-end: 2;
-  }
-}
-
-#footerContent {
-  margin: 2em 3.5em;
-  max-width: 980px;
 }
 
 a:link, a:active, a:visited, a:hover {
@@ -232,12 +220,12 @@ pre
     display: inline;
 }
 
-#content {
+#bodyContent {
   margin: 1em;
 }
 
 @media (min-width: 600px) {
-  #content {
+  #bodyContent {
     max-width: 980px;
     margin: 2em 3.5em;
   }
@@ -262,18 +250,6 @@ 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;
@@ -470,3 +446,42 @@ a.back-to-top {
 a.back-to-top.show {
   visibility: visible;
 }
+
+
+/*
+ * More-Less widget
+ */
+
+details.more-less {
+  position: relative;
+}
+
+details.more-less summary {
+  position: absolute;
+  padding-left: 1em;
+  font-weight: bold;
+  color: var(--icon-color);
+}
+
+details.more-less summary:hover {
+  cursor: pointer;
+  color: inherit;
+}
+
+details.more-less summary::marker {
+  font-size: 1.15em;
+  content: "+";
+}
+
+details.more-less[open] summary {
+  top: calc(100% + 0.5em);
+}
+
+details.more-less[open] summary::marker {
+  content: "-";
+}
+
+details.more-less:not([open]) .more-less__less,
+details.more-less[open] .more-less__more {
+  display: none;
+}

lib/sdoc/helpers.rb

@@ -91,6 +91,26 @@ def group_by_first_letter(rdoc_objects)
     end
   end
 
+  def more_less_ul(items, limit)
+    soft_limit, hard_limit = (limit.is_a?(Range) ? limit : [limit]).minmax
+    items = items.map { |item| "<li>#{item}</li>" }
+
+    if items.length > hard_limit
+      <<~HTML
+        <ul>#{items[0...soft_limit].join}</ul>
+        <details class="more-less">
+          <summary>
+            <span class="more-less__more">#{items.length - soft_limit} More</span>
+            <span class="more-less__less">Less</span>
+          </summary>
+          <ul>#{items[soft_limit..].join}</ul>
+        </details>
+      HTML
+    else
+      "<ul>#{items.join}</ul>"
+    end
+  end
+
   def method_source_code_and_url(rdoc_method)
     source_code = rdoc_method.markup_code if rdoc_method.token_stream
 

spec/helpers_spec.rb

@@ -447,6 +447,39 @@ def Qux; end
     end
   end
 
+  describe "#more_less_ul" do
+    def ul(items)
+      ["<ul>", *items.map { |item| "<li>#{item}</li>" }, "</ul>"].join
+    end
+
+    it "returns a single list when the number of items is <= hard limit" do
+      _(@helpers.more_less_ul(1..7, 7)).must_equal ul(1..7)
+      _(@helpers.more_less_ul(1..7, 8)).must_equal ul(1..7)
+
+      _(@helpers.more_less_ul(1..7, 6..7)).must_equal ul(1..7)
+      _(@helpers.more_less_ul(1..7, 6..8)).must_equal ul(1..7)
+
+      _(@helpers.more_less_ul(1..7, 7..9)).must_equal ul(1..7)
+      _(@helpers.more_less_ul(1..7, 8..9)).must_equal ul(1..7)
+    end
+
+    it "returns split lists when the number of items is > hard limit" do
+      _(@helpers.more_less_ul(1..7, 6)).must_match %r"#{ul 1..6}.*<details.+#{ul 7..7}.*</details>"m
+      _(@helpers.more_less_ul(1..7, 5)).must_match %r"#{ul 1..5}.*<details.+#{ul 6..7}.*</details>"m
+
+      _(@helpers.more_less_ul(1..7, 5..6)).must_match %r"#{ul 1..5}.*<details.+#{ul 6..7}.*</details>"m
+      _(@helpers.more_less_ul(1..7, 4..6)).must_match %r"#{ul 1..4}.*<details.+#{ul 5..7}.*</details>"m
+    end
+
+    it "specifies the number of hidden items" do
+      _(@helpers.more_less_ul(1..7, 4)).must_match %r"\b3 More\b"
+    end
+
+    it "does not escape items" do
+      _(@helpers.more_less_ul(["<a>link</a>"], 1)).must_include "<a>link</a>"
+    end
+  end
+
   describe "#method_source_code_and_url" do
     before :each do
       @helpers.options.github = true