Merge pull request #134 from mlibrary/arc-103-request-move

Creates sticky toolbar
mlibrary · Aug 22, 2024 · b2c7762 · b2c7762
2 parents fa0a339 + 144e7c1
commit b2c7762
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 32 deletions.
diff --git a/app/assets/stylesheets/dul-arclight/dul_styles.scss b/app/assets/stylesheets/dul-arclight/dul_styles.scss
@@ -384,7 +384,7 @@ a {
     z-index: 1200;
   }
   background: white;
-  padding-top: 10px;
+  padding-top: 5px;
   box-shadow: 1px 0 1px -1px rgba(0, 0, 0, 0.06),
     2px 0 2px -2px rgba(0, 0, 0, 0.06), 4px 0 4px -4px rgba(0, 0, 0, 0.06),
     8px 0 8px -8px rgba(0, 0, 0, 0.06), 16px 0 16px -16px rgba(0, 0, 0, 0.06);

diff --git a/app/assets/stylesheets/dul-arclight/modules/layout.scss b/app/assets/stylesheets/dul-arclight/modules/layout.scss
@@ -84,10 +84,6 @@ header {
   }
 }
 
-#content.show-document {
-  padding-top: 1rem;
-}
-
 /* Match style for chronlist-head & list-head */
 /* See https://github.com/projectblacklight/arclight/blob/master/app/assets/stylesheets/arclight/modules/layout.scss#L167-L172 */
 .index-head, .table-head {

diff --git a/app/assets/stylesheets/umich-arclight/_results.scss b/app/assets/stylesheets/umich-arclight/_results.scss
@@ -17,6 +17,14 @@
   color: var(--color-neutral-400) !important;
 }
 
+#content #component-restrictions {
+  background-color: var(--color-maize-200);
+}
+
+#component-restrictions > p> a {
+  color: var(--color-teal-500);
+}
+
 /* Facets */
 
 #facets .facet-limit-active .card-header {
@@ -70,3 +78,56 @@
     }
   }
 }
