From b0f0ded87de87b2d5e57c29cb9ddda48ff821491 Mon Sep 17 00:00:00 2001
From: Urban Rotnik <urban.rotnik@gmail.com>
Date: Mon, 25 Mar 2019 13:53:28 +0100
Subject: [PATCH] Step header changes, removed vertical line

SCI-3134
---
 app/assets/stylesheets/steps.scss             | 55 +++++++++++++
 app/assets/stylesheets/themes/scinote.scss    |  6 --
 .../elements/_my_module_step_element.html.erb |  2 +-
 app/views/steps/_step.html.erb                | 79 +++++++++++--------
 4 files changed, 100 insertions(+), 42 deletions(-)

diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss
index 88938f0e3..865b2d67b 100644
--- a/app/assets/stylesheets/steps.scss
+++ b/app/assets/stylesheets/steps.scss
@@ -1,6 +1,7 @@
 // Place all the styles related to the Steps controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+@import "constants";
 
 #new_step,
 .panel-step-attachment {
@@ -28,4 +29,58 @@
       }
     }
   }
+
+  .step {
+    .panel {
+      margin-left: 0;
+    }
+  }
+
+  .complete-step-btn {
+    display: inline-block;
+    line-height: 39px;
+
+    button {
+      display: block;
+      font-size: 12px;
+      margin: auto 0;
+      padding: 3px 10px;
+
+      span {
+        font-size: 15px;
+      }
+    }
+  }
+
+  .panel-heading {
+    padding-top: 0;
+    padding-bottom: 0;
+    background-color: $color-silver;
+    height: 39px;
+    border-bottom-width: 0 !important;
+
+    > * {
+      display: inline-block;
+      line-height: 39px;
+    }
+
+    .panel-options {
+      bottom: 0;
+    }
+
+    span.step-number {
+      font-size: 30px;
+      margin: 0 10px;
+    }
+
+    .left-floats {
+      float: left;
+
+      > * {
+        float: left;
+      }
+    }
+  }
 }
+
+
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index e4fa6562f..b0793a5b6 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1020,12 +1020,6 @@ ul.content-activities {
     }
   }
 }
-/* Steps and Results */
-#steps {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAABCAYAAACsXeyTAAAAIUlEQVQImWNgoD5gZGBgMILSjKRo/P//vwiSGQwMDAwMAEnaA0jgHoquAAAAAElFTkSuQmCC");
-  background-repeat: repeat-y;
-  background-position: -3px 0;
-}
 
 .badge-icon {
   background-color: $color-silver;
diff --git a/app/views/reports/elements/_my_module_step_element.html.erb b/app/views/reports/elements/_my_module_step_element.html.erb
index b6c602d0c..ce02b0b43 100644
--- a/app/views/reports/elements/_my_module_step_element.html.erb
+++ b/app/views/reports/elements/_my_module_step_element.html.erb
@@ -36,7 +36,7 @@
                                simple_format: false,
                                tags: %w(img)) %>
         <% else %>
-           <em><%=t "projects.reports.elements.step.no_description" %></em>
+          <em><%=t "projects.reports.elements.step.no_description" %></em>
         <% end %>
       </div>
     </div>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index be03e4616..cc37483f7 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -1,10 +1,29 @@
 <div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
-  <div class="badge-num">
-    <span class="badge size-digit-<%= (step.position + 1).to_s.length %>"><%= step.position + 1 %></span>
-  </div>
   <div class="panel panel-default">
     <div class="panel-heading">
       <div class="panel-options pull-right">
+        <% if can_complete_or_checkbox_step?(@protocol) %>
+          <% if step.completed? %>
+            <div data-action="uncomplete-step"
+                 class="complete-step-btn"
+                 data-link-url="<%= toggle_step_state_step_path(step)%>">
+              <button class="btn btn-default">
+                <span class="fas fa-times"></span>
+                <%= t("protocols.steps.options.uncomplete_title") %>
+              </button>
+            </div>
+          <% else %>
+            <div data-action="complete-step"
+                 class="complete-step-btn"
+                 data-link-url="<%= toggle_step_state_step_path(step)%>">
+              <button class="btn btn-toggle">
+                <span class="fas fa-check"></span>
+                <%= t("protocols.steps.options.complete_title") %>
+              </button>
+            </div>
+          <% end %>
+        <% end %>
+
         <% if can_manage_protocol_in_module?(@protocol) ||
               can_manage_protocol_in_repository?(@protocol) %>
           <a data-action="move-step"
@@ -34,16 +53,28 @@
           <% end %>
         <% end %>
       </div>
-      <a class="step-panel-collapse-link"
-         href="#step-panel-<%= step.id %>"
-         data-toggle="collapse"
-         data-remote="true">
-        <span class="fas fa-caret-square-down collapse-step-icon"></span>
-        <strong><%= step.name %></strong> |
-        <span><%= sanitize_input t('protocols.steps.published_on',
-                                   timestamp: l(step.created_at, format: :full),
-                                   user: h(step.user.full_name)) %></span>
-      </a>
+      <div class="left-floats">
+        <a class="step-panel-collapse-link"
+           href="#step-panel-<%= step.id %>"
+           data-toggle="collapse"
+           data-remote="true">
+          <span class="fas fa-caret-square-down collapse-step-icon"></span>
+        </a>
+
+        <span class="step-number"><%= step.position + 1 %></span>
+
+        <a class="step-panel-collapse-link"
+           href="#step-panel-<%= step.id %>"
+           data-toggle="collapse"
+           data-remote="true">
+          <strong><%= step.name %></strong> |
+
+          <span><%= sanitize_input t('protocols.steps.published_on',
+                                     timestamp: l(step.created_at, format: :full),
+                                     user: h(step.user.full_name)) %></span>
+        </a>
+      </div>
+
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
       <div class="panel-body">
@@ -123,28 +154,6 @@
               <% end %>
             </div>
           <% end %>
-
-          <% if can_complete_or_checkbox_step?(@protocol) %>
-            <% if step.completed? %>
-              <div data-action="uncomplete-step"
-                   class="pull-right"
-                   data-link-url="<%= toggle_step_state_step_path(step)%>">
-                <button class="btn btn-default">
-                  <span class="fas fa-times"></span>
-                  <%= t("protocols.steps.options.uncomplete_title") %>
-                </button>
-              </div>
-            <% else %>
-              <div data-action="complete-step"
-                   class="pull-right"
-                   data-link-url="<%= toggle_step_state_step_path(step)%>">
-                <button class="btn btn-toggle">
-                  <span class="fas fa-check"></span>
-                  <%= t("protocols.steps.options.complete_title") %>
-                </button>
-              </div>
-            <% end %>
-          <% end %>
         </div>
 
         <% if can_read_protocol_in_module?(@protocol) %>