Update protocol template screen [SCI-9319]

app/assets/stylesheets/my_modules/protocol.scss

@@ -1,5 +1,5 @@
 .my-module-position-container .protocol-content {
-  margin-left: 3rem;
+  margin-left: 2.5rem;
 }
 
 .task-protocol {
@@ -64,12 +64,8 @@
     }
   }
   .protocol-description {
-    margin-bottom: 2em;
-    padding-left: 2.5rem;
-  }
-
-  .protocol-steps {
-    padding-left: .75em;
+    margin-bottom: 1rem;
+    padding-left: 2rem;
   }
 
   .empty-protocol-description {

app/assets/stylesheets/protocols/protocol.scss

@@ -3,36 +3,6 @@
 
 
 .content-pane.protocols-show {
-  --container-margin: 20px;
-  background-color: $color-alto;
-  min-height: calc(100vh - var(--navbar-height) - var(--container-margin));
-  overflow: hidden;
-  padding: 0 0 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-row h1 {
-    max-width: 100%;
-  }
-
-  .content-header {
-    padding: 0 1.5rem;
-    align-self: stretch;
-  }
-
-  .protocol-breadcrumbs {
-    padding: .75em 0;
-  }
-
-  .protocol-position-container {
-    background-color: $color-white;
-    border-radius: 2px;
-    box-shadow: $flyout-shadow;
-    margin: var(--container-margin) 0;
-    padding: 10px 10px 10px 26px;
-    width: 900px;
-  }
 
   .dropdown-menu {
     z-index: 102;
@@ -43,7 +13,11 @@
   }
 
   .protocol-section {
-    margin: 16px 0;
+    background-color: var(--sn-white);
+    border-radius: .25rem;
+    display: inline-block;
+    padding: .25rem 1rem;
+    width: 100%;
 
     &.protocol-steps-section {
       margin-left: 0;
@@ -54,7 +28,7 @@
       color: var(--sn-black);
       display: inline-flex;
       gap: .5rem;
-      padding: .5rem;
+      padding: .5rem .5rem .5rem 0;
       text-decoration: none;
 
       .fas {
@@ -108,7 +82,7 @@
     }
 
     .protocol-details {
-      padding-left: 2.5rem;
+      padding-left: 2rem;
     }
   }
 

app/javascript/vue/protocol/protocolMetadata.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="protocol-section protocol-information">
+  <div class="protocol-section protocol-information mb-4">
     <div id="protocol-details" class="protocol-section-header">
       <div class="protocol-details-container">
         <a class="protocol-section-caret" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">

app/views/layouts/application.html.erb

@@ -69,7 +69,15 @@
     <span style="display: none;" data-hook="application-body-html"></span>
 
     <div class="sci--layout"
-         data-grey-background="<%= ['my_modules', 'results'].include?(controller_name) %>"
+         data-grey-background="<%= [
+          'my_modules/protocols',
+          'my_modules/signatures',
+          'my_modules/activities',
+          'results/index',
+          'protocols/show',
+          'organization/index'
+         ].include?(controller_name + '/' + action_name)
+        %>"
          data-breadcrumbs-collapsed="<%= !@breadcrumbs_items.present? %>"
          data-navigator-collapsed="<%= !@navigator || session[:navigator_collapsed] %>"
          data-left-navigation-collapsed=<%= !user_signed_in? %>

app/views/protocols/show.html.erb

@@ -3,7 +3,8 @@
   <%= render partial: "/shared/sidebar/templates_sidebar", locals: {active: :protocol} %>
 <% end %>
  <% provide(:container_class, 'no-second-nav-container') %>
-  <div class="content-header">
+<div class="content-pane protocols-show flexible with-grey-background pb-4" >
+  <div class="content-header sticky-header">
     <div class="title-row">
       <h1>
         <% if @inline_editable_title_config.present? %>
@@ -27,18 +28,15 @@
       </h1>
     </div>
   </div>
-<div class="content-pane protocols-show flexible" >
-  <div class="protocol-position-container">
-    <div
-      id="protocolContainer"
-      data-protocol-url="<%= protocol_path(@protocol) %>"
-      data-date-format="<%= datetime_picker_format_date_only %>"
-      data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
-    >
-      <protocol-container
-      :protocol-url="protocolUrl"
-      />
-    </div>
+  <div
+    id="protocolContainer"
+    data-protocol-url="<%= protocol_path(@protocol) %>"
+    data-date-format="<%= datetime_picker_format_date_only %>"
+    data-user-utc-offset="<%= ActiveSupport::TimeZone.find_tzinfo(current_user.time_zone).utc_offset %>"
+  >
+    <protocol-container
+    :protocol-url="protocolUrl"
+    />
   </div>
   <%= render partial: "protocols/index/delete_draft_modal" %>
 </div>