mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-03-04 19:53:19 +08:00
Merge pull request #1457 from mlorb/ml-sci-2933
Change experiment cards look and feel [SCI-2933]
This commit is contained in:
mlorb
GitHub
commit
8bad68c854
9 changed files with 150 additions and 80 deletions
|
|
@ -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();
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -652,7 +652,7 @@ ul.double-line > li {
|
|||
}
|
||||
|
||||
.panel-default > .panel-heading {
|
||||
background-color: $color-gainsboro;
|
||||
background-color: $color-white;
|
||||
|
||||
&>.panel-title {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -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' %>
|
||||
|
|
|
|||
|
|
@ -17,50 +17,68 @@
|
|||
<%= render partial: 'experiments/dropdown_actions.html.erb',
|
||||
locals: { project: @project, experiment: experiment } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<h3 class="panel-title"><%= link_to experiment.name, canvas_experiment_path(experiment) %></h3>
|
||||
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<% if experiment.active_modules.length > 0 %>
|
||||
<div class="workflowimg-container"
|
||||
data-check-img="<%= updated_img_experiment_url(experiment) %>"
|
||||
data-updated-img="<%= fetch_workflow_img_experiment_url(experiment) %>"
|
||||
data-timestamp="<%= experiment.updated_at %>" >
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="no-workflowimg">
|
||||
<% if can_manage_experiment?(experiment) %>
|
||||
<p><%= link_to( t('experiments.edit.add_task'),
|
||||
canvas_experiment_path(experiment,
|
||||
editMode: true)) %></p>
|
||||
<% else %>
|
||||
<p><%= t('experiments.edit.no_workflowimg') %></p>
|
||||
<% 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 %>
|
||||
<span class="fas fa-copy"></span>
|
||||
<%= t('experiments.clone.label_title') %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<span class="help_tooltips" data-tooltiplink="<%= I18n.t('tooltips.link.experiment.dates') %>" data-tooltipcontent="<%= I18n.t('tooltips.text.experiment.dates') %>">
|
||||
|
||||
<div class="panel-title"><%= link_to experiment.name, canvas_experiment_path(experiment) %></div>
|
||||
|
||||
<span class="help_tooltips panel-date" data-tooltiplink="<%= I18n.t('tooltips.link.experiment.dates') %>" data-tooltipcontent="<%= I18n.t('tooltips.text.experiment.dates') %>">
|
||||
<span class="fas fa-calendar-alt" aria-hidden="true"></span>
|
||||
<%= l(experiment.created_at, format: :full_date) %> - <%= l(experiment.updated_at, format: :full_date) %>
|
||||
</span>
|
||||
<div data-hook="experiment-card-body">
|
||||
|
||||
<div data-hook="experiment-card-description">
|
||||
<% if experiment.description? %>
|
||||
<div class='experiment-description'>
|
||||
<%= custom_auto_link(experiment.description, team: current_team) %>
|
||||
</div>
|
||||
<% else %>
|
||||
<span class='experiment-no-description'>
|
||||
<% 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 %>
|
||||
<p><%= t('experiments.edit.no-description') %></p>
|
||||
<% end %>
|
||||
</span>
|
||||
<% 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 %>
|
||||
<p class='experiment-no-description'><%= t('experiments.edit.no-description') %></p>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<% if experiment.active_modules.length > 0 %>
|
||||
<%= link_to canvas_experiment_path(experiment) do %>
|
||||
<div class="workflowimg-container"
|
||||
data-check-img="<%= updated_img_experiment_url(experiment) %>"
|
||||
data-updated-img="<%= fetch_workflow_img_experiment_url(experiment) %>"
|
||||
data-timestamp="<%= experiment.updated_at %>" >
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% if can_manage_experiment?(experiment) %>
|
||||
<%= link_to( t('experiments.edit.add_task'),
|
||||
canvas_experiment_path(experiment, editMode: true),
|
||||
class: 'no-workflowimg') %>
|
||||
<% else %>
|
||||
<div class="no-workflowimg">
|
||||
<p><%= t('experiments.edit.no_workflowimg') %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<div class="col-md-6">
|
||||
<div class="panel panel-default experiment-panel">
|
||||
<div class="panel-heading">
|
||||
|
||||
<h3 class="panel-title"><%= t('experiments.new.modal_title') %></h3>
|
||||
|
||||
<%= link_to t('experiments.new.modal_title'),
|
||||
new_project_experiment_url(@project),
|
||||
remote: true,
|
||||
class: 'panel-title new-exp-title' %>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<%= link_to new_project_experiment_url(@project),
|
||||
|
|
|
|||
|
|
@ -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') %>
|
||||
|
|
|
|||
|
|
@ -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.'
|
||||
|
|
|
|||
Loading…
Reference in a new issue