mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-07 13:44:23 +08:00
Update protocol preview style [SCI-3416] (#1729)
* Update protocol appearance
This commit is contained in:
aignatov-bio
GitHub
parent
3633274c8f
commit
71b3228310
16 changed files with 105 additions and 188 deletions
|
|
@ -23,4 +23,5 @@
|
|||
@import "select2.min";
|
||||
@import "extend/perfect-scrollbar";
|
||||
@import "my_modules/protocols/*";
|
||||
@import "protocols/*";
|
||||
@import "hooks/*";
|
||||
|
|
|
|||
|
|
@ -14,6 +14,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.protocol-info,
|
||||
.module-header {
|
||||
.well {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
background: transparent;
|
||||
color: $color-silver;
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
|
||||
+ .well-sm {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-header {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -46,25 +68,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.well {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.badge-icon {
|
||||
background: transparent;
|
||||
color: $color-silver;
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
|
||||
+ .well-sm {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.module-description {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
|
|
|||
17
app/assets/stylesheets/protocols/preview_modal.scss
Normal file
17
app/assets/stylesheets/protocols/preview_modal.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
#protocol-preview-modal .modal-dialog {
|
||||
.modal-body {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.ql-editor {
|
||||
min-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
app/assets/stylesheets/protocols/protocol.scss
Normal file
12
app/assets/stylesheets/protocols/protocol.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
|
||||
@import "constants";
|
||||
@import "mixins";
|
||||
|
||||
.protocol-info {
|
||||
|
||||
.protocol-description {
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
||||
|
|
@ -940,18 +940,6 @@ ul.content-activities {
|
|||
}
|
||||
}
|
||||
|
||||
#protocol-preview-modal .modal-dialog {
|
||||
.modal-body {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
|
||||
.ql-editor {
|
||||
min-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Import protocol/s modal */
|
||||
#import-protocol-modal .modal-dialog {
|
||||
width: 70%;
|
||||
|
|
|
|||
|
|
@ -59,17 +59,7 @@
|
|||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
|
||||
<!-- Libraries for formulas -->
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
<%= render partial: "shared/formulas_libraries.html.erb" %>
|
||||
|
||||
<%= javascript_include_tag("canvas-to-blob.min") %>
|
||||
<%= javascript_include_tag "assets/wopi/create_wopi_file" %>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row protocol-info">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-user fa-lg"></span>
|
||||
<span class="fas fa-user"></span>
|
||||
</div>
|
||||
<div class="well well-sm">
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.added_by" %>:</span>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<div class="col-xs-12 col-sm-8 col-md-8">
|
||||
<div class="badge-icon">
|
||||
<% if can_manage_protocol_in_repository?(@protocol) %>
|
||||
<a data-action="edit-keywords" data-remote="true" href="<%= edit_keywords_modal_protocol_path(@protocol, format: :json) %>" style="color: inherit;">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<% if can_manage_protocol_in_repository?(@protocol) %>
|
||||
<a data-action="edit-authors" data-remote="true" href="<%= edit_authors_modal_protocol_path(@protocol, format: :json) %>" style="color: inherit;">
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 protocol-description">
|
||||
<%= render partial: "protocols/header/description_label.html.erb", locals: {edit_mode: true} %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,17 +31,7 @@
|
|||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
|
||||
<!-- Libraries for formulas -->
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
<%= render partial: "shared/formulas_libraries.html.erb" %>
|
||||
|
||||
<%= javascript_include_tag "assets/wopi/create_wopi_file" %>
|
||||
<%= javascript_include_tag "protocols/steps" %>
|
||||
|
|
|
|||
|
|
@ -10,3 +10,5 @@
|
|||
</div>
|
||||
|
||||
<%= javascript_include_tag "protocols/edit" %>
|
||||
<!-- Create new office file modal -->
|
||||
<%= render partial: 'assets/wopi/create_wopi_file_modal.html.erb' %>
|
||||
|
|
@ -150,17 +150,7 @@
|
|||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
|
||||
<!-- Libraries for formulas -->
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
<%= render partial: "shared/formulas_libraries.html.erb" %>
|
||||
|
||||
<%= stylesheet_link_tag 'datatables' %>
|
||||
<%= javascript_include_tag "assets/wopi/create_wopi_file" %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="row">
|
||||
<div class="row protocol-info">
|
||||
<div class="col-xs-6 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-calendar-alt"></span>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-user fa-lg"></span>
|
||||
<span class="fas fa-user"></span>
|
||||
</div>
|
||||
<div class="well well-sm">
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.added_by" %>:</span>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<div class="col-xs-12 col-sm-8 col-md-8">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-font"></span>
|
||||
</div>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-6 col-md-6">
|
||||
<div class="col-xs-12 col-sm-4 col-md-4">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-graduation-cap"></span>
|
||||
</div>
|
||||
|
|
@ -49,12 +49,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-12 col-md-12">
|
||||
<div class="badge-icon">
|
||||
<span class="fas fa-info-circle"></span>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 protocol-description">
|
||||
<div class="well well-sm">
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.description" %>:</span>
|
||||
<%= render partial: "protocols/header/description_label.html.erb", locals: {edit_mode: false} %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -68,88 +64,22 @@
|
|||
</div>
|
||||
<div id="steps">
|
||||
<% protocol.steps.order(:position).each do |step| %>
|
||||
<div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
|
||||
<div class="badge-num">
|
||||
<span class="badge size-digit-<%= (step.position_plus_one).to_s.length %>"><%= step.position_plus_one %></span>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<strong><%= step.name %></strong> |
|
||||
<span><%= t("protocols.steps.published_on", timestamp: l(step.created_at, format: :full), user: h(step.user.full_name)).html_safe %></span>
|
||||
</div>
|
||||
<div class="panel-collapse collapse in" id="step-panel-<%= step.id %>" role="tabpanel" aria-expanded="true">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<% if sanitize_input(step.description).blank? %>
|
||||
<em><%= t("protocols.steps.no_description") %></em>
|
||||
<% else %>
|
||||
<div class="ql-editor">
|
||||
<%= sanitize_input(step.tinymce_render(:description), ['img']) %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<% unless step.tables.blank? then %>
|
||||
<hr>
|
||||
<div class="col-xs-12">
|
||||
<% step.tables.each do |table| %>
|
||||
<strong><%= table.name %></strong>
|
||||
<div data-role="hot-table" class="hot-table">
|
||||
<%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
|
||||
<div data-role="step-hot-table" class="step-result-hot-table"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% assets = ordered_assets(step) %>
|
||||
<% unless assets.blank? then %>
|
||||
<hr>
|
||||
<div class="col-xs-12">
|
||||
<strong><%= t("protocols.steps.files") %></strong>
|
||||
<ul>
|
||||
<% assets.each do |asset| %>
|
||||
<li>
|
||||
<%= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% unless step.checklists.blank? then %>
|
||||
<div class="col-xs-12">
|
||||
<% step.checklists.asc.each do |checklist| %>
|
||||
<strong><%= checklist.name %></strong>
|
||||
<% if checklist.checklist_items.empty? %>
|
||||
</br>
|
||||
<%= t("protocols.steps.empty_checklist") %>
|
||||
</br>
|
||||
<% else %>
|
||||
<% ordered_checklist_items(checklist).each do |checklist_item| %>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<% if protocol.in_module? %>
|
||||
<input type="checkbox" value="" <%= "checked" if checklist_item.checked? %> disabled="disabled"/>
|
||||
<% else %>
|
||||
<input type="checkbox" value="" disabled="disabled" />
|
||||
<% end %>
|
||||
<%= checklist_item.text %>
|
||||
</label>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%= render partial: "steps/step.html.erb", locals: { step: step, preview: true } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
|
||||
<%= javascript_include_tag "protocols/steps" %>
|
||||
|
|
|
|||
|
|
@ -83,17 +83,7 @@
|
|||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
|
||||
<!-- Libraries for formulas -->
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
<%= render partial: "shared/formulas_libraries.html.erb" %>
|
||||
|
||||
<%= javascript_include_tag("reports/new") %>
|
||||
<%= javascript_include_tag 'reports/save_pdf_to_inventory' %>
|
||||
|
|
|
|||
|
|
@ -125,17 +125,7 @@
|
|||
<%= javascript_include_tag "handsontable.full.min" %>
|
||||
|
||||
<!-- Libraries for formulas -->
|
||||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
<%= render partial: "shared/formulas_libraries.html.erb" %>
|
||||
|
||||
<%= stylesheet_link_tag 'datatables' %>
|
||||
<%= javascript_include_tag "protocols/index" %>
|
||||
|
|
|
|||
11
app/views/shared/_formulas_libraries.html.erb
Normal file
11
app/views/shared/_formulas_libraries.html.erb
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<%= javascript_include_tag "lodash" %>
|
||||
<%= javascript_include_tag "numeral" %>
|
||||
<%= javascript_include_tag "numeric" %>
|
||||
<%= javascript_include_tag "md5" %>
|
||||
<%= javascript_include_tag "jstat" %>
|
||||
<%= javascript_include_tag "formula" %>
|
||||
<%= javascript_include_tag "parser" %>
|
||||
<%= javascript_include_tag "ruleJS" %>
|
||||
<%= javascript_include_tag "handsontable.formula" %>
|
||||
<%= javascript_include_tag "big.min" %>
|
||||
<%= stylesheet_link_tag "handsontable.formula" %>
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
<% preview = (defined?(preview) ? preview : false) %>
|
||||
<div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-options pull-right">
|
||||
<% if can_complete_or_checkbox_step?(@protocol) %>
|
||||
<% if can_complete_or_checkbox_step?(@protocol) && !(preview) %>
|
||||
<% if step.completed? %>
|
||||
<div data-action="uncomplete-step"
|
||||
class="complete-step-btn"
|
||||
|
|
@ -24,8 +25,8 @@
|
|||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if can_manage_protocol_in_module?(@protocol) ||
|
||||
can_manage_protocol_in_repository?(@protocol) %>
|
||||
<% if (can_manage_protocol_in_module?(@protocol) ||
|
||||
can_manage_protocol_in_repository?(@protocol)) && !(preview) %>
|
||||
<a data-action="move-step"
|
||||
class="btn btn-link"
|
||||
href="<%= move_up_step_path(step, format: :json) %>"
|
||||
|
|
@ -110,7 +111,7 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= render partial: 'steps/attachments/list.html.erb', locals: { step: step } %>
|
||||
<%= render partial: 'steps/attachments/list.html.erb', locals: { step: step, preview: preview } %>
|
||||
|
||||
<% unless step.checklists.blank? then %>
|
||||
<div class="col-xs-12">
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="attachemnts-header pull-right">
|
||||
<%= render partial: '/assets/wopi/create_wopi_file_button.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step' } %>
|
||||
<% if !(preview) %>
|
||||
<%= render partial: '/assets/wopi/create_wopi_file_button.html.erb',
|
||||
locals: { element_id: step.id, element_type: 'Step' } %>
|
||||
<% end %>
|
||||
<div class="dropdown attachments-order" id="dd-att-step-<%= step.id %>">
|
||||
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span id="dd-att-step-<%= step.id %>-label"><%= t('protocols.steps.attachments.sort_new').html_safe %></span>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue