scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-15 09:34:29 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix general css issue for repositories

Browse source
This commit is contained in:
aignatov-bio 2020-01-15 16:46:01 +01:00
parent 91cb1b6c8e
commit b116c3720c
12 changed files with 130 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/assets/javascripts/repositories/renderers/edit_renderers.js
View file

@ -8,8 +8,8 @@ $.fn.dataTable.render.editRowName = function(formId, cell) {
let text = $cell.find('a').first().text();
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_row[name]"
@ -49,8 +49,8 @@ $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell)
let text = $cell.text();
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_cells[${columnId}]"
@ -137,8 +137,8 @@ $.fn.dataTable.render.editRepositoryNumberValue = function(formId, columnId, cel
let $cell = $(cell.node());
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="number"
name="repository_cells[${columnId}]"

12
app/assets/javascripts/repositories/renderers/new_renderers.js
View file

@ -5,8 +5,8 @@ GLOBAL_CONSTANTS DateTimeHelper
$.fn.dataTable.render.newRowName = function(formId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_row[name]"
@ -39,8 +39,8 @@ $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell
$.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="text"
name="repository_cells[${columnId}]"
@ -66,8 +66,8 @@ $.fn.dataTable.render.newRepositoryChecklistValue = function(formId, columnId, $
$.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cell) {
$cell.html(`
<div class="form-group">
<input class="form-control editing"
<div class="sci-input-container text-field">
<input class="sci-input-field"
form="${formId}"
type="number"
name="repository_cells[${columnId}]"

33
app/assets/javascripts/repositories/repository_datatable.js
View file

@ -382,7 +382,7 @@ var RepositoryDatatable = (function(global) {
function dataTableInit() {
viewAssigned = 'assigned';
TABLE = $(TABLE_ID).DataTable({
dom: "R<'main-actions'<'toolbar'><'filter-container'f>>t<'pagination-row'<'pagination-info'li><'pagination-actions'p>>",
dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
stateSave: true,
processing: true,
serverSide: true,
@ -516,6 +516,8 @@ var RepositoryDatatable = (function(global) {
});
},
fnInitComplete: function() {
var tableLengthSelect = $('.dataTables_length select')
var tableFilterInput = $('.dataTables_filter input')
initRowSelection();
bindExportActions();
disableCheckboxToggleOnAssetDownload();
@ -537,7 +539,34 @@ var RepositoryDatatable = (function(global) {
initCancelButton();
}
$('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
if ($('.repository-show').length) {
$('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
}
if (tableLengthSelect.val() == null) {
tableLengthSelect.val(10).change();
}
$.each(tableLengthSelect.find('option'), (i, option) => {
option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
})
$('.dataTables_length').append(tableLengthSelect).find('label').remove();
dropdownSelector.init(tableLengthSelect, {
noEmptyOption: true,
singleSelect: true,
closeOnSelect: true,
selectAppearance: 'simple'
})
tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
.addClass('sci-input-field')
.css('margin', 0);
$('.dataTables_filter').append(`
<div class="sci-input-container left-icon">
<i class="fas fa-search"></i>
</div>`).find('.sci-input-container').prepend(tableFilterInput)
$('.dataTables_filter').find('label').remove();
$('.main-actions, .pagination-row').removeClass('hidden');
}
});

1
app/assets/stylesheets/application.scss
View file

@ -28,6 +28,7 @@
@import "partials/*";
@import "my_modules/protocols/*";
@import "my_modules/results/*";
@import "my_modules/*";
@import "protocols/*";
@import "repository/*";
@import "repository_columns/*";

2
app/assets/stylesheets/extend/datatable.scss
View file

@ -12,7 +12,7 @@
tr {
th {
border-bottom-width: 0;
border-bottom: 2px solid $color-white;
border-left: 2px solid $color-white;
font-weight: bold;

69
app/assets/stylesheets/my_modules/repositories.scss Normal file
View file

@ -0,0 +1,69 @@
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule
.my-module-inventories {
.main-actions {
align-items: center;
display: flex;
.filter-container {
flex-grow: 1;
}
}
.dataTables_scroll {
.dataTables_scrollBody {
thead {
opacity: 0;
}
}
}
tbody {
tr:hover {
.assigned-column {
.repository-row-edit-icon {
display: none !important;
}
.circle-icon {
margin-left: 30px !important;
}
}
}
}
.pagination-row {
align-items: center;
display: flex;
.pagination-info,
.pagination-actions {
flex-grow: 1;
}
.pagination-info {
align-items: center;
display: flex;
.dataTables_info {
padding-top: 0;
}
.dataTables_length {
margin-right: 24px;
width: 170px;
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;
}
}
}
}
}

7
app/assets/stylesheets/repositories.scss
View file

@ -166,7 +166,12 @@
}
.dataTables_length {
margin-right: 10px;
margin-right: 24px;
width: 170px;
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;

6
app/assets/stylesheets/repository/repository_table.scss
View file

@ -80,6 +80,12 @@
}
}
// Text and Number field
.text-field.sci-input-container {
min-width: 150px;
}
// DateTime
.datetime-container {
display: flex;

1
app/assets/stylesheets/shared_styles/elements/input_fields.scss
View file

@ -16,6 +16,7 @@
animation-timing-function: $timing-function-sharp;
border: $border-default;
border-radius: $border-radius-default;
box-shadow: none;
height: 36px;
outline: 0;
padding: 0 0 0 10px;

8
app/assets/stylesheets/themes/scinote.scss
View file

@ -516,14 +516,6 @@ a[data-toggle="tooltip"] {
.dataTables_wrapper {
margin-top: 15px;
clear: both;
.dataTables_length {
float: left;
}
.dataTables_filter {
float: right;
}
}
table {

2
app/views/my_modules/repository.html.erb
View file

@ -44,7 +44,7 @@
<% end %>
</div>
<div id="content"
<div id="content" class="my-module-inventories"
data-repo-id="#repository-table-<%= @repository.id %>">
<%= render partial: "repositories/repository_table",
locals: {

2
config/locales/en.yml
View file

@ -1007,6 +1007,8 @@ en:
edit_inventory: "Edit Inventory"
share_inventory: "Share"
view_only_permission_label: "You have veiw-only permission"
show_per_page: "Show %{number} per page"
filter_inventory: "Filter inventory"
options_dropdown:
import_items: 'Import items'