Re-factor the layout (and buttons, original motivation) for the work …

…show page
samvera · Nov 5, 2018 · 714925f · 714925f
1 parent d2a0374
commit 714925f
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 80 deletions.
diff --git a/app/assets/stylesheets/hyrax/_work-show.scss b/app/assets/stylesheets/hyrax/_work-show.scss
@@ -36,20 +36,6 @@ ul.tabular {
   list-style: none;
 }
 
-.show-actions {
-  padding-right: $panel-body-padding;
-
-  .row {
-    &:first-child {
-      margin-bottom: 8px;
-    }
-  }
-
-  @media screen and (max-width: 640px) {
-    padding-top: $panel-body-padding;
-  }
-}
-
 .work-show {
   dt,
   dd {
@@ -62,6 +48,10 @@ ul.tabular {
 
 .work-type-tag {
   color: #808080;
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: $padding-large-vertical;
+  margin-top: $padding-large-vertical * 2;
 }
 
 .work-type {
@@ -74,21 +64,42 @@ ul.tabular {
       word-break: break-word;
     }
   }
+
+  // Button row which sits below the title, and above panel content for a page
+  .button-row-top-two-column {
+    margin-bottom: $padding-large-vertical;
+    margin-top: $padding-large-vertical;
+
+    @media screen and (max-width: 767px) {
+      > div {
+        text-align: center;
+
+        &:first-child {
+          padding-bottom: $padding-small-vertical;
+        }
+      }
+    }
+  }
 }
 
 .work-title-wrapper {
-  align-items: center;
-  display: flex;
+  margin-bottom: $padding-large-vertical * 2;
 
-  h2 {
-    margin: 0;
-  }
+  .title-with-badges {
+    align-items: center;
+    display: flex;
+
+    h1,
+    h2 {
+      margin: 0;
+    }
 
-  .label {
-    margin-left: 5px;
+    .label {
+      margin-left: 5px;
 
-    &:first-of-type {
-      margin-left: 10px;
+      &:first-of-type {
+        margin-left: 10px;
+      }
     }
   }
 }

diff --git a/app/views/hyrax/base/_items.html.erb b/app/views/hyrax/base/_items.html.erb
@@ -1,4 +1,4 @@
-<h2><%= t('.header') %></h2>
+
 <%  array_of_ids = presenter.list_of_item_ids_to_display %>
 <%  members = presenter.member_presenters_for(array_of_ids) %>
 <% if members.present? %>

diff --git a/app/views/hyrax/base/_relationships.html.erb b/app/views/hyrax/base/_relationships.html.erb
@@ -1,4 +1,3 @@
-<h2><%= t('.header') %></h2>
 <dl class="work-show">
 <%= render 'relationships_parent_rows', presenter: presenter %>
-</dl>
+</dl>
diff --git a/app/views/hyrax/base/_show_actions.html.erb b/app/views/hyrax/base/_show_actions.html.erb
@@ -1,5 +1,26 @@
-<div class="show-actions">
-  <div class="row">
+<div class="row show-actions button-row-top-two-column">
+  <div class="col-sm-6">
+    <% if presenter.show_deposit_for?(collections: @user_collections) %>
+      <input type="checkbox"  style="display:none" name="batch_document_ids[]" id="batch_document_<%= presenter.id %>" value="<%= presenter.id %>" class="batch_document_selector" checked="checked" />
+      <%= button_tag t('hyrax.dashboard.my.action.add_to_collection'),
+                    class: 'btn btn-default submits-batches submits-batches-add',
+                    data: { toggle: "modal", target: "#collection-list-container" } %>
+    <% end %>
+    <% if presenter.work_featurable? %>
+      <%= link_to "Feature", hyrax.featured_work_path(presenter, format: :json),
+          data: { behavior: 'feature' },
+          class: presenter.display_unfeature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
+
+      <%= link_to "Unfeature", hyrax.featured_work_path(presenter, format: :json),
+          data: { behavior: 'unfeature' },
+          class: presenter.display_feature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
+    <% end %>
+    <% if Hyrax.config.analytics? %>
+      <%= link_to "Analytics", presenter.stats_path, id: 'stats', class: 'btn btn-default' %>
+    <% end %>
+  </div>
+
+  <div class="col-sm-6 text-right">
     <% if presenter.editor? %>
       <%= link_to "Edit", edit_polymorphic_path([main_app, presenter]), class: 'btn btn-default' %>
       <% if presenter.member_presenters.size > 1 %>
@@ -21,28 +42,6 @@
       <%= link_to "Delete", [main_app, presenter], class: 'btn btn-danger', data: { confirm: "Delete this #{presenter.human_readable_type}?" }, method: :delete %>
     <% end %>
   </div>
-
-  <div class="row">
-    <% if presenter.show_deposit_for?(collections: @user_collections) %>
-      <input type="checkbox"  style="display:none" name="batch_document_ids[]" id="batch_document_<%= presenter.id %>" value="<%= presenter.id %>" class="batch_document_selector" checked="checked" />
-      <%= button_tag t('hyrax.dashboard.my.action.add_to_collection'),
-                     class: 'btn btn-default submits-batches submits-batches-add',
-                     data: { toggle: "modal", target: "#collection-list-container" } %>
-    <% end %>
-    <% if presenter.work_featurable? %>
-      <%= link_to "Feature", hyrax.featured_work_path(presenter, format: :json),
-          data: { behavior: 'feature' },
-          class: presenter.display_unfeature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
-
-      <%= link_to "Unfeature", hyrax.featured_work_path(presenter, format: :json),
-          data: { behavior: 'unfeature' },
-          class: presenter.display_feature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
-    <% end %>
-    <% if Hyrax.config.analytics? %>
-      <%= link_to "Analytics", presenter.stats_path, id: 'stats', class: 'btn btn-default' %>
-    <% end %>
-  </div>
-
 </div>
 
 <!-- COinS hook for Zotero -->

diff --git a/app/views/hyrax/base/_work_button_row.html.erb b/app/views/hyrax/base/_work_button_row.html.erb
@@ -0,0 +1,49 @@
+<div class="row button-row-top-two-column">
+  <div class="col-sm-6">
+    <% if presenter.editor? %>
+      <%= link_to "Edit", edit_polymorphic_path([main_app, presenter]), class: 'btn btn-default' %>
+      <% if presenter.member_presenters.size > 1 %>
+          <%= link_to t("hyrax.file_manager.link_text"), polymorphic_path([main_app, :file_manager, presenter]), class: 'btn btn-default' %>
+      <% end %>
+      <% if presenter.valid_child_concerns.length > 0 %>
+        <div class="btn-group">
+          <button type="button" class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Attach Child <span class="caret"></span></button>
+            <ul class="dropdown-menu">
+              <% presenter.valid_child_concerns.each do |concern| %>
+                <li>
+                  <%= link_to "Attach #{concern.human_readable_type}", polymorphic_path([main_app, :new, :hyrax, :parent, concern.model_name.singular], parent_id: presenter.id) %>
+                </li>
+              <% end %>
+            </ul>
+        </div>
+      <% end %>
+      <%= link_to "Delete", [main_app, presenter], class: 'btn btn-danger', data: { confirm: "Delete this #{presenter.human_readable_type}?" }, method: :delete %>
+    <% end %>
+  </div>
+  <div class="col-sm-6 text-right">
+    <% if presenter.show_deposit_for?(collections: @user_collections) %>
+      <input type="checkbox"  style="display:none" name="batch_document_ids[]" id="batch_document_<%= presenter.id %>" value="<%= presenter.id %>" class="batch_document_selector" checked="checked" />
+      <%= button_tag t('hyrax.dashboard.my.action.add_to_collection'),
+                    class: 'btn btn-default submits-batches submits-batches-add',
+                    data: { toggle: "modal", target: "#collection-list-container" } %>
+    <% end %>
+    <% if presenter.work_featurable? %>
+      <%= link_to "Feature", hyrax.featured_work_path(presenter, format: :json),
+          data: { behavior: 'feature' },
+          class: presenter.display_unfeature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
+
+      <%= link_to "Unfeature", hyrax.featured_work_path(presenter, format: :json),
+          data: { behavior: 'unfeature' },
+          class: presenter.display_feature_link? ? 'btn btn-default collapse' : 'btn btn-default' %>
+    <% end %>
+    <% if Hyrax.config.analytics? %>
+      <%= link_to "Analytics", presenter.stats_path, id: 'stats', class: 'btn btn-default' %>
+    <% end %>
+  </div>
+</div>
+
+<!-- COinS hook for Zotero -->
+  <span class="Z3988" title="<%= export_as_openurl_ctx_kev(presenter) %>"></span>
+<!-- Render Modals -->
+  <%= render 'hyrax/dashboard/collections/form_for_select_collection', user_collections: @user_collections %>
diff --git a/app/views/hyrax/base/_work_title.erb b/app/views/hyrax/base/_work_title.erb
@@ -1,18 +1,13 @@
-<% presenter.title.each_with_index do |title, index| %>
-  <div class="row">
-    <div class="col-sm-6 work-title-wrapper">
-      <% if index == 0 %>
-        <h2><%= title %></h2>
+<div class="work-title-wrapper">
+  <% presenter.title.each_with_index do |title, index| %>
+    <% if index == 0 %>
+      <div class="title-with-badges">
+        <h1><%= title %></h1>
         <%= presenter.permission_badge %>
         <%= presenter.workflow.badge %>
-      <% else %>
-        <h2><%= title %></h2>
-      <% end %>
-    </div>
-    <div class="col-sm-6 text-right">
-      <% if index == 0 %>
-        <%= render "show_actions", presenter: presenter %>
-      <% end %>
-    </div>
-  </div>
-<% end %>
+      </div>
+    <% else %>
+      <h1><%= title %></h1>
+    <% end %>
+  <% end %>
+</div>
diff --git a/app/views/hyrax/base/_work_type.html.erb b/app/views/hyrax/base/_work_type.html.erb
@@ -1,4 +1,4 @@
-<h1 class="work-type-tag">
+<div class="work-type-tag">
   <span class="<%= Hyrax::ModelIcon.css_class_for(presenter.model) %>" aria-hidden="true"></span>
   <%= presenter.human_readable_type %>
-</h1>
+</div>
diff --git a/app/views/hyrax/base/show.html.erb b/app/views/hyrax/base/show.html.erb
@@ -3,15 +3,13 @@
 <%= render 'shared/citations' %>
 
 <div class="row work-type">
-  <div class="col-xs-12">
+  <div class="col-sm-12">
     <%= render 'work_type', presenter: @presenter %>
   </div>
-  <div class="col-xs-12">&nbsp;</div>
   <div itemscope itemtype="http://schema.org/CreativeWork" class="col-xs-12">
+    <%= render 'work_title', presenter: @presenter %>
+    <%= render 'show_actions', presenter: @presenter %>
     <div class="panel panel-default">
-      <div class="panel-heading">
-        <%= render 'work_title', presenter: @presenter %>
-      </div>
       <div class="panel-body">
         <div class="row">
           <%= render 'workflow_actions_widget', presenter: @presenter %>
@@ -29,15 +27,31 @@
             <%= render 'work_description', presenter: @presenter %>
             <%= render 'metadata', presenter: @presenter %>
           </div>
-          <div class="col-sm-12">
-            <%= render 'relationships', presenter: @presenter %>
-            <%= render 'items', presenter: @presenter %>
-            <%# TODO: we may consider adding these partials in the future %>
-            <%# = render 'sharing_with', presenter: @presenter %>
-            <%# = render 'user_activity', presenter: @presenter %>
-          </div>
         </div>
       </div>
+    </div><!-- /panel -->
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">Relationships</h3>
+      </div>
+      <div class="panel-body">
+        <%= render 'relationships', presenter: @presenter %>
+      </div>
     </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">Items</h3>
+      </div>
+      <div class="panel-body">
+        <%= render 'items', presenter: @presenter %>
+      </div>
+    </div>
+
+    <%# TODO: we may consider adding these partials in the future %>
+    <%# = render 'sharing_with', presenter: @presenter %>
+    <%# = render 'user_activity', presenter: @presenter %>
+
   </div>
 </div>