From 7b0853d00a2dcf7aae66b707629fc352c3f63cbd Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Tue, 5 Jul 2022 12:49:12 +0200
Subject: [PATCH] CSS fixes for steps [SCI-6932]

---
 .../stylesheets/my_modules/protocol.scss      | 28 ++++++++++
 .../my_modules/protocols/index.scss           |  8 +--
 .../stylesheets/protocols/protocol.scss       |  1 +
 app/assets/stylesheets/reports/new.scss       |  2 +-
 app/assets/stylesheets/steps/step.scss        |  4 +-
 app/javascript/vue/protocol/container.vue     | 55 ++++++++++---------
 app/javascript/vue/protocol/step.vue          | 16 ++----
 7 files changed, 72 insertions(+), 42 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocol.scss b/app/assets/stylesheets/my_modules/protocol.scss
index 074c08d46..60a79a1d3 100644
--- a/app/assets/stylesheets/my_modules/protocol.scss
+++ b/app/assets/stylesheets/my_modules/protocol.scss
@@ -1,4 +1,26 @@
 .task-protocol {
+  .protocol-name {
+    .sci-inline-edit__view.blank,
+    textarea {
+      font-weight: bold;
+    }
+  }
+
+  .protocol-step-actions {
+    margin-left: -6px;
+  }
+
+  .protocol-buttons-group {
+    column-gap: .25em;
+    display: grid;
+    grid-template-columns: auto auto auto;
+  }
+
+  .portocol-header-left-part {
+    align-items: baseline;
+    display: flex;
+  }
+
   .insert-step {
     align-items: center;
     color: $color-concrete;
@@ -27,6 +49,12 @@
       }
     }
   }
