Scope admin form conventions with a class

.admin_layout replaces the #admin_layout. All css rules and
javascript queries were changed along and rules simplified
where the opportunity arose.

18 files changed, 31 insertions, 62 deletions

diff --git a/app/views/assets/edit.html.erb b/app/views/assets/edit.html.erb
index 1e4ae8f1..39490c03 100644
--- a/app/views/assets/edit.html.erb
+++ b/app/views/assets/edit.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout">
+<div class="admin_layout">
   <h1><%= t(".title") %></h1>
 
   <%= form_for(@asset, html: { multipart: true }) do |f| %>
diff --git a/app/views/assets/new.html.erb b/app/views/assets/new.html.erb
index 1260644f..36f5ab88 100644
--- a/app/views/assets/new.html.erb
+++ b/app/views/assets/new.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout">
+<div class="admin_layout">
   <h1><%= t(".title") %></h1>
 
   <%= form_for(@asset, :html => { :multipart => true }) do |f| %>
diff --git a/app/views/assets/show.html.erb b/app/views/assets/show.html.erb
index 5c111c7b..ee990bdb 100644
--- a/app/views/assets/show.html.erb
+++ b/app/views/assets/show.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout">
+<div class="admin_layout">
   <h1><%= @asset.name %></h1>
 
   <div class="layout_row">
diff --git a/app/views/elevations/new.html.erb b/app/views/elevations/new.html.erb
index 084fb9e4..8dd64e78 100644
--- a/app/views/elevations/new.html.erb
+++ b/app/views/elevations/new.html.erb
@@ -1,6 +1,6 @@
 <h1><%= t(".title") %></h1>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <% if current_user.otp_enrolled? %>
     <p class="field_hint">
       <%= t(".hint", :minutes => AuthenticatedSystem::ELEVATION_MAX_AGE.in_minutes.to_i) %>
diff --git a/app/views/events/edit.html.erb b/app/views/events/edit.html.erb
index 7c855760..55e0d4ba 100644
--- a/app/views/events/edit.html.erb
+++ b/app/views/events/edit.html.erb
@@ -12,7 +12,7 @@
   <%= hidden_field_tag :return_to, @return_to %>
   <%= form_error_messages(f) %>
 
-  <div id="admin_layout">
+  <div class="admin_layout">
     <div class="layout_row">
       <div class="layout_row_label"><%= Event.human_attribute_name(:node) %> </div>
       <div class="layout_row_content">
diff --git a/app/views/events/new.html.erb b/app/views/events/new.html.erb
index 5cc47b69..e5aea87b 100644
--- a/app/views/events/new.html.erb
+++ b/app/views/events/new.html.erb
@@ -5,7 +5,7 @@
 <%= form_for(@event) do |f| %>
   <%= form_error_messages(f) %>
 
-  <div id="admin_layout">
+  <div class="admin_layout">
     <div class="layout_row">
       <div class="layout_row_label"><%= Event.human_attribute_name(:node) %></div>
       <div class="layout_row_content">
diff --git a/app/views/events/show.html.erb b/app/views/events/show.html.erb
index 2f3d315d..0d91f850 100644
--- a/app/views/events/show.html.erb
+++ b/app/views/events/show.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout" class="show_node">
+<div class="admin_layout show_node">
   <h1><%= @event.node ? t(".title_for_node", :path => @event.node.unique_name) : t(".title") %></h1>
 
   <div class="layout_row">
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index d19fdd95..269e0e49 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -1,6 +1,6 @@
 <h1><%= title_for_node(@node) %></h1>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <div class="node_action_bar">
     <%= button_to t(".unlock_back"), unlock_node_path(@node), method: :put,
           form: { class: 'button_to state_changing' },
diff --git a/app/views/nodes/show.html.erb b/app/views/nodes/show.html.erb
index af55d699..cf1d79c1 100644
--- a/app/views/nodes/show.html.erb
+++ b/app/views/nodes/show.html.erb
@@ -1,6 +1,6 @@
 <% locked_by_other = @node.locked? && @node.lock_owner != current_user %>
 <% may_change_live = current_user.may_change_live?(@node) %>
-<div id="admin_layout" class="show_node">
+<div class="admin_layout show_node">
   <h1><%= title_for_node(@node) %> <small>(<%= I18n.default_locale.to_s.upcase %>)</small></h1>
 
   <div class="layout_row">
diff --git a/app/views/otp_challenges/new.html.erb b/app/views/otp_challenges/new.html.erb
index 798fc024..8247b262 100644
--- a/app/views/otp_challenges/new.html.erb
+++ b/app/views/otp_challenges/new.html.erb
@@ -1,6 +1,6 @@
 <h1><%= t(".title") %></h1>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <div class="layout_row">
     <div class="layout_row_label"> <%= t(".code") %> </div>
     <div class="layout_row_content">
diff --git a/app/views/otp_enrollments/show.html.erb b/app/views/otp_enrollments/show.html.erb
index 03405d5f..16addb5b 100644
--- a/app/views/otp_enrollments/show.html.erb
+++ b/app/views/otp_enrollments/show.html.erb
@@ -1,6 +1,6 @@
 <h1><%= t(".title") %></h1>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <div class="layout_row">
     <div class="layout_row_label"><%= t(".scan") %></div>
     <div class="layout_row_content">
