From 7fdef4d3ec2ec6576666f48c7d92799cf47b2c54 Mon Sep 17 00:00:00 2001 From: mlorb Date: Fri, 18 Jan 2019 15:57:44 +0100 Subject: [PATCH 1/4] Change experiment cards look and feel --- .../experiments/dropdown_actions.js | 28 +++++--- app/assets/stylesheets/projects.scss | 65 +++++++++++++++---- app/assets/stylesheets/themes/scinote.scss | 2 +- .../experiments/_dropdown_actions.html.erb | 10 --- app/views/projects/show.html.erb | 2 - app/views/projects/show/_experiment.html.erb | 58 +++++++++++------ config/locales/en.yml | 2 +- 7 files changed, 110 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js index b752370ee..7659d8e9a 100644 --- a/app/assets/javascripts/experiments/dropdown_actions.js +++ b/app/assets/javascripts/experiments/dropdown_actions.js @@ -44,7 +44,6 @@ // click on buttonClass summons modalName dialog modals = { '.edit-experiment': '#edit-experiment-modal-', - '.clone-experiment': '#clone-experiment-modal-', '.move-experiment': '#move-experiment-modal-' }; @@ -118,16 +117,25 @@ 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 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/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index cfe1820cd..7ec42d923 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -463,10 +463,19 @@ li.module-hover { } } + +#project-show { + @media (min-width: 1400px) { + .col-md-6 { + width: 33.3333333333%;; + } + } +} + // EXPERIMENT PANEL .experiment-panel { @include box-shadow(0 4px 8px 0 $color-dove-gray); - height: 550px; + height: 400px; margin: 0 auto; margin-bottom: 35px; margin-top: 45px; @@ -474,6 +483,37 @@ li.module-hover { 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; + } + + .clone-experiment { + color: $color-silver-chalice; + padding-top: 2px; + padding-left: 4px; + } + + .dropdown { + color: $color-silver-chalice; + button { + padding-left: 6px; + } + } + .panel-body { display: flex; flex: 1 1 auto; @@ -481,20 +521,21 @@ li.module-hover { } .experiment-description { - border: 1px solid $color-alto; - border-radius: 4px; - height: 100px; + max-height: 86px; margin-top: 10px; 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 { @@ -508,9 +549,9 @@ li.module-hover { display: block; font-size: 26px; font-weight: bold; - height: 300px; + max-height: 200px; margin: 15px 0; - padding-top: 150px; + padding-top: 50px; text-align: center; a { @@ -521,11 +562,11 @@ li.module-hover { } .workflowimg-container { - height: 300px; + max-height: 200px; margin: 15px 0; 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 4eca577ba..aa465ab8e 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/experiments/_dropdown_actions.html.erb b/app/views/experiments/_dropdown_actions.html.erb index 4bab9f357..6863b1204 100644 --- a/app/views/experiments/_dropdown_actions.html.erb +++ b/app/views/experiments/_dropdown_actions.html.erb @@ -11,16 +11,6 @@ class: 'edit-experiment' %> <% end %>
  • - <% if can_clone_experiment?(experiment) %> -
  • <%= link_to t('experiments.clone.label_title'), - clone_modal_experiment_url(experiment), - remote: true, type: 'button', - class: 'clone-experiment help_tooltips', - data: { - tooltiplink: I18n.t('tooltips.link.experiment.copy'), - tooltipcontent: I18n.t('tooltips.text.experiment.copy') - } %>
    • - <% end %> <% if can_move_experiment?(experiment) %>
  • <%= link_to t('experiments.move.label_title'), move_modal_experiment_url(experiment), 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..0353809af 100644 --- a/app/views/projects/show/_experiment.html.erb +++ b/app/views/projects/show/_experiment.html.erb @@ -17,32 +17,27 @@ <%= 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? %>
    @@ -62,5 +57,26 @@ <% end %>
    + +
    + <% 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') %>

    + <% end %> +
    + <% end %> + +
    diff --git a/config/locales/en.yml b/config/locales/en.yml index 191d786ea..57eee0d70 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.' From d2108ac3ea1dab6e3cff531ec99e8926a7ea405a Mon Sep 17 00:00:00 2001 From: mlorb Date: Fri, 18 Jan 2019 16:16:00 +0100 Subject: [PATCH 2/4] fix hound --- .../javascripts/experiments/dropdown_actions.js | 6 +++--- app/assets/stylesheets/projects.scss | 15 ++++++++------- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js index 7659d8e9a..188123539 100644 --- a/app/assets/javascripts/experiments/dropdown_actions.js +++ b/app/assets/javascripts/experiments/dropdown_actions.js @@ -120,14 +120,14 @@ $(document).on('turbolinks:load', function() { // Bind modal to new-experiment action - initializeModal($("#new-experiment"), '#new-experiment-modal'); + initializeModal($('#new-experiment'), '#new-experiment-modal'); // Bind modal to big-plus new experiment actions initializeModal('.big-plus', '#new-experiment-modal'); // Bind modals to all clone-experiment actions $.each($('.clone-experiment'), function() { - var id = $(this).closest('.experiment-panel').data('id') + var id = $(this).closest('.experiment-panel').data('id'); initializeModal($(this), '#clone-experiment-modal-' + id); }); @@ -137,5 +137,5 @@ // init initEditNoDescription(); - } ); + }); })(); diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 7ec42d923..1009f514b 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -467,7 +467,7 @@ li.module-hover { #project-show { @media (min-width: 1400px) { .col-md-6 { - width: 33.3333333333%;; + width: 33.3333333333%; } } } @@ -475,13 +475,13 @@ li.module-hover { // EXPERIMENT PANEL .experiment-panel { @include box-shadow(0 4px 8px 0 $color-dove-gray); + 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; @@ -503,12 +503,13 @@ li.module-hover { .clone-experiment { color: $color-silver-chalice; - padding-top: 2px; padding-left: 4px; + padding-top: 2px; } .dropdown { color: $color-silver-chalice; + button { padding-left: 6px; } @@ -521,8 +522,8 @@ li.module-hover { } .experiment-description { - max-height: 86px; margin-top: 10px; + max-height: 86px; overflow-x: hidden; p { @@ -549,8 +550,8 @@ li.module-hover { display: block; font-size: 26px; font-weight: bold; - max-height: 200px; margin: 15px 0; + max-height: 200px; padding-top: 50px; text-align: center; @@ -562,8 +563,8 @@ li.module-hover { } .workflowimg-container { - max-height: 200px; margin: 15px 0; + max-height: 200px; img { max-height: 190px; From 089ec643981ee01a6a18610ed8f196e6d8e44010 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Mon, 28 Jan 2019 16:59:40 +0100 Subject: [PATCH 3/4] fix experiment card look on Matejs request --- .../experiments/dropdown_actions.js | 6 ++- app/assets/javascripts/projects/show.js | 3 +- app/assets/stylesheets/projects.scss | 29 ++++++----- .../experiments/_dropdown_actions.html.erb | 10 ++++ app/views/projects/show/_experiment.html.erb | 50 ++++++++++--------- .../projects/show/_new_experiment.html.erb | 7 +-- .../projects/show/_workflow_img.html.erb | 5 +- 7 files changed, 63 insertions(+), 47 deletions(-) diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js index 188123539..7844247f3 100644 --- a/app/assets/javascripts/experiments/dropdown_actions.js +++ b/app/assets/javascripts/experiments/dropdown_actions.js @@ -44,6 +44,7 @@ // click on buttonClass summons modalName dialog modals = { '.edit-experiment': '#edit-experiment-modal-', + '.clone-experiment': '#clone-experiment-modal-', '.move-experiment': '#move-experiment-modal-' }; @@ -112,7 +113,7 @@ // Initialize no description edit link function initEditNoDescription(){ var modal = "#edit-experiment-modal-"; - $.each($(".experiment-no-description a"), function(){ + $.each($(".experiment-no-description"), function(){ var id = modal + $(this).data("id"); initializeModal($(this), id); }); @@ -125,6 +126,9 @@ // Bind modal to big-plus new experiment actions initializeModal('.big-plus', '#new-experiment-modal'); + // 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'); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index 78b367e45..43d3ac66f 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 1009f514b..5fe25337b 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -467,7 +467,8 @@ li.module-hover { #project-show { @media (min-width: 1400px) { .col-md-6 { - width: 33.3333333333%; + width: 33.33%; // fallback if needed + width: calc(100% / 3); } } } @@ -501,7 +502,7 @@ li.module-hover { color: $color-silver-chalice; } - .clone-experiment { + .panel-heading > .clone-experiment { color: $color-silver-chalice; padding-left: 4px; padding-top: 2px; @@ -519,6 +520,11 @@ li.module-hover { display: flex; flex: 1 1 auto; flex-direction: column; + height: 100%; + + a { + height: 100%; + } } .experiment-description { @@ -538,33 +544,26 @@ li.module-hover { 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; margin: 15px 0; max-height: 200px; + padding-bottom: 70px; padding-top: 50px; text-align: center; - - a { - color: $color-alto; - text-decoration: none; - } } } .workflowimg-container { - margin: 15px 0; - max-height: 200px; + align-items: center; + display: flex; + height: 100%; + justify-content: center; img { max-height: 190px; diff --git a/app/views/experiments/_dropdown_actions.html.erb b/app/views/experiments/_dropdown_actions.html.erb index 6863b1204..4bab9f357 100644 --- a/app/views/experiments/_dropdown_actions.html.erb +++ b/app/views/experiments/_dropdown_actions.html.erb @@ -11,6 +11,16 @@ class: 'edit-experiment' %>
    • <% end %>
  • + <% if can_clone_experiment?(experiment) %> +
  • <%= link_to t('experiments.clone.label_title'), + clone_modal_experiment_url(experiment), + remote: true, type: 'button', + class: 'clone-experiment help_tooltips', + data: { + tooltiplink: I18n.t('tooltips.link.experiment.copy'), + tooltipcontent: I18n.t('tooltips.text.experiment.copy') + } %>
    • + <% end %> <% if can_move_experiment?(experiment) %>
  • <%= link_to t('experiments.move.label_title'), move_modal_experiment_url(experiment), diff --git a/app/views/projects/show/_experiment.html.erb b/app/views/projects/show/_experiment.html.erb index 0353809af..a1e18e30d 100644 --- a/app/views/projects/show/_experiment.html.erb +++ b/app/views/projects/show/_experiment.html.erb @@ -38,43 +38,45 @@ <%= 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)) %>

    - <% 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 %> + <% 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') %> From 3b4a894124cb5e76832416cc9e7d8916a7a95b54 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Tue, 12 Feb 2019 11:24:44 +0100 Subject: [PATCH 4/4] fix hound --- app/assets/javascripts/experiments/dropdown_actions.js | 4 ++-- app/assets/javascripts/projects/show.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/experiments/dropdown_actions.js b/app/assets/javascripts/experiments/dropdown_actions.js index 7844247f3..652525707 100644 --- a/app/assets/javascripts/experiments/dropdown_actions.js +++ b/app/assets/javascripts/experiments/dropdown_actions.js @@ -112,8 +112,8 @@ } // Initialize no description edit link function initEditNoDescription(){ - var modal = "#edit-experiment-modal-"; - $.each($(".experiment-no-description"), function(){ + var modal = '#edit-experiment-modal-'; + $.each($('.experiment-no-description'), function() { var id = modal + $(this).data("id"); initializeModal($(this), id); }); diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js index 43d3ac66f..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, {color: '#555', top: '60%', zIndex: '100'}); + animateSpinner(container, true, { color: '#555', top: '60%', zIndex: '100' }); checkUpdatedImg(img_url, url, timestamp, container); } @@ -54,7 +54,7 @@ type: "GET", dataType: "json", success: function (data) { - el.children("img").remove(); + el.children('img').remove(); el.append(data.workflowimg); }, error: function (ev) {