make manage columns page more responsive [fixes SCI-2442]

This commit is contained in:
zmagod 2018-06-12 10:22:48 +02:00
parent 8e90efa94b
commit 1cff4a5060
3 changed files with 31 additions and 23 deletions

View file

@ -112,18 +112,18 @@
function _insertNewListItem(column) { function _insertNewListItem(column) {
// remove element if already persent // remove element if already persent
$('[data-id="' + column.id + '"]').remove(); $('[data-id="' + column.id + '"]').remove();
var html = '<li class="list-group-item" data-id="' + column.id + '" '; var html = '<li class="list-group-item row" data-id="' + column.id + '" ';
html += 'data-destroy-url="' + column.destroy_html_url + '"'; html += 'data-destroy-url="' + column.destroy_html_url + '"';
html += 'data-edit-url="' + column.edit_url + '">'; html += 'data-edit-url="' + column.edit_url + '"><div class="col-xs-8">';
html += '<span class="pull-left">' + column.name + '</span>'; html += '<span class="pull-left column-name">' + column.name + '</span>';
html += '<span class="controlls pull-right">'; html += '</div><div class="col-xs-4"><span class="controlls pull-right">';
html += '<button class="btn btn-default" data-action="edit">'; html += '<button class="btn btn-default" data-action="edit">';
html += '<span class="fas fa-pencil-alt"></span>&nbsp;'; html += '<span class="fas fa-pencil-alt"></span>&nbsp;';
html += '<%= I18n.t "libraries.repository_columns.index.edit_column" %></button>&nbsp;'; html += '<%= I18n.t "libraries.repository_columns.index.edit_column" %></button>&nbsp;';
html += '<button class="btn btn-default" data-action="destroy">'; html += '<button class="btn btn-default delete-column" data-action="destroy">';
html += '<span class="glyphicon glyphicon-trash"></span>&nbsp;'; html += '<span class="glyphicon glyphicon-trash"></span>&nbsp;';
html += '<%= I18n.t "libraries.repository_columns.index.delete_column" %>'; html += '<%= I18n.t "libraries.repository_columns.index.delete_column" %>';
html += '</button></span></li>'; html += '</button></span></div></li>';
$(html).insertBefore('.repository-columns-body ul li:first') $(html).insertBefore('.repository-columns-body ul li:first')
.promise() .promise()
.done(function() { .done(function() {

View file

@ -5,13 +5,17 @@
.list-group-item { .list-group-item {
padding: 28px; padding: 28px;
}
.controlls { .column-name {
margin-top: -18px; margin-top: 10px;
} }
}
span { @media only screen and (max-width: 768px) {
margin-top: -10px; .repository-columns-body {
.delete-column {
margin-top: 5px;
} }
} }
} }

View file

@ -32,21 +32,25 @@
<% else %> <% else %>
<% @repository_columns.each do |column| %> <% @repository_columns.each do |column| %>
<% cache column do %> <% cache column do %>
<li class="list-group-item" <li class="list-group-item row"
data-id="<%= column.id %>" data-id="<%= column.id %>"
data-destroy-url="<%= repository_columns_destroy_html_path(@repository, column) %>" data-destroy-url="<%= repository_columns_destroy_html_path(@repository, column) %>"
data-edit-url="<%= edit_repository_repository_column_path(@repository, column) %>"> data-edit-url="<%= edit_repository_repository_column_path(@repository, column) %>">
<span class="pull-left"><%= column.name %></span> <div class="col-xs-8">
<span class="controlls pull-right"> <span class="pull-left column-name"><%= column.name %></span>
<button class="btn btn-default" data-action="edit"> </div>
<span class="fas fa-pencil-alt"></span> <div class="col-xs-4">
<%=t 'libraries.repository_columns.index.edit_column'%> <span class="controlls pull-right">
</button> <button class="btn btn-default" data-action="edit">
<button class="btn btn-default" data-action="destroy"> <span class="fas fa-pencil-alt"></span>
<span class="glyphicon glyphicon-trash"></span> <%=t 'libraries.repository_columns.index.edit_column'%>
<%=t 'libraries.repository_columns.index.delete_column'%> </button>&nbsp;
</button> <button class="btn btn-default delete-column" data-action="destroy">
</span> <span class="glyphicon glyphicon-trash"></span>
<%=t 'libraries.repository_columns.index.delete_column'%>
</button>
</span>
</div>
</li> </li>
<% end %> <% end %>
<% end %> <% end %>