+
+/* Request/clear show actions toolbar */
+
+#context .actions-wrapper .al-show-actions {
+  background-color: var(--color-blue-100);
+}
+
+.sticky-toolbar-top {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.al-show-actions-toolbar {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  position: relative;
+  margin-bottom: .5rem;
+  border-bottom: solid 1px var(--color-teal-300);
+  box-shadow: 0px 3px 3px -3px rgba(23, 130, 166, 0.58);
+  background-image: linear-gradient(to top, #f7f8f9, #f9fafb, #fbfbfc, #fdfdfd, #ffffff);
+}
+
+.al-show-actions-box-request > button {
+  margin-right: .25rem;
+}
+
+.al-show-actions-box-request > button:hover {
+  box-shadow: 0 0 0 2px var(--color-maize-400), 0 0 0 3px var(--color-neutral-400);
+  border-radius: 2px !important;
+}
+
+.al-show-actions-toolbar > .request-checkbox {
+  display: flex;
+  align-items: center;
+  padding: .5rem 0;
+}
+
+.al-show-actions-toolbar > .request-checkbox > label {
+  color: var(--color-neutral-400);
+}
+
+.contents-wrapper > .al-show-sub-heading {
+  padding-top: 0;
+  border-top: none;
+}
+
+.badge-request {
+  background-color: var(--color-pink-500);
+  color: #fff;
+  font-size: 85%;
+}
diff --git a/app/models/solr_document.rb b/app/models/solr_document.rb
@@ -186,6 +186,14 @@ def is_checkbox_requestable? # rubocop:disable Naming/PredicateName
     config_present && !container_types.empty? && container_requestable
   end
 
+  def is_aeon_requestable?
+    repository_config.request_config_present_for_type?('aeon_web_ead')
+  end
+
+  def is_possibly_requestable?
+    is_aeon_requestable? or collection_has_requestable_components?
+  end
+
   def is_linkable?
     (online_content? || number_of_children > 0 || restricted_component?)
   end

diff --git a/app/views/arclight/requests/_aeon_hidden_form_request.html.erb b/app/views/arclight/requests/_aeon_hidden_form_request.html.erb
@@ -18,5 +18,5 @@
   </span>
 <% end %>
   <button type='submit' class='btn btn-primary btn-sm' onclick="SubmitAeonRequestForm()">Request</button>
-  <button class='btn btn-secondary btn-sm' onclick="ClearAllCheckboxes()">Clear</button>
-  <span id="selected-items-count" aria-live="polite" class="badge badge-secondary"></span>
+  <button class='btn btn-secondary btn-sm' onclick="ClearAllCheckboxes()">Clear selected</button>
+  <span id="selected-items-count" aria-live="polite" class="badge badge-request"></span>
diff --git a/app/views/catalog/_show_default.html.erb b/app/views/catalog/_show_default.html.erb
@@ -85,9 +85,41 @@
   </div>
 <% end %>
 
-
 <span id="eadid" data-ead-id="<%= document.eadid %>"><%= link_to t('blacklight.skip_links.back_to_top'), '#skip-link', class: 'element-invisible element-focusable rounded-bottom py-2 px-3', data: { turbolinks: 'false' } %></span>
 
+<% request_button_flag = true %>
+<% if document.is_checkbox_requestable? %>
+<div class="sticky-toolbar-top">
+  <nav class="al-show-actions-toolbar">
+  <%= render "aeon_request_checkbox", document: document, label_class: 'btn btn-outline-secondary btn-outline-request m-0', label: 'Select Item' %>
+  </nav>
+</div>  
+  <% request_button_flag = false %>
+<% else %>
+  <% unless document.collection_has_requestable_components? || (document.level == 'collection') %>
+  <div class="sticky-toolbar-top">
+  <nav class="al-show-actions-toolbar" aria-label="Actions">
+    <div class="mb-3">
+      <%= render partial: 'arclight/requests', locals: { document: document } %>
+    </div>
+  </nav>
+  </div>
+    <% request_button_flag = false %>
+  <% end %>
+<% end %>
+
+<% if request_button_flag and document.is_possibly_requestable? %>
+<div class="sticky-toolbar-top">
+  <nav class="al-show-actions-toolbar" aria-label="Actions">
+      <div class="d-flex mt-3 mb-3">
+        <div class="flex-fill">
+          <%= render partial: 'arclight/requests', locals: { document: document } %>
+        </div>
+      </div>
+  </nav>
+  </div>
+<% end %>
+
 <%= render partial: 'arclight/repositories/repository', locals: { repository: document.repository_config } %>
 
 <%# =================== %>
@@ -214,22 +246,6 @@
   </div>
 <% end %>
 
-<% request_button_flag = true %>
-
-<% if document.is_checkbox_requestable? %>
-  <%= render "aeon_request_checkbox", document: document, class: 'px-0 pb-3 mt-n3 d-flex align-items-center', label_class: 'btn btn-outline-secondary btn-outline-request p-2 m-0', label: 'Select Item' %>
-  <% request_button_flag = false %>
-<% else %>
-  <% unless document.collection_has_requestable_components? || (document.level == 'collection') %>
-    <div class="mb-3">
-      <%= render partial: 'arclight/requests', locals: { document: document } %>
-    </div>
-    <% request_button_flag = false %>
-  <% end %>
-<% end %>
-
-
-
 <%# parents = Arclight::Parents.from_solr_document(document).as_parents %>
 
 
@@ -265,17 +281,9 @@
   <%# ========================== %>
 
   <div class="contents-wrapper">
-    <% if request_button_flag %>
-      <div class="d-flex mt-3 mb-3">
-        <div class="flex-fill">
-          <%= render partial: 'arclight/requests', locals: { document: document } %>
-        </div>
-      </div>
-    <% end %>
     <h2 class="al-show-sub-heading">
       <%= t("arclight.views.show.sections.contents") %>
     </h2>
-
   </div>
 
   <%= document.non_component_contents %>