diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js index b752370ee..652525707 100644 --- a/app/assets/javascripts/experiments/dropdown_actions.js +++ b/app/assets/javascripts/experiments/dropdown_actions.js @@ -112,22 +112,34 @@ } // Initialize no description edit link function initEditNoDescription(){ - var modal = "#edit-experiment-modal-"; - $.each($(".experiment-no-description a"), function(){ + var modal = '#edit-experiment-modal-'; + $.each($('.experiment-no-description'), 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 big-plus new experiment actions - initializeModal('.big-plus', '#new-experiment-modal'); + $(document).on('turbolinks:load', function() { + // 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(); + // Bind modal to big-plus new experiment actions + initializeModal('.big-plus', '#new-experiment-modal'); - // init - initEditNoDescription(); + // Bind modal to new-exp-title action + initializeModal('.new-exp-title', '#new-experiment-modal'); + + // Bind modals to all clone-experiment actions + $.each($('.clone-experiment'), function() { + var id = $(this).closest('.experiment-panel').data('id'); + initializeModal($(this), '#clone-experiment-modal-' + id); + }); + + // Bind modal to all actions listed on dropdown accesible from experiment + // panel + initializeDropdownActions(); + + // init + initEditNoDescription(); + }); })(); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index 78b367e45..7d9798768 100644 --- a/app/assets/javascripts/projects/show.js +++ b/app/assets/javascripts/projects/show.js @@ -14,7 +14,7 @@ var timestamp = container.data("timestamp"); var img_url = container.data('updated-img'); - animateSpinner(container, true); + animateSpinner(container, true, { color: '#555', top: '60%', zIndex: '100' }); checkUpdatedImg(img_url, url, timestamp, container); } @@ -54,6 +54,7 @@ type: "GET", dataType: "json", success: function (data) { + el.children('img').remove(); el.append(data.workflowimg); }, error: function (ev) { diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index cfe1820cd..5fe25337b 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -463,69 +463,110 @@ li.module-hover { } } + +#project-show { + @media (min-width: 1400px) { + .col-md-6 { + width: 33.33%; // fallback if needed + width: calc(100% / 3); + } + } +} + // EXPERIMENT PANEL .experiment-panel { @include box-shadow(0 4px 8px 0 $color-dove-gray); - height: 550px; + display: flex; + flex-direction: column; + height: 400px; margin: 0 auto; margin-bottom: 35px; margin-top: 45px; max-width: 700px; - display: flex; - flex-direction: column; + + .panel-title { + margin-bottom: 14px; + } + + .panel-heading .clone-experiment, + .panel-heading .dropdown { + display: none; + } + + &:hover .clone-experiment, + &:hover .dropdown { + display: block; + } + + .panel-date { + color: $color-silver-chalice; + } + + .panel-heading > .clone-experiment { + color: $color-silver-chalice; + padding-left: 4px; + padding-top: 2px; + } + + .dropdown { + color: $color-silver-chalice; + + button { + padding-left: 6px; + } + } .panel-body { display: flex; flex: 1 1 auto; flex-direction: column; + height: 100%; + + a { + height: 100%; + } } .experiment-description { - border: 1px solid $color-alto; - border-radius: 4px; - height: 100px; margin-top: 10px; + max-height: 86px; overflow-x: hidden; - overflow-y: scroll; - padding: 10px; + + p { + margin: 0; + } } .experiment-no-description { color: $color-alto; display: block; - font-size: $font-size-h4; + font-size: $font-size-large; font-weight: bold; + margin-top: 10px; text-align: center; - - a { - color: $color-alto; - text-decoration: none; - } } .no-workflowimg { color: $color-alto; display: block; - font-size: 26px; + font-size: 22px; font-weight: bold; - height: 300px; margin: 15px 0; - padding-top: 150px; + max-height: 200px; + padding-bottom: 70px; + padding-top: 50px; text-align: center; - - a { - color: $color-alto; - text-decoration: none; - } } } .workflowimg-container { - height: 300px; - margin: 15px 0; + align-items: center; + display: flex; + height: 100%; + justify-content: center; img { - max-height: 300px; + max-height: 190px; max-width: 100%; } } @@ -540,7 +581,7 @@ li.module-hover { .big-plus { color: $color-gainsboro; display: block; - font-size: 250px; + font-size: 180px; margin: 20px 0; text-align: center; diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index a6075b605..c010aae7b 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -652,7 +652,7 @@ ul.double-line > li { } .panel-default > .panel-heading { - background-color: $color-gainsboro; + background-color: $color-white; &>.panel-title { overflow: hidden; diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb index ff4a036f1..89c689ad9 100644 --- a/app/views/projects/show.html.erb +++ b/app/views/projects/show.html.erb @@ -44,8 +44,6 @@ <% @project.sorted_active_experiments(@current_sort).each_with_index do |experiment, index| %> <%= render partial: 'projects/show/experiment', locals: { experiment: experiment } %> - - <%= content_tag(:div, '', class: 'clearfix visible-lg-block') if (index + 1) % 2 == 0 %> <% end %> <% if can_create_experiments?(@project) %> <%= render 'projects/show/new_experiment' %> diff --git a/app/views/projects/show/_experiment.html.erb b/app/views/projects/show/_experiment.html.erb index 8cfc517e0..a1e18e30d 100644 --- a/app/views/projects/show/_experiment.html.erb +++ b/app/views/projects/show/_experiment.html.erb @@ -17,50 +17,68 @@ <%= render partial: 'experiments/dropdown_actions.html.erb', locals: { project: @project, experiment: experiment } %> - <% end %> -

