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.

Author: st0012

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 -%>

lib/rdoc/generator/template/darkfish/css/rdoc.css

@@ -615,23 +615,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;
 }
@@ -739,13 +737,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 */