Use datatables-responsive.

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

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>