+  .protocol-description {
+    margin-bottom: 2em;
+    padding-left: 1em;
+  }
+
+
   .protocol-options-dropdown {
     a {
       cursor: pointer;
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 779afbee3..10d22f77f 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -79,7 +79,7 @@
 
       .repositories-assign-container {
         flex-grow: 1;
-        max-width: 200px;
+        max-width: 150px;
 
         .btn {
           text-align: left;
@@ -552,7 +552,7 @@
       display: flex;
       flex-grow: 1;
 
-      :not(:first-child):not(.dropdown-menu) {
+      > :not(:first-child):not(.dropdown-menu) {
         margin-left: .5em;
       }
     }
@@ -589,7 +589,7 @@
     margin: 0;
   }
 
-  .status-buttons :not(:first-child):not(.dropdown-menu) {
+  .status-buttons > :not(:first-child):not(.dropdown-menu) {
     margin-left: 0;
     margin-top: .5em;
   }
@@ -615,7 +615,7 @@
       text-align: left;
     }
 
-    .status-buttons :not(:first-child):not(.dropdown-menu) {
+    .status-buttons > :not(:first-child):not(.dropdown-menu) {
       margin-left: 0;
       margin-top: .5em;
     }
diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss
index 1550e34b2..94b9bacc5 100644
--- a/app/assets/stylesheets/protocols/protocol.scss
+++ b/app/assets/stylesheets/protocols/protocol.scss
@@ -67,6 +67,7 @@
   }
 
   .protocol-step-actions {
+    margin-left: -6px;
     margin-top: 2em;
   }
 }
diff --git a/app/assets/stylesheets/reports/new.scss b/app/assets/stylesheets/reports/new.scss
index 00b0ba81e..03a25a88e 100644
--- a/app/assets/stylesheets/reports/new.scss
+++ b/app/assets/stylesheets/reports/new.scss
@@ -453,7 +453,7 @@
       }
 
       .experiment-name {
-        @include font-main;
+        @include font-h1;
         display: inline-block;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index 58c46a416..312174ca7 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -5,7 +5,7 @@
 
 .step-container {
   border: $border-transparent;
-  margin: 20px 0 20px -1.5em;
+  margin: 6px 0 6px -1.5em;
   padding: 8px 24px 8px 0;
 
   .step-header {
@@ -46,12 +46,14 @@
     .step-position {
       @include font-main;
       flex-shrink: 0;
+      font-weight: bold;
       line-height: 24px;
       margin: 0 4px;
     }
 
     .step-name-container {
       flex-grow: 1;
+      font-weight: bold;
     }
 
     .step-actions-container {
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 84501f003..02aa0a85d 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -1,30 +1,34 @@
 <template>
   <div class="task-protocol">
     <div class="task-section-header" v-if="!inRepository">
-      <a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
-        <i class="fas fa-caret-right"></i>
-        <div class="task-section-title">
-          <h2>{{ i18n.t('Protocol') }}</h2>
+      <div class="portocol-header-left-part">
+        <a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
+          <i class="fas fa-caret-right"></i>
+          <div class="task-section-title">
+            <h2>{{ i18n.t('Protocol') }}</h2>
+          </div>
+        </a>
+        <div class="my-module-protocol-status">
+          <!-- protocol status dropdown gets mounted here -->
         </div>
-      </a>
-      <div class="my-module-protocol-status">
-        <!-- protocol status dropdown gets mounted here -->
       </div>
-      <div class="sci-btn-group actions-block">
-        <a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)">
-            <span class="fas fa-plus" aria-hidden="true"></span>
-            <span>{{ i18n.t("protocols.steps.new_step") }}</span>
-        </a>
-        <a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal">
-          <span class="fas fa-print" aria-hidden="true"></span>
-          <span>{{ i18n.t("protocols.print.button") }}</span>
-        </a>
-        <ProtocolOptions
-          v-if="protocol.attributes && protocol.attributes.urls"
-          :protocol="protocol"
-          @protocol:delete_steps="deleteSteps"
-          :canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
-        />
+      <div class="actions-block">
+        <div class="protocol-buttons-group">
+          <a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)">
+              <span class="fas fa-plus" aria-hidden="true"></span>
+              <span>{{ i18n.t("protocols.steps.new_step") }}</span>
+          </a>
+          <a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal">
+            <span class="fas fa-print" aria-hidden="true"></span>
+            <span>{{ i18n.t("protocols.print.button") }}</span>
+          </a>
+          <ProtocolOptions
+            v-if="protocol.attributes && protocol.attributes.urls"
+            :protocol="protocol"
+            @protocol:delete_steps="deleteSteps"
+            :canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
+          />
+        </div>
       </div>
     </div>
     <div v-if="protocol.id" id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
@@ -44,7 +48,7 @@
           </span>
         </div>
         <ProtocolMetadata v-if="protocol.attributes && protocol.attributes.in_repository" :protocol="protocol" @update="updateProtocol"/>
-        <div v-if="urls.update_protocol_description_url" class="protocol-description">
+        <div v-if="urls.update_protocol_description_url">
           <Tinymce
             :value="protocol.attributes.description"
             :value_html="protocol.attributes.description_view"
@@ -64,8 +68,7 @@
         <span class="fas fa-plus" aria-hidden="true"></span>
         <span>{{ i18n.t("protocols.steps.new_step") }}</span>
       </a>
-
-      <div class="protocol-step-actions">
+      <div v-if="steps.length > 0" class="protocol-step-actions">
         <button class="btn btn-light" @click="collapseSteps">
           <span class="fas fa-caret-up"></span>
           {{ i18n.t("protocols.steps.collapse_label") }}
@@ -146,7 +149,7 @@
         protocol: {
           attributes: {}
         },
-        steps: {},
+        steps: [],
         reordering: false
       }
     },
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 14b6e5559..2c0719884 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -93,17 +93,13 @@
               <li class="title">
                 {{ i18n.t('protocols.steps.options_dropdown.title') }}
               </li>
-              <li v-if="urls.reorder_elements_url" class="action">
-                <a @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
-                  <i class="fas fa-arrows-alt-v"></i>
-                  {{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
-                </a>
+              <li v-if="urls.reorder_elements_url" class="action"  @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
+                <i class="fas fa-arrows-alt-v"></i>
+                {{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
               </li>
-              <li v-if="urls.delete_url" class="action">
-                <a @click="showDeleteModal">
-                  <i class="fas fa-trash"></i>
-                  {{ i18n.t('protocols.steps.options_dropdown.delete') }}
-                </a>
+              <li v-if="urls.delete_url" class="action" @click="showDeleteModal">
+                <i class="fas fa-trash"></i>
+                {{ i18n.t('protocols.steps.options_dropdown.delete') }}
               </li>
             </ul>
           </div>