scinote-web/app/views/steps/_step.html.erb

<div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
  <div class="badge-num">
    <span class="badge bg-primary 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_reorder_step_in_protocol(@protocol) %>
          <a data-action="move-step" class="btn btn-link" href="<%= move_up_step_path(step, format: :json) %>" title="<%= t("protocols.steps.options.up_arrow_title") %>" data-remote="true">
              <span class="glyphicon glyphicon-arrow-up"></span></a>
          <a data-action="move-step" class="btn btn-link" href="<%= move_down_step_path(step, format: :json) %>" title="<%= t("protocols.steps.options.down_arrow_title") %>" data-remote="true">
            <span class="glyphicon glyphicon-arrow-down"></a>
        <% end %>
        <% if can_edit_step_in_protocol(@protocol) %>
          <a data-action="edit-step" class="btn btn-link" title="<%= t("protocols.steps.options.edit_title") %>" href="<%= edit_step_path(step, format: :json) %>" data-remote="true">
            <span class="glyphicon glyphicon-edit">
          </a>
        <% end %>
        <% if can_delete_step_in_protocol(@protocol) %>
          <%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link",
            data: {action: "delete-step", confirm: t("protocols.steps.destroy.confirm", step: step.name)}) do %>
            <span class="glyphicon glyphicon-trash">
          <% end %>
        <% end %>
      </div>
      <a class="step-panel-collapse-link" href="#step-panel-<%= step.id %>" data-toggle="collapse" data-remote="true">
        <span class="glyphicon glyphicon-collapse-down collapse-step-icon"></span>
        <strong><%= step.name %></strong> |
        <span><%= raw t("protocols.steps.published_on", timestamp: l(step.created_at, format: :full), user: step.user.full_name) %></span>
      </a>
    </div>
    <div class="panel-collapse collapse" id="step-panel-<%= step.id %>" role="tabpanel">
      <div class="panel-body">
<% if @protocol.in_module? %>
        <ul class="nav nav-tabs">
          <li role="presentation" class="active">
            <a class="step-info-tab" href="#step-info-<%= step.id %>" data-toggle="tab"><span class="glyphicon glyphicon-info-sign"></span>
              <%= t("protocols.steps.info_tab") %></a>
          </li>
          <% if can_view_step_comments(@protocol) %>
          <li role="presentation">
            <a class="comment-tab-link" href="<%= url_for step_step_comments_path(step_id: step.id, format: :json) %>" aria-controls="step-comments-<%= step.id %>" data-remote="true">
              <span class="glyphicon glyphicon-comment"></span>
              <%= t("protocols.steps.comments_tab") %></a>
          </li>
          <% end %>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" role="tabpanel" id="step-info-<%= step.id %>">
<% end %>
        <% if step.description.blank? %>
          <em><%= t("protocols.steps.no_description") %></em>
        <% else %>
          <%= step.description %>
        <% end %>
        <hr>
        <div class="row">
          <% unless step.tables.blank? then %>
            <div class="col-xs-12">
              <strong><%= t("protocols.steps.tables") %></strong>
                <% step.tables.each do |table| %>
                  <div data-role="hot-table" class="hot-table">
                    <%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
                    <div data-role="step-hot-table" class="step-result-hot-table"></div>
                  </div>
                <% end %>
            </div>
          <% end %>
          <% assets = ordered_assets(step) %>
          <% unless assets.blank? then %>
            <div class="col-xs-12">
              <strong><%= t("protocols.steps.files") %></strong>
              <ul>
                <% assets.each do |asset| %>
                  <li>
                    <% if can_view_or_download_step_assets(@protocol) %>
                        <% if asset.file_present %>
                          <%= link_to download_asset_path(asset), data: {no_turbolink: true, id: true, status: "asset-present"} do %>
                            <% if asset.is_image? %>
                              <%= image_tag preview_asset_path(asset) %>
                            <% end %>
                            <%= raw '<br>' if asset.is_image? %>
                            <span><%= truncate( asset.file_file_name, length: 50 ) %></span>
                          <% end %>
                        <% else %>
                          <%= asset_loading_span(asset) %>
                        <% end %>
                    <% else %>
                      <%= image_tag preview_asset_path(asset) if asset.is_image? %>
                      <%= raw '<br>' if asset.is_image? %>
                      <span><%= truncate( asset.file_file_name, length: 50 )%></span>
                    <% end %>
                  </li>
                <% end %>
              </ul>
            </div>
          <% end %>

          <% unless step.checklists.blank? then %>
            <div class="col-xs-12">
              <% step.checklists.each do |checklist| %>
                <strong><%= checklist.name %></strong>
                <% if checklist.checklist_items.empty? %>
                  </br>
                  <%= t("protocols.steps.empty_checklist") %>
                  </br>
                <% else %>
                  <% ordered_checklist_items(checklist).each do |checklist_item| %>
                    <div class="checkbox" <%= @protocol.in_module? ? "data-action=check-item" : "" %>>
                      <label>
                        <% if @protocol.in_module? %>
                          <input type="checkbox" value="" data-link-url="<%=checklistitem_state_step_path(step) %>" data-id="<%= checklist_item.id %>" <%= "checked" if checklist_item.checked? %> />
                        <% else %>
                          <input type="checkbox" value="" disabled="disabled" />
                        <% end %>
                        <%= checklist_item.text %>
                      </label>
                    </div>
                  <% end %>
                <% end %>
              <% end %>
            </div>
          <% end %>
        </div>

        <% if @protocol.in_module? %>
          <% if !step.completed? and can_complete_step_in_protocol(@protocol) %>
            <div data-action="complete-step" class="pull-right" data-link-url="<%= toggle_step_state_step_path(step)%>">
              <button class="btn btn-primary"><%= t("protocols.steps.options.complete_title") %></button>
            </div>
          <% elsif step.completed? and can_uncomplete_step_in_protocol(@protocol) %>
            <div data-action="uncomplete-step" class="pull-right" data-link-url="<%= toggle_step_state_step_path(step)%>">
              <button class="btn btn-default"><%= t("protocols.steps.options.uncomplete_title") %></button>
            </div>
          <% end %>
        <% end %>
<% if @protocol.in_module? %>
          </div>
          <div class="tab-pane" role="tabpanel" id="step-comments-<%= step.id %>"></div>
        </div>
<% end %>
      </div>
    </div>
  </div>
</div>