From b5d67d429be3044cdec40d4ef36d54fcdf27524f Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Mon, 11 Jul 2022 12:31:54 +0200
Subject: [PATCH] Fix elements step elements alignment [SCI-6959]

---
 .../steps/components/checklist.scss           |  2 +
 .../stylesheets/steps/components/table.scss   |  2 +-
 .../stylesheets/steps/components/text.scss    |  2 +-
 app/assets/stylesheets/steps/step.scss        | 53 ++++++++-----------
 .../stylesheets/steps/step_attachments.scss   |  4 ++
 app/javascript/vue/protocol/attachments.vue   |  2 +-
 .../vue/protocol/step_elements/checklist.vue  |  1 +
 .../vue/protocol/step_elements/table.vue      |  1 +
 .../vue/protocol/step_elements/text.vue       |  1 +
 9 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss
index 573b3fbd2..6afb2ca90 100644
--- a/app/assets/stylesheets/steps/components/checklist.scss
+++ b/app/assets/stylesheets/steps/components/checklist.scss
@@ -9,6 +9,8 @@
       padding-bottom: 7px;
       padding-top: 7px;
     }
+  .step-checklist-item {
+    padding-left: var(--left-component-padding);
   }
 
   .step-element-header {
diff --git a/app/assets/stylesheets/steps/components/table.scss b/app/assets/stylesheets/steps/components/table.scss
index af34e4a0a..da25437bc 100644
--- a/app/assets/stylesheets/steps/components/table.scss
+++ b/app/assets/stylesheets/steps/components/table.scss
@@ -3,7 +3,7 @@
 
   .step-table {
     border: $border-transparent;
-    margin-left: 20px;
+    margin-left: var(--left-component-padding);
     padding: 4px;
     position: relative;
 
diff --git a/app/assets/stylesheets/steps/components/text.scss b/app/assets/stylesheets/steps/components/text.scss
index 18032fb8a..aa477d564 100644
--- a/app/assets/stylesheets/steps/components/text.scss
+++ b/app/assets/stylesheets/steps/components/text.scss
@@ -1,7 +1,7 @@
 .step-text-container {
   display: block;
   margin-bottom: 16px;
-  padding-left: 1.5em;
+  padding-left: var(--left-component-padding);
   position: relative;
   width: calc(100% + 16px);
 
diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss
index 4d4628851..9bee92bff 100644
--- a/app/assets/stylesheets/steps/step.scss
+++ b/app/assets/stylesheets/steps/step.scss
@@ -4,6 +4,7 @@
 @import "components/*";
 
 .step-container {
+  --left-component-padding: 24px;
   border: $border-transparent;
   margin: 6px 0 6px -1.5em;
   padding: 8px 24px 8px 0;
@@ -58,45 +59,32 @@
 
     .step-name-container {
       flex-grow: 1;
+      font-size: 16px;
       font-weight: bold;
 
       textarea {
         text-decoration: initial;
       }
+    }
 
-      .step-state {
-        border: 2px solid $color-alto;
-        border-radius: 50%;
-        cursor: pointer;
-        height: 24px;
-        text-align: center;
-        width: 24px;
+    .step-state {
+      border: 2px solid $color-alto;
+      border-radius: 50%;
+      cursor: pointer;
+      height: 24px;
+      text-align: center;
+      width: 24px;
 
-        &.completed {
-          background: $brand-success;
-          border: 2px solid $brand-success;
+      &.completed {
+        background: $brand-success;
+        border: 2px solid $brand-success;
 
-          &::after {
-            @include font-awesome;
-            color: $color-white;
-            content: $font-fas-check;
-          }
+        &::after {
+          @include font-awesome;
+          color: $color-white;
+          content: $font-fas-check;
         }
       }
-
-      .step-position {
-        @include font-main;
-        flex-shrink: 0;
-        font-weight: bold;
-        line-height: 24px;
-        margin: 0 4px;
-      }
-
-      .step-name-container {
-        flex-grow: 1;
-        font-size: 16px;
-        font-weight: bold;
-      }
     }
 
     .step-actions-container {
@@ -146,7 +134,12 @@
   }
 
   .step-elements {
-    padding-left: 24px;
+    padding-left: calc(var(--left-component-padding) * 2);
+
+    .step-element-grip-placeholder {
+      height: 24px;
+      width: 28px;
+    }
   }
 
   .comments-counter {
diff --git a/app/assets/stylesheets/steps/step_attachments.scss b/app/assets/stylesheets/steps/step_attachments.scss
index d88630b75..aa4904b2f 100644
--- a/app/assets/stylesheets/steps/step_attachments.scss
+++ b/app/assets/stylesheets/steps/step_attachments.scss
@@ -7,6 +7,10 @@
 }
 
 .step-container {
+  .step-attachments {
+    padding-left: 28px;
+  }
+
   .attachments-actions {
     align-items: center;
     display: flex;
diff --git a/app/javascript/vue/protocol/attachments.vue b/app/javascript/vue/protocol/attachments.vue
index 54a011f66..3da2d4972 100644
--- a/app/javascript/vue/protocol/attachments.vue
+++ b/app/javascript/vue/protocol/attachments.vue
@@ -2,7 +2,7 @@
   <div v-if="attachments.length" class="step-attachments">
     <div class="attachments-actions">
       <div class="title">
-        <h4>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h4>
+        <h3>{{ i18n.t('protocols.steps.files', {count: attachments.length}) }}</h3>
       </div>
       <div class="actions">
         <div class="dropdown sci-dropdown">
diff --git a/app/javascript/vue/protocol/step_elements/checklist.vue b/app/javascript/vue/protocol/step_elements/checklist.vue
index d99490e79..c783fcf90 100644
--- a/app/javascript/vue/protocol/step_elements/checklist.vue
+++ b/app/javascript/vue/protocol/step_elements/checklist.vue
@@ -4,6 +4,7 @@
       <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
         <i class="fas fas-rotated-90 fa-exchange-alt"></i>
       </div>
+      <div v-else class="step-element-grip-placeholder"></div>
       <div class="step-element-name">
         <InlineEdit
           v-if="element.attributes.orderable.urls.update_url"
diff --git a/app/javascript/vue/protocol/step_elements/table.vue b/app/javascript/vue/protocol/step_elements/table.vue
index d450b7a09..108c698d3 100644
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@@ -4,6 +4,7 @@
       <div v-if="reorderElementUrl" class="step-element-grip" @click="$emit('reorder')">
         <i class="fas fas-rotated-90 fa-exchange-alt"></i>
       </div>
+      <div v-else class="step-element-grip-placeholder"></div>
       <div class="step-element-name">
         <InlineEdit
           v-if="element.attributes.orderable.urls.update_url"
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index 5a1118e27..58be12df3 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@@ -3,6 +3,7 @@
     <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
       <i class="fas fas-rotated-90 fa-exchange-alt"></i>
     </div>
+    <div v-else class="step-element-grip-placeholder"></div>
     <div class="buttons-container">
       <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="-1" @click="enableEditMode($event)">
         <i class="fas fa-pen"></i>