mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-01-30 19:48:18 +08:00
Change experiment cards look and feel
This commit is contained in:
mlorb
parent
30155a2010
commit
7fdef4d3ec
7 changed files with 110 additions and 57 deletions
|
|
@ -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();
|
||||
} );
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -652,7 +652,7 @@ ul.double-line > li {
|
|||
}
|
||||
|
||||
.panel-default > .panel-heading {
|
||||
background-color: $color-gainsboro;
|
||||
background-color: $color-white;
|
||||
|
||||
&>.panel-title {
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -11,16 +11,6 @@
|
|||
class: 'edit-experiment' %></li>
|
||||
<% end %>
|
||||
<li data-hook="experiment-actions-second-child"></li>
|
||||
<% if can_clone_experiment?(experiment) %>
|
||||
<li><%= 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')
|
||||
} %></li>
|
||||
<% end %>
|
||||
<% if can_move_experiment?(experiment) %>
|
||||
<li><%= link_to t('experiments.move.label_title'),
|
||||
move_modal_experiment_url(experiment),
|
||||
|
|
|
|||
|
|
@ -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,32 +17,27 @@
|
|||
<%= 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">
|
||||
<% if experiment.description? %>
|
||||
<div class='experiment-description'>
|
||||
|
|
@ -62,5 +57,26 @@
|
|||
<% end %>
|
||||
</div>
|
||||
</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>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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