Use details tag for method toggling

ruby · Sep 8, 2024 · be83509 · be83509
1 parent 973c9d3
commit be83509
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -109,7 +109,11 @@
                     gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
             </span>
             <%- if i == 0 and method.token_stream then -%>
-            <span class="method-click-advice">Toggle source</span>
+            <div class="method-controls">
+              <details class="method-click-advice">
+                <summary>Source</summary>
+              </details>
+            </div>
             <%- end -%>
           </div>
           <%-   end -%>
@@ -119,10 +123,14 @@
           </div>
           <%- else -%>
           <div class="method-heading">
-            <span class="method-name"><%= h method.name %></span><span
-              class="method-args"><%= h method.param_seq %></span>
+            <span class="method-name"><%= h method.name %></span>
+            <span class="method-args"><%= h method.param_seq %></span>
             <%- if method.token_stream then -%>
-            <span class="method-click-advice">Toggle source</span>
+            <div class="method-controls">
+              <details class="method-click-advice">
+                <summary>Source</summary>
+              </details>
+            </div>
             <%- end -%>
           </div>
           <%- end -%>

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -626,7 +626,6 @@ main .method-click-advice {
   position: absolute;
   top: 2px;
   right: 0px;
-  font-size: 12px;
   padding-right: 20px;
   line-height: 20px;
   color: var(--secondary-color);
@@ -735,6 +734,15 @@ main .attribute-access-type {
     overflow-x: auto;
     white-space: nowrap;
   }
+
+  .method-controls {
+    position: static;
+  }
+
+  main .method-click-advice {
+    position: static;
+    display: inline-block;
+  }
 }
 /* @end */