Skip to content

Commit da3c3f4

Browse files
coudotcoudot
authored
Merge pull request #204 from ltb-project/202-do-not-use-tables-when-not-needed
Improve responsiveness
2 parents 46cb0e4 + 9d138d7 commit da3c3f4

File tree

5 files changed

+31
-23
lines changed

5 files changed

+31
-23
lines changed

‎composer.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"components/jquery": "v3.7.1",
44
"datatables.net/datatables.net-bs5": "2.0.8",
55
"datatables.net/datatables.net-buttons-bs5": "3.0.2",
6+
"datatables.net/datatables.net-responsive-bs5": "3.0.2",
67
"fortawesome/font-awesome": "v6.5.2",
78
"ltb-project/ltb-common": "dev-main",
89
"twbs/bootstrap": "v5.3.6"
@@ -28,8 +29,11 @@
2829
"cp vendor/datatables.net/datatables.net-buttons/js/buttons.colVis.min.js htdocs/vendor/datatables/",
2930
"cp vendor/datatables.net/datatables.net-buttons/js/buttons.html5.min.js htdocs/vendor/datatables/",
3031
"cp vendor/datatables.net/datatables.net-buttons/js/buttons.print.min.js htdocs/vendor/datatables/",
32+
"cp vendor/datatables.net/datatables.net-responsive/js/dataTables.responsive.min.js htdocs/vendor/datatables/",
3133
"cp vendor/datatables.net/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css htdocs/vendor/datatables/",
3234
"cp vendor/datatables.net/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js htdocs/vendor/datatables/",
35+
"cp vendor/datatables.net/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css htdocs/vendor/datatables/",
36+
"cp vendor/datatables.net/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js htdocs/vendor/datatables/",
3337
"rm -rf vendor/datatables.net",
3438

3539
"rm -rf htdocs/vendor/font-awesome/*",

‎templates/display.tpl‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,35 +16,36 @@
1616
<img src="photo.php?dn={$entry.dn|escape:'url'}" alt="{$entry.{$attributes_map.{$card_title}.attribute}.0}" class="img-fluid mx-auto d-block" />
1717
{/if}
1818

19-
<div class="table-responsive">
20-
<table class="table table-striped table-hover">
19+
<div class="container-fluid">
20+
{assign var="modulo" value=0}
2121
{foreach $card_items as $item}
2222
{$attribute=$attributes_map.{$item}.attribute}
2323
{$type=$attributes_map.{$item}.type}
2424
{$faclass=$attributes_map.{$item}.faclass}
2525

2626
{if !({$entry.$attribute.0}) && ! $show_undef}
27+
{if $modulo==0}{assign var="modulo" value=1}{else}{assign var="modulo" value=0}{/if}
2728
{continue}
2829
{/if}
29-
<tr>
30-
<th class="text-center">
30+
31+
<div class="row align-items-center p-2{if $smarty.foreach.items.iteration % 2 == $modulo} bg-white{/if}">
32+
<div class="col-1 px-1">
3133
<i class="fa fa-fw fa-{$faclass}"></i>
32-
</th>
33-
<th class="hidden-xs">
34+
</div>
35+
<div class="col-11 col-sm-3 px-1 fw-semibold">
3436
{$msg_label_{$item}}
35-
</th>
36-
<td>
37+
</div>
38+
<div class="col-sm px-1">
3739
{if ({$entry.$attribute.0})}
3840
{foreach $entry.{$attribute} as $value}
3941
{include 'value_displayer.tpl' item=$item value=$value type=$type truncate_value_after=10000}
4042
{/foreach}
4143
{else}
4244
<i>{$msg_notdefined}</i><br />
4345
{/if}
44-
</td>
45-
</tr>
46+
</div>
47+
</div>
4648
{/foreach}
47-
</table>
4849
</div>
4950

5051
</div>

