Merge pull request #4193 from aignatov-bio/ai-sci-6932-fix-css-for-steps

CSS fixes for steps [SCI-6932]

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;

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;
     }

app/assets/stylesheets/protocols/protocol.scss

@@ -67,6 +67,7 @@
   }
 
   .protocol-step-actions {
+    margin-left: -6px;
     margin-top: 2em;
   }
 }

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;

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 {

app/javascript/vue/protocol/container.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="task-protocol">
     <div class="task-section-header" v-if="!inRepository">
+      <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">
@@ -10,7 +11,9 @@
         <div class="my-module-protocol-status">
           <!-- protocol status dropdown gets mounted here -->
         </div>
-      <div class="sci-btn-group actions-block">
+      </div>
+      <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>
@@ -27,6 +30,7 @@
           />
         </div>
       </div>
+    </div>
     <div v-if="protocol.id" id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
       <div class="protocol-description">
         <div class="protocol-name">
@@ -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 v-if="steps.length > 0" class="protocol-step-actions">
-      <div 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
       }
     },

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">
+              <li v-if="urls.reorder_elements_url" class="action"  @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
-                <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>
-              <li v-if="urls.delete_url" class="action">
+              <li v-if="urls.delete_url" class="action" @click="showDeleteModal">
-                <a @click="showDeleteModal">
                 <i class="fas fa-trash"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.delete') }}
-                </a>
               </li>
             </ul>
           </div>