Improve method controls' display on mobile

By moving the method controls out of the method header, we can display them to the right of the method name on desktop, and below the method name on mobile.
ruby · Sep 8, 2024 · 403c0de · 403c0de
1 parent 05dced9
commit 403c0de
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 44 deletions.
diff --git a/lib/rdoc/generator/template/darkfish/class.rhtml b/lib/rdoc/generator/template/darkfish/class.rhtml
@@ -101,41 +101,35 @@
       <div id="<%= method.aref %>" class="method-detail <%= method.is_alias_for ? "method-alias" : '' %>">
         <div class="method-header">
           <%- if (call_seq = method.call_seq) then -%>
-          <%-   call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
-          <div class="method-heading">
-            <span class="method-callseq">
-              <%= h(call_seq.strip.
-                    gsub( /^\w+\./m, '')).
-                    gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
-            </span>
-            <%- if i == 0 and method.token_stream then -%>
-            <div class="method-controls">
-              <details class="method-source-toggle">
-                <summary>Source</summary>
-              </details>
-            </div>
+            <%- call_seq.strip.split("\n").each_with_index do |call_seq, i| -%>
+              <div class="method-heading">
+                <span class="method-callseq">
+                  <%= h(call_seq.strip.
+                        gsub( /^\w+\./m, '')).
+                        gsub(/(.*)[-=]&gt;/, '\1&rarr;') %>
+                </span>
+              </div>
             <%- end -%>
-          </div>
-          <%-   end -%>
           <%- elsif method.has_call_seq? then -%>
-          <div class="method-heading">
-            <span class="method-name"><%= h method.name %></span>
-          </div>
+            <div class="method-heading">
+              <span class="method-name"><%= h method.name %></span>
+            </div>
           <%- else -%>
-          <div class="method-heading">
-            <span class="method-name"><%= h method.name %></span>
-            <span class="method-args"><%= h method.param_seq %></span>
-            <%- if method.token_stream then -%>
-            <div class="method-controls">
-              <details class="method-source-toggle">
-                <summary>Source</summary>
-              </details>
+            <div class="method-heading">
+              <span class="method-name"><%= h method.name %></span>
+              <span class="method-args"><%= h method.param_seq %></span>
             </div>
-            <%- end -%>
-          </div>
           <%- end -%>
         </div>
 
+        <%- if method.token_stream -%>
+          <div class="method-controls">
+            <details class="method-source-toggle">
+              <summary>Source</summary>
+            </details>
+          </div>
+        <%- end -%>
+
         <%- unless method.skip_description? then -%>
         <div class="method-description">
           <%- if method.token_stream then -%>

diff --git a/lib/rdoc/generator/template/darkfish/css/rdoc.css b/lib/rdoc/generator/template/darkfish/css/rdoc.css
@@ -611,23 +611,21 @@ main .method-detail:target {
   border-left: 10px solid #f1edba;
 }
 
+main .method-header {
+  display: inline-block;
+}
+
 main .method-heading {
   position: relative;
   font-family: var(--font-code);
   font-size: 110%;
   font-weight: bold;
   color: var(--text-color);
 }
-main .method-heading :link,
-main .method-heading :visited {
-  color: inherit;
-}
-main .method-source-toggle {
-  position: absolute;
-  top: 2px;
-  right: 0px;
-  padding-right: 20px;
+
+main .method-controls {
   line-height: 20px;
+  float: right;
   color: var(--secondary-color);
   cursor: pointer;
 }
@@ -735,13 +733,9 @@ main .attribute-access-type {
     white-space: nowrap;
   }
 
-  .method-controls {
-    position: static;
-  }
-
-  main .method-source-toggle {
-    position: static;
-    display: inline-block;
+  main .method-controls {
+    margin-top: 10px;
+    float: none;
   }
 }
 /* @end */