From 40144ea33fbd943c80fffe18bfc413b20de56150 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Thu, 21 Sep 2023 10:19:31 +0200
Subject: [PATCH] Update protocol template screen [SCI-9319]

---
 .../stylesheets/my_modules/protocol.scss      | 10 ++---
 .../stylesheets/protocols/protocol.scss       | 40 ++++---------------
 .../vue/protocol/protocolMetadata.vue         |  2 +-
 app/views/layouts/application.html.erb        | 10 ++++-
 app/views/protocols/show.html.erb             | 24 +++++------
 5 files changed, 31 insertions(+), 55 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss
index 8b22f4eb2..d0932c55c 100644
--- a/app/assets/stylesheets/my_modules/protocol.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss
index dcb187dd1..c06a6ce78 100644
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/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;
     }
   }
 
diff --git a/app/javascript/vue/protocol/protocolMetadata.vue b/app/javascript/vue/protocol/protocolMetadata.vue
index d6fc37938..12d660ccb 100644
--- a/app/javascript/vue/protocol/protocolMetadata.vue
+++ b/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">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 93d2f3d00..6251d2071 100644
--- a/app/views/layouts/application.html.erb
+++ b/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? %>
diff --git a/app/views/protocols/show.html.erb b/app/views/protocols/show.html.erb
index 5b1b5d42f..69fd29399 100644
--- a/app/views/protocols/show.html.erb
+++ b/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>