‎templates/footer.tpl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@
1010
<script src="vendor/datatables/dataTables.min.js"></script>
1111
<script src="vendor/datatables/dataTables.bootstrap5.min.js"></script>
1212
<script src="vendor/datatables/dataTables.buttons.min.js"></script>
13+
<script src="vendor/datatables/dataTables.responsive.min.js"></script>
1314
<script src="vendor/datatables/buttons.colVis.min.js"></script>
1415
<script src="vendor/datatables/buttons.html5.min.js"></script>
1516
<script src="vendor/datatables/buttons.print.min.js"></script>
1617
<script src="vendor/datatables/buttons.bootstrap5.min.js"></script>
18+
<script src="vendor/datatables/responsive.bootstrap5.min.js"></script>
1719
{/if}
1820
<script>
1921
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -56,6 +58,7 @@ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstra
5658
language: {
5759
url: "vendor/datatables/i18n/{/literal}{$lang|default:'en'}{literal}.json"
5860
},
61+
responsive: true,
5962
initComplete: function () {
6063
$("#spinner").hide();
6164
$('table.dataTable').show();

‎templates/header.tpl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
{if $use_datatables}
1414
<link rel="stylesheet" type="text/css" href="vendor/datatables/dataTables.bootstrap5.min.css" />
1515
<link rel="stylesheet" type="text/css" href="vendor/datatables/buttons.bootstrap5.min.css" />
16+
<link rel="stylesheet" type="text/css" href="vendor/datatables/responsive.bootstrap5.min.css" />
1617
{/if}
1718
{if $hover_effect}
1819
<link rel="stylesheet" type="text/css" href="vendor/hover/css/hover-min.css" />

‎templates/updateinfos.tpl‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
{/if}
3232
{/if}
3333

34-
<div class="table-responsive">
35-
<table class="table table-striped table-hover">
34+
<div class="container-fluid">
35+
{assign var="modulo" value=0}
3636
{foreach $card_items as $item}
3737
{$attribute=$attributes_map.{$item}.attribute}
3838
{$type=$attributes_map.{$item}.type}
@@ -47,18 +47,19 @@
4747
{/if}
4848

4949
{if !({$entry.$attribute.0}) && ! $item|in_array:$update_items}
50+
{if $modulo==0}{assign var="modulo" value=1}{else}{assign var="modulo" value=0}{/if}
5051
{continue}
5152
{/if}
5253

53-
<tr id="update_{$item}">
54-
<th class="text-center">
54+
<div class="row align-items-center p-2{if $smarty.foreach.items.iteration % 2 == $modulo} bg-white{/if}" id="update_{$item}">
55+
<div class="col-1 px-1">
5556
<i class="fa fa-fw fa-{$faclass}"></i>
56-
</th>
57-
<th class="d-none d-sm-table-cell">
57+
</div>
58+
<div class="col-11 col-sm-3 px-1 fw-semibold">
5859
{$msg_label_{$item}}
5960
{if $msg_tooltip_{$item}}<span data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="{$msg_tooltip_{$item}}"><i class="fa fa-fw fa-regular fa-circle-question"></i></span>{/if}
60-
</th>
61-
<td>
61+
</div>
62+
<div class="col-sm px-1">
6263
{if $item|in_array:$update_items}
6364
{if !({$entry.$attribute.0})}
6465
{include 'value_editor.tpl' item=$item itemindex=0 value="" type=$type list=$item_list.$item multivalued=$multivalued pattern=$pattern required=$required truncate_value_after=10000}
@@ -72,13 +73,11 @@
7273
{include 'value_displayer.tpl' value=$value type=$type truncate_value_after=10000}
7374
{/foreach}
7475
{/if}
75-
</td>
76-
</tr>
76+
</div>
77+
</div>
7778
{/foreach}
78-
</table>
7979
</div>
8080

81-
8281
</div>
8382

8483
<div class="card-footer text-center">

0 commit comments

Comments
 (0)