diff --git a/app/views/page_translations/edit.html.erb b/app/views/page_translations/edit.html.erb
index 3a4c8659..0172a501 100644
--- a/app/views/page_translations/edit.html.erb
+++ b/app/views/page_translations/edit.html.erb
@@ -17,7 +17,7 @@
   <%= link_to t("nodes.edit.preview"), preview_page_path(@page, :locale => @locale), target: "_blank", rel: "noopener", class: "preview_link" %>
 </div>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <ul id="related_asset_list" style="display:none">
     <% @page.related_assets.includes(:asset).each do |related| %>
       <li data-large-url="<%= related.asset.upload.url(:large) %>"
diff --git a/app/views/revisions/show.html.erb b/app/views/revisions/show.html.erb
index a898b7e6..a2f276bc 100644
--- a/app/views/revisions/show.html.erb
+++ b/app/views/revisions/show.html.erb
@@ -1,5 +1,5 @@
 <% translation = @page.translations.find_by(:locale => @translation_locale) %>
-<div id="admin_layout" class="show_node">
+<div class="admin_layout show_node">
   <h1><%= t(".title", :rev => @page.revision) %>: <%= translation&.title %> <small>(<%= @translation_locale.to_s.upcase %>)</small></h1>
 
   <div class="layout_row">
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index 8a5900ce..2cf5a07c 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout">
+<div class="admin_layout">
   <h1><%= @user == current_user ? t(".my_account") : t(".edit_user", :login => @user.login) %></h1>
 
   <% if @user.errors.any? %>
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 13a238b5..a770b9a7 100644
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -6,7 +6,7 @@
   </div>
 <% end %>
 
-<div id="admin_layout">
+<div class="admin_layout">
   <%= form_for @user do |f| %>
     <div class="layout_row">
       <div class="layout_row_label"><%= t("users.labels.login") %></div>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 9879e171..48c37ffb 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -1,4 +1,4 @@
-<div id="admin_layout">
+<div class="admin_layout">
   <h1><%= @user.login %></h1>
 
   <div class="layout_row">
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 67bfb8fc..cbfa4dc6 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -220,7 +220,7 @@ cccms = {
           error: function(xhr) {
             if (xhr.status === 423) {
               clearInterval(cccms.autosave_timer);
-              cccms.report_lock_lost($("#admin_layout > form").attr("data-show-url"));
+              cccms.report_lock_lost($(".admin_layout > form").attr("data-show-url"));
             }
             // any other failure: quietly retried on the next tick
           }
@@ -230,7 +230,7 @@ cccms = {
     };
 
     cccms.autosave_timer = setInterval(function() {
-      $("#admin_layout > form").submitWithAjax();
+      $(".admin_layout > form").submitWithAjax();
     }, 7000);
   },
 
@@ -264,7 +264,7 @@ cccms = {
       });
 
       $force.on('click', function() {
-        $("#admin_layout > form").submitWithAjax({ force: true });
+        $(".admin_layout > form").submitWithAjax({ force: true });
       });
     },
 
@@ -316,7 +316,7 @@ cccms = {
       cccms.inline_images.ensure_overlay();
       cccms.inline_images.editor = editor;
 
-      var showUrl = $("#admin_layout > form").attr("data-show-url") || "";
+      var showUrl = $(".admin_layout > form").attr("data-show-url") || "";
       var match = showUrl.match(/(\d+)$/);
       cccms.inline_images.node_id = match ? match[1] : "";
 
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 1d504464..dbeb3dd1 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1454,17 +1454,10 @@ form.button_to svg  {
   #metadata_details[open] > summary { display: none; }
 }
 
-input[type=text]#tag_list,
-input[type=text]#page_slug,
-input#move_to_search_term {
-  padding: 5px;
-}
-
-div#admin_layout {
+.admin_layout {
   margin-top: 0;
 }
 
-#admin_layout a.action_button,
 .action_button {
   display: inline-flex;
   align-items: center;
@@ -1482,15 +1475,16 @@ div#admin_layout {
   font-size: inherit;
 }
 
-#admin_layout a.action_button:hover,
 .action_button:hover {
   color: var(--surface);
   background-color: var(--text);
 }
 
-#admin_layout input[type=text],
-#admin_layout input[type=password],
-#admin_layout textarea {
+.admin_layout input[type=text],
+.admin_layout input[type=password],
+.admin_layout textarea {
+  box-sizing: border-box;
+  width: 100%;
   padding: 5px;
 }
 
@@ -1498,50 +1492,25 @@ input#tag_list {
   text-transform: lowercase;
 }
 
-#admin_layout input[type=text],
-#admin_layout input[type=password],
-#admin_layout textarea {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-input[type=text]#page_title {
-  box-sizing: border-box;
-  width: 100%;
+.admin_layout input[type=text]#page_title {
   padding: 6px 5px 4px;
   font-weight: bold;
 }
 
-#admin_layout textarea#page_abstract {
-  width: 100%;
-  box-sizing: border-box;
+.admin_layout textarea#page_abstract {
   height: 8rem;
 }
 
-#admin_layout textarea#page_body {
-  box-sizing: border-box;
-  width: 100%;
+.admin_layout textarea#page_body {
   height: 60vh;
 }
 
-input#tag_list,
-input#page_slug,
-input#move_to_search_term {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-input#menu_search_term,
-input#menu_item_node_id,
-input#menu_item_path,
-input#menu_item_title {
-  width: 100%;
+.admin_layout .menu_field {
   max-width: 44rem;
 }
 
 @media(min-width:1016px) {
-  #admin_layout textarea#page_abstract {
-    padding: 5px;
+  .admin_layout textarea#page_abstract {
     height: 250px;
   }
 }