Move action links out from heading tags

Avoids action link text being read out as part of "navigated to..."
announcements.

#1987

Author: DavidOliver

assets/css/content/functions.css

@@ -16,8 +16,8 @@
 }
 
 .content-inner .detail-header {
-  margin: 2 0 1em;
-  padding: 0.5em 1em;
+  margin: 1em 0;
+  padding: 0.5em 0.85em 0.5em 1em;
   background-color: var(--textDetailBackground);
   border-left: 3px solid var(--textDetailAccent);
   font-size: 1em;

assets/css/content/general.css

@@ -1,3 +1,30 @@
+.content-inner .heading-with-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 6px;
+}
+.content-inner .top-heading {
+  padding-top: 1rem;
+}
+.content-inner .heading-with-actions h1 {
+  flex-grow: 1;
+  margin: 0;
+}
+.content-inner .heading-with-actions .icon-action {
+  flex-grow: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: normal;
+}
+.content-inner .heading-with-actions.top-heading .icon-action {
+  padding-top: 1.5rem;
+  font-size: 1.2rem;
+}
+
 .content-inner {
   font-family: var(--defaultFontFamily);
   font-size: 1em;
@@ -32,11 +59,6 @@
   font-weight: 300;
 }
 
-.content-inner h1 .icon-action {
-  font-size: 1.2rem;
-  font-weight: normal;
-}
-
 .content-inner h2 {
   font-size: 1.6em;
   padding-top: 1em;
@@ -65,17 +87,13 @@
 }
 
 .content-inner .icon-action {
-  float: right;
   color: var(--iconAction);
   text-decoration: none;
   border: none;
   transition: color 0.3s ease-in-out;
   background-color: transparent;
   cursor: pointer;
 }
-.content-inner button.icon-action {
-  margin-top: 12px;
-}
 .content-inner .icon-action:hover {
   color: var(--iconActionHover);
 }

lib/ex_doc/formatter/html/templates/detail_template.eex

@@ -6,15 +6,17 @@
     <a href="#<%=enc node.id %>" class="detail-link" data-no-tooltip aria-label="Link to this <%= pretty_type(node) %>">
       <i class="ri-link-m" aria-hidden="true"></i>
     </a>
-    <h1 class="signature" translate="no"><%=h node.signature %></h1>
-    <%= if node.source_url do %>
-      <a href="<%= node.source_url %>" class="icon-action" rel="help" aria-label="View Source">
-       <i class="ri-code-s-slash-line" aria-hidden="true"></i>
-     </a>
-    <% end %>
-    <%= for annotation <- node.annotations do %>
-      <span class="note">(<%= annotation %>)</span>
-    <% end %>
+    <div class="heading-with-actions">
+      <h1 class="signature" translate="no"><%=h node.signature %></h1>
+      <%= if node.source_url do %>
+        <a href="<%= node.source_url %>" class="icon-action" rel="help" aria-label="View Source">
+        <i class="ri-code-s-slash-line" aria-hidden="true"></i>
+      </a>
+      <% end %>
+      <%= for annotation <- node.annotations do %>
+        <span class="note">(<%= annotation %>)</span>
+      <% end %>
+    </div>
   </div>
   <%= if deprecated = node.deprecated do %>
     <div class="deprecated">

lib/ex_doc/formatter/html/templates/extra_template.eex

@@ -2,22 +2,21 @@
 <%= sidebar_template(config, type, nodes_map) %>
 
 <div id="top-content">
-  <h1>
+  <div class="heading-with-actions top-heading">
+    <h1><%= node.title_content %></h1>
+    <%= if type == :cheatmd do %>
+      <button onclick="window.print()" title="Print Cheatsheet" class="icon-action" rel="print">
+        <i class="ri-printer-line" aria-hidden="true"></i>
+        <span class="sr-only">Print Cheatsheet</span>
+      </button>
+    <% end %>
     <%= if node.source_url do %>
       <a href="<%= node.source_url %>" title="View Source" class="icon-action" rel="help">
         <i class="ri-code-s-slash-line" aria-hidden="true"></i>
         <span class="sr-only">View Source</span>
       </a>
     <% end %>
-    <%= if type == :cheatmd do %>
-      <button onclick="window.print()" title="Print Cheatsheet" class="icon-action" rel="print">
-        <i class="ri-printer-line" aria-hidden="true"></i>
-        <span class="sr-only">Print cheatsheet</span>
-      </button>
-    <% end %>
-
-    <span><%= node.title_content %></span>
-  </h1>
+  </div>
 
   <%= if type == :livemd do %>
     <div class="livebook-badge-container">

lib/ex_doc/formatter/html/templates/module_template.eex

@@ -2,19 +2,21 @@
 <%= sidebar_template(config, module.type, nodes_map) %>
 
 <div id="top-content">
-  <h1>
+  <div class="heading-with-actions top-heading">
+    <h1>
+      <span translate="no"><%= module.title %></span> <%= module_type(module) %>
+      <small class="app-vsn" translate="no">(<%= config.project %> v<%= config.version %>)</small>
+      <%= for annotation <- module.annotations do %>
+        <span class="note">(<%= annotation %>)</span>
+      <% end %>
+    </h1>
     <%= if module.source_url do %>
       <a href="<%= module.source_url %>" title="View Source" class="icon-action" rel="help">
         <i class="ri-code-s-slash-line" aria-hidden="true"></i>
         <span class="sr-only">View Source</span>
       </a>
     <% end %>
-    <span translate="no"><%= module.title %></span> <%= module_type(module) %>
-    <small class="app-vsn" translate="no">(<%= config.project %> v<%= config.version %>)</small>
-    <%= for annotation <- module.annotations do %>
-      <span class="note">(<%= annotation %>)</span>
-    <% end %>
-  </h1>
+  </div>
 
   <%= if deprecated = module.deprecated do %>
     <div class="deprecated">
@@ -54,4 +56,5 @@
     </div>
   </section>
 <% end %>
+
 <%= footer_template(config, module) %>