mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-20 17:15:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use datatables-responsive.

Browse source 
This improves the experience with the tables on mobile view.
This commit is contained in:
Jan Böhmer 2020-01-04 22:09:37 +01:00
parent 3caac22a0e
commit 4e7c50a301
7 changed files with 39 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

4
assets/css/app.css
View file

@ -691,6 +691,10 @@ table.dataTable {
margin-top: 0 !important;
}
div.dataTables_wrapper div.dataTables_info {
white-space: normal;
}
/*******************************
Parts datatable styling

3
assets/js/app.js
View file

@ -62,6 +62,9 @@ require( 'datatables.net-buttons/js/buttons.print.js' );
require( 'datatables.net-fixedheader-bs4' );
require( 'datatables.net-select-bs4' );
require('datatables.net-colreorder-bs4');
require('datatables.net-colreorder-bs4');
require('datatables.net-responsive-bs4');
require('datatables.net-responsive-bs4/css/responsive.bootstrap4.css');
require('bootstrap-select');
require('jquery-form');
require('corejs-typeahead/dist/typeahead.bundle.min');

1
assets/ts_src/ajax_ui.ts
View file

@ -518,6 +518,7 @@ class AjaxUI {
var promise = $('#part_list').initDataTables(settings,
{
colReorder: true,
responsive: true,
"fixedHeader": { header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
headerOffset: $("#navbar").height()},
"buttons": [ {

2
config/packages/datatables.yaml
View file

@ -5,7 +5,7 @@ datatables:
# Set options, as documented at https://datatables.net/reference/option/
options:
lengthMenu : [10, 25, 50, 100, 250, 500, 1000, 2500]
lengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
pageLength: 50
#dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
dom: " <'row'<'col mb-2 input-group' B l> <'col mb-2' <'pull-right' p>>>

1
package.json
View file

@ -35,6 +35,7 @@
"datatables.net-buttons-bs4": "^1.5.4",
"datatables.net-colreorder-bs4": "^1.5.1",
"datatables.net-fixedheader-bs4": "^3.1.5",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-select-bs4": "^1.2.7",
"dompurify": "^2.0.6",
"exports-loader": "^0.7.0",

24
templates/Parts/lists/_info_card.html.twig
View file

@ -11,7 +11,7 @@
<div id="entityInfo" class="collapse">
<div class="card-body">
<div class="row">
<div class="col-2">
<div class="col-sm-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
{% trans %}entity.info.common.tab{% endtrans %}
@ -21,18 +21,18 @@
</a>
</div>
</div>
<div class="col-10">
<div class="col-sm-10">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="row">
<div class="col-8 form-horizontal">
<div class="col-sm-8 form-horizontal">
<div class="form-group">
<label class="col-3">{% trans %}entity.info.name{% endtrans %}:</label>
<span class="col form-control-static">{{ entity.name }}</span>
<label class="col-sm-3">{% trans %}entity.info.name{% endtrans %}:</label>
<span class="col-sm form-control-static">{{ entity.name }}</span>
</div>
<div class="form-group">
<label class="col-3">{% trans %}entity.info.parent{% endtrans %}:</label>
<span class="col form-control-static">
<label class="col-sm-3">{% trans %}entity.info.parent{% endtrans %}:</label>
<span class="col-sm form-control-static">
{% if entity.parent %}
{{ entity.parent.fullPath }}
{% else %}
@ -41,7 +41,7 @@
</span>
</div>
</div>
<div class="col-4">
<div class="col-sm-4">
<a class="btn btn-secondary btn-block mb-2" href="{{ entity | entityURL('edit') }}">
<i class="fas fa-edit"></i> {% trans %}entity.edit.btn{% endtrans %}
</a>
@ -60,12 +60,12 @@
<div class="tab-pane fade" id="v-pills-statistics" role="tabpanel" aria-labelledby="v-pills-statistics-tab">
<div class="form-horizontal">
<div class="form-group">
<label class="col-3">{% trans %}entity.info.children_count{% endtrans %}:</label>
<span class="col form-control-static">{{ entity.children | length }}</span>
<label class="col-sm-3">{% trans %}entity.info.children_count{% endtrans %}:</label>
<span class="col-sm form-control-static">{{ entity.children | length }}</span>
</div>
<div class="form-group">
<label class="col-3">{% trans %}entity.info.parent{% endtrans %}:</label>
<span class="col form-control-static">{{ entity.parts | length }}</span>
<label class="col-sm-3">{% trans %}entity.info.parent{% endtrans %}:</label>
<span class="col-sm form-control-static">{{ entity.parts | length }}</span>
</div>
</div>
</div>

17
yarn.lock
View file

@ -2271,6 +2271,23 @@ datatables.net-fixedheader@3.1.6:
datatables.net "^1.10.15"
jquery ">=1.7"
datatables.net-responsive-bs4@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/datatables.net-responsive-bs4/-/datatables.net-responsive-bs4-2.2.3.tgz#639de17c1d31210ebf2b3c25f1c774c13f729e94"
integrity sha512-SQaWI0uLuPcaiBBin9zX+MuQfTSIkK1bYxbXqUV6NLkHCVa6PMQK7Rvftj0ywG4R7uOtjbzY8nSVqxEKvQI0Vg==
dependencies:
datatables.net-bs4 "^1.10.15"
datatables.net-responsive "2.2.3"
jquery ">=1.7"
datatables.net-responsive@2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/datatables.net-responsive/-/datatables.net-responsive-2.2.3.tgz#50a2b1b4955b16b32f573a3f00f473b0bfbee913"
integrity sha512-8D6VtZcyuH3FG0Hn5A4LPZQEOX3+HrRFM7HjpmsQc/nQDBbdeBLkJX4Sh/o1nzFTSneuT1Wh/lYZHVPpjcN+Sw==
dependencies:
datatables.net "^1.10.15"
jquery ">=1.7"
datatables.net-select-bs4@^1.2.7:
version "1.3.1"
resolved "https://registry.yarnpkg.com/datatables.net-select-bs4/-/datatables.net-select-bs4-1.3.1.tgz#1c39c7fd5bfb66b5c8402611c2c64fc47e3cfca4"