AO3-4629 Fix positioning of Chapter Index and Download menus

app/views/works/_work_header_navigation.html.erb

@@ -1,6 +1,6 @@
 <!-- BEGIN navigation -->
 <h3 class="landmark heading"><%= ts("Actions") %></h3>
-<ul class="work navigation actions" role="menu">
+<ul class="work navigation actions">
   <% if logged_in_as_admin? || permit?("tag_wrangler") %>
     <li class="reindex"><%= link_to ts("Troubleshoot"), work_troubleshooting_path(@work) %></li>
   <% end %>
@@ -24,22 +24,20 @@
       <li class="chapter next"><%= link_to h(ts("Next Chapter")) + ' &#8594;'.html_safe, [@work, @next_chapter, :anchor => "workskin"] %></li>
     <% end %>
 
-    <li class="chapter" aria-haspopup="true">
-      <noscript>
-        <%= link_to ts('Chapter Index'), navigate_work_path(@work) %>
-      </noscript>
-      <a class="hidden" href="#"><%= ts('Chapter Index') %></a>
+    <li class="chapter">
+      <noscript><%= link_to t(".chapter_index.link"), navigate_work_path(@work) %></noscript>
+      <button class="hidden"><%= t(".chapter_index.button") %></button>
       <ul id="chapter_index" class="expandable secondary hidden">
         <li>
           <%= form_tag url_for({:controller => :chapters, :action => :show, :work_id => @work}), :method => :get do %>
             <p>
               <% options = @chapters.map{|c| [c.abbreviated_display_title.html_safe, c.id] } %>
               <%= select_tag :selected_id, options_for_select(options, params[:id].to_i) %>
-              <span class="submit actions"><%= submit_tag ts("Go") %></span>
+              <span class="submit actions"><%= submit_tag t(".chapter_index.submit") %></span>
             </p>
           <% end %>
         </li>
-        <li><%= link_to ts("Full-page index"), navigate_work_path(@work) %></li>
+        <li><%= link_to t(".chapter_index.full_page"), navigate_work_path(@work) %></li>
       </ul>
     </li>
   <% elsif @chapters && @chapters.length > 1 %>
@@ -109,8 +107,9 @@
   <% end %>
 
   <% if downloadable? && AdminSetting.current.downloads_enabled? %>
-    <li class="download" aria-haspopup="true">
-      <a href="#"><%= ts("Download") %></a>
+    <li class="download">
+      <noscript><h4 class="heading"><%= t(".download.heading") %></h4></noscript>
+      <button class="hidden"><%= t(".download.button") %></button>
       <ul class="expandable secondary">
         <% ArchiveConfig.DOWNLOAD_FORMATS.each do |format| %>
           <li><%= link_to ts(format.upcase), download_url_for_work(@work, format) %></li>

config/locales/views/en.yml

@@ -2581,6 +2581,15 @@ en:
         revealed_html: "%{work_link} by %{creator_link}"
         title: Works inspired by this one
         unrevealed: A work in an unrevealed collection
+    work_header_navigation:
+      chapter_index:
+        button: Chapter Index
+        full_page: Full-Page Index
+        link: Chapter Index
+        submit: Go
+      download:
+        button: Download
+        heading: Download
     work_header_notes:
       inspired_by:
         other_works_inspired_by_this_one: other works inspired by this one

lib/skin_wizard.rb

@@ -115,6 +115,8 @@ def background_color_styles(color)
         form.verbose legend,
         .verbose form legend,
         #modal,
+        .work.navigation .download,
+        .javascript .work.navigation .download .secondary,
         .own,
         .draft,
         .draft .wrapper,
@@ -150,6 +152,8 @@ def background_color_styles(color)
         .toggled form,
         .dynamic form,
         .secondary,
+        .work.navigation .download,
+        .javascript .work.navigation .download .secondary,
         .wrapper {
           box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5)
         }
@@ -303,6 +307,8 @@ def accent_color_styles(color)
         form.verbose legend,
         .verbose form legend,
         .secondary,
+        .work.navigation .download,
+        .javascript .work.navigation .download .secondary,
         dl.meta,
         .bookmark .user,
         div.comment,

