fixes project overview style and add no description link [fixes SCI-360]

app/assets/javascripts/experiments/dropdown_actions.js

@@ -34,7 +34,7 @@
       '.edit-experiment': '#edit-experiment-modal-',
       '.clone-experiment': '#clone-experiment-modal-',
       '.move-experiment': '#move-experiment-modal-'
-    }
+    };
 
     $.each($(".dropdown-experiment-actions"), function(){
       var $dropdown = $(this);
@@ -45,10 +45,21 @@
     });
   }
 
+  // Initialize no description edit link
+  function initEditNoDescription(){
+    var modal = "#edit-experiment-modal-";
+    $.each($(".no-description-experiment"), function(){
+      var id = modal + $(this).data("id");
+      initializeModal($(this), id);
+    });
+  }
   // Bind modal to new-experiment action
   initializeModal($("#new-experiment"), '#new-experiment-modal');
 
   // Bind modal to all actions listed on dropdown accesible from experiment
   // panel
   initializeDropdownActions();
+
+  // init
+  initEditNoDescription();
 })();

app/assets/stylesheets/projects.scss

@@ -410,14 +410,31 @@ li.module-hover {
 /* EXPERIMENT PANEL */
 .experiment-panel {
   margin: 0 auto;
-  margin-bottom: 15px;
-  margin-top: 25px;
-  max-width: 650px;
+  margin-bottom: 35px;
+  margin-top: 45px;
+  max-width: 700px;
+  height: 550px;
   @include box-shadow(0px 4px 8px 0px $color-dove-gray);
+
+  .experiment-description {
+    margin-top:20px;
+  }
+
+  .no-description {
+    display: block;
+    text-align: center;
+    font-size: 16px;
+  }
 }
 
 .workflowimg-container {
   margin: 15px 0;
+  height: 300px;
+
+  img {
+    max-width:100%;
+    max-height: 300px;
+  }
 }
 
 /* SHOW */

app/views/projects/show/_experiment.html.erb

@@ -27,12 +27,26 @@
                                 class: 'img-responsive center-block'),
                       canvas_experiment_path(experiment) %>
         </div>
+      <% else %>
+        <div class="workflowimg-container"></div>
       <% end %>
       <span>
         <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
         <%= localize(experiment.created_at, format: t('time.formats.full_date')) %> - <%= localize(experiment.updated_at, format: t('time.formats.full_date')) %>
       </span>
-      <p><%= experiment.description %></p>
+      <% if experiment.description? %>
+        <p class="experiment-description"><%= experiment.description %></p>
+      <% else %>
+        <% if can_edit_experiment(experiment) %>
+        <p class="experiment-description"><i class="no-description"><%= link_to t('experiments.edit.add-description'),
+                      edit_project_experiment_url(@project, experiment),
+                      remote: true,
+                      data: { id: experiment.id },
+                      class: 'no-description-experiment' %></i></p>
+        <% else %>
+          <p class="experiment-description"><i class="no-description"><%= t('experiments.edit.no-description') %></i></p>
+        <% end %>
+      <% end %>
     </div>
   </div>
 </div>

config/locales/en.yml

@@ -606,6 +606,8 @@ en:
       modal_create: 'Update experiment'
       label_title: "Edit details"
       panel_label: 'Change details'
+      add-description: 'Add description'
+      no-description: 'No description'
     create:
       success_flash: "Successfully created experiment %{experiment}"
       error_flash: 'Could not create a new experiment.'