webui: add responsive extension

This commit is contained in:
Nicola Murino
2021-03-28 11:02:11 +02:00
parent 2a89a8f664
commit 183bedd6ed
21 changed files with 414 additions and 207 deletions

View File

@@ -4,8 +4,10 @@
{{define "extra_css"}}
<link href="/static/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<link href="/static/vendor/datatables/select.bootstrap4.min.css" rel="stylesheet">
<link href="/static/vendor/datatables/buttons.bootstrap4.min.css" rel="stylesheet">
<link href="/static/vendor/datatables/fixedHeader.bootstrap4.min.css" rel="stylesheet">
<link href="/static/vendor/datatables/responsive.bootstrap4.min.css" rel="stylesheet">
<link href="/static/vendor/datatables/select.bootstrap4.min.css" rel="stylesheet">
{{end}}
{{define "page_body"}}
@@ -24,7 +26,7 @@
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-bordered" id="dataTable" width="100%" cellspacing="0">
<table class="table table-striped table-bordered nowrap" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
@@ -83,10 +85,13 @@
{{define "extra_js"}}
<script src="/static/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/static/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="/static/vendor/datatables/dataTables.select.min.js"></script>
<script src="/static/vendor/datatables/select.bootstrap4.min.js"></script>
<script src="/static/vendor/datatables/dataTables.buttons.min.js"></script>
<script src="/static/vendor/datatables/buttons.bootstrap4.min.js"></script>
<script src="/static/vendor/datatables/dataTables.fixedHeader.min.js"></script>
<script src="/static/vendor/datatables/dataTables.responsive.min.js"></script>
<script src="/static/vendor/datatables/responsive.bootstrap4.min.js"></script>
<script src="/static/vendor/datatables/dataTables.select.min.js"></script>
<script src="/static/vendor/datatables/ellipsis.js"></script>
<script type="text/javascript">
function deleteAction() {
@@ -125,16 +130,18 @@
$(document).ready(function () {
$.fn.dataTable.ext.buttons.add = {
text: 'Add',
text: '<i class="fas fa-plus"></i>',
name: 'add',
titleAttr: "Add",
action: function (e, dt, node, config) {
window.location.href = '{{.AdminURL}}';
}
};
$.fn.dataTable.ext.buttons.edit = {
text: 'Edit',
text: '<i class="fas fa-pen"></i>',
name: 'edit',
titleAttr: "Edit",
action: function (e, dt, node, config) {
var username = dt.row({ selected: true }).data()[1];
var path = '{{.AdminURL}}' + "/" + fixedEncodeURIComponent(username);
@@ -144,8 +151,9 @@
};
$.fn.dataTable.ext.buttons.delete = {
text: 'Delete',
text: '<i class="fas fa-trash"></i>',
name: 'delete',
titleAttr: "Delete",
action: function (e, dt, node, config) {
$('#deleteModal').modal('show');
},
@@ -153,30 +161,36 @@
};
var table = $('#dataTable').DataTable({
dom: "<'row'<'col-sm-12'B>>" +
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
select: true,
stateSave: true,
stateDuration: 3600,
buttons: [],
"select": true,
"stateSave": true,
"stateDuration": 3600,
"buttons": [],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
},
{
"targets": [3],
"render": $.fn.dataTable.render.ellipsis(40, true),
}
],
"scrollX": false,
"scrollY": "50vh",
"responsive": true,
"order": [[1, 'asc']]
});
new $.fn.dataTable.FixedHeader( table );
{{if .LoggedAdmin.HasPermission "manage_admins"}}
table.button().add(0,'delete');
table.button().add(0,'edit');
table.button().add(0,'add');
table.buttons().container().appendTo('#dataTable_wrapper .col-md-6:eq(0)');
table.on('select deselect', function () {
var selectedRows = table.rows({ selected: true }).count();
table.button('edit:name').enable(selectedRows == 1);