<%= link_to experiment.name, canvas_experiment_path(experiment) %>

- - -
- <% if experiment.active_modules.length > 0 %> -
-
- <% else %> -
- <% if can_manage_experiment?(experiment) %> -

<%= link_to( t('experiments.edit.add_task'), - canvas_experiment_path(experiment, - editMode: true)) %>

- <% else %> -

<%= t('experiments.edit.no_workflowimg') %>

+ <% if can_clone_experiment?(experiment) %> + <%= link_to clone_modal_experiment_url(experiment), + remote: true, type: 'button', + class: 'clone-experiment help_tooltips pull-right', + data: { + tooltiplink: I18n.t('tooltips.link.experiment.copy'), + tooltipcontent: I18n.t('tooltips.text.experiment.copy') + } do %> +   + <%= t('experiments.clone.label_title') %> <% end %> -
+ <% end %> <% end %> - + +
<%= link_to experiment.name, canvas_experiment_path(experiment) %>
+ + <%= l(experiment.created_at, format: :full_date) %> - <%= l(experiment.updated_at, format: :full_date) %> -
+ +
<% if experiment.description? %>
<%= custom_auto_link(experiment.description, team: current_team) %>
<% else %> - - <% if can_manage_experiment?(experiment) %> - <%= link_to t('experiments.edit.add-description'), - edit_project_experiment_url(@project, experiment), - remote: true, - data: { id: experiment.id } %> - <% else %> -

<%= t('experiments.edit.no-description') %>

- <% end %> -
+ <% if can_manage_experiment?(experiment) %> + <%= link_to t('experiments.edit.add-description'), + edit_project_experiment_url(@project, experiment), + remote: true, + data: { id: experiment.id }, + class: 'experiment-no-description' %> + <% else %> +

<%= t('experiments.edit.no-description') %>

+ <% end %> <% end %>
+ +
+ <% if experiment.active_modules.length > 0 %> + <%= link_to canvas_experiment_path(experiment) do %> +
+
+ <% end %> + <% else %> + <% if can_manage_experiment?(experiment) %> + <%= link_to( t('experiments.edit.add_task'), + canvas_experiment_path(experiment, editMode: true), + class: 'no-workflowimg') %> + <% else %> +
+

<%= t('experiments.edit.no_workflowimg') %>

+
+ <% end %> + + <% end %> + +
diff --git a/app/views/projects/show/_new_experiment.html.erb b/app/views/projects/show/_new_experiment.html.erb index cabe05421..302249779 100644 --- a/app/views/projects/show/_new_experiment.html.erb +++ b/app/views/projects/show/_new_experiment.html.erb @@ -1,9 +1,10 @@
- -

<%= t('experiments.new.modal_title') %>

- + <%= link_to t('experiments.new.modal_title'), + new_project_experiment_url(@project), + remote: true, + class: 'panel-title new-exp-title' %>
<%= link_to new_project_experiment_url(@project), diff --git a/app/views/projects/show/_workflow_img.html.erb b/app/views/projects/show/_workflow_img.html.erb index 494501a01..f75e948ea 100644 --- a/app/views/projects/show/_workflow_img.html.erb +++ b/app/views/projects/show/_workflow_img.html.erb @@ -1,5 +1,4 @@ -<%= link_to image_tag(@experiment.workflowimg.expiring_url( +<%= image_tag(@experiment.workflowimg.expiring_url( Constants::URL_SHORT_EXPIRE_TIME ), - class: 'img-responsive center-block'), - canvas_experiment_path(@experiment) %> + class: 'img-responsive center-block') %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 6c9ceeb3b..6a854f7d1 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -769,7 +769,7 @@ en: label_title: 'Archive' clone: modal_title: 'Copy experiment %{experiment} as template' - label_title: 'Copy as template (only Protocols steps copied)' + label_title: 'Copy as template' modal_submit: 'Copy' success_flash: 'Successfully copied experiment %{experiment} as template.' error_flash: 'Could not copy the experiment as template.'