public/stylesheets/masters/dark_mode/dark_mode_site_screen_.css

@@ -405,6 +405,14 @@ span.delete {
     box-shadow: 1px 1px 3px #000;
 }
 
+/* context: work navigation actions with secondary navigation */
+
+.download, .javascript .download .secondary {
+  background: #2a2a2a;
+  border-color: #555;
+    box-shadow: 1px 1px 3px #000;
+}
+
 /* don't let iOS add its special styling for dark buttons */
 button,
 input[type="button"],

public/stylesheets/masters/reversi/reversi_site_screen_.css

@@ -61,6 +61,8 @@ li.relationships a,
 th,
 #dashboard .secondary,
 .secondary,
+.work.navigation .download,
+.javascript .work.navigation .download .secondary,
 .thread .even,
 .system .tweet_list li,
 .ui-datepicker tr:hover {
@@ -116,6 +118,8 @@ fieldset fieldset.listbox,
 .wrapper,
 #dashboard .secondary,
 .secondary,
+.work.navigation .download,
+.javascript .work.navigation .download .secondary,
 form blockquote.userstuff,
 .thread .comment,
 .toggled form {

public/stylesheets/site/2.0/08-actions.css

@@ -187,10 +187,6 @@ dl.stats + .landmark + .actions, .mystery .summary + .landmark + .actions {
   float: none;
 }
 
-.chapter .secondary, .download .secondary {
-  top: 3.5em;
-}
-
 .dashboard .landmark {
   clear: right;
 }
@@ -222,4 +218,74 @@ dl.index p.actions {
   margin: 0;
 }
 
+/* context: work navigation actions with secondary navigation */
+
+.work.navigation .download {
+  display: block;
+  margin-block-start: 0;
+  padding: 0.375em 0 0.643em;
+}
+
+.work.navigation .download .secondary {
+  position: static;
+}
+
+/* The next two rule sets move the default .secondary style to the secondary's
+parent when JavaScript is disabled and put it back when it's enabled. */
+.work.navigation .download, .javascript .work.navigation .download .secondary {
+  background: #fff;
+  border: 2px solid #bbb;
+    box-shadow: 2px 2px 5px #bbb;
+}
+
+.work.navigation .download .secondary, .javascript .work.navigation .download {
+  background: transparent;
+  border: none;
+    box-shadow: none;
+}
+
+/* TODO: Update to .javascript .work.navigation :has(.secondary) once support
+for :has() increases to 95% according to caniuse.com. */
+.javascript .work.navigation .chapter, .javascript .work.navigation .download {
+  position: relative;
+}
+
+.javascript .work.navigation .download {
+  display: inline;
+  padding: 0 0 0 0.25em;
+}
+
+.javascript .work.navigation .secondary {
+  position: absolute;
+  right: 0;
+    align-items: center;
+    gap: 0 0.643em;
+    justify-content: space-evenly;
+}
+
+/* If we use display without the .expanded qualifier, it will override .hidden's
+display: none and secondary will always be open. */
+.javascript .work.navigation .expanded + .secondary {
+    display: flex;
+}
+
+.javascript .work.navigation .download .secondary {
+    gap: 0.25em;
+}
+
+.javascript .work.navigation .secondary li {
+  margin-block: 0;
+}
+
+.javascript .work.navigation .secondary p {
+  padding: 0;
+    align-items: center;
+    display: flex;
+    gap: 0 0.25em;
+}
+
+.javascript .work.navigation .secondary .actions {
+  padding: 0;
+}
+
 /* END== */

public/stylesheets/site/2.0/25-media-midsize.css

@@ -83,6 +83,22 @@ form.single .autocomplete li.input {
   margin-right: 0;
 }
 
+/* 08 actions */
+
+.javascript .work.navigation .chapter .secondary {
+  padding-block-start: 0.375em;
+    flex-wrap: wrap;
+}
+
+.javascript .work.navigation .secondary p {
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.javascript .work.navigation .secondary input {
+  margin-block-end: 0;
+}
+
 /* 16 zone system */
 
 .logged-in .splash > .module {