Make tables responsive in small devices

This commit is contained in:
ronaldaug 2022-03-15 00:07:57 +06:30
parent dbeda6bc54
commit 9c541249a2
4 changed files with 40 additions and 31 deletions

View file

@ -13,8 +13,10 @@ checkRole(array('admin'));
// This function is used on the VIEW to show the tables // This function is used on the VIEW to show the tables
function printTable($title, $array) { function printTable($title, $array) {
echo '<h2 class="mb-2 mt-4">'.$title.'</h2>'; echo '<h2 class="mb-2 mt-4">'.$title.'</h2>';
echo '<table class="table table-striped mt-3"> echo '
<tbody> <div class="table-responsive">
<table class="table table-striped mt-3">
<tbody>
'; ';
foreach ($array as $key=>$value) { foreach ($array as $key=>$value) {
@ -31,8 +33,9 @@ function printTable($title, $array) {
} }
echo ' echo '
</tbody> </tbody>
</table> </table>
</div>
'; ';
} }

View file

@ -3,8 +3,9 @@
echo Bootstrap::pageTitle(array('title'=>$L->g('About'), 'icon'=>'info-circle')); echo Bootstrap::pageTitle(array('title'=>$L->g('About'), 'icon'=>'info-circle'));
echo ' echo '
<table class="table table-striped mt-3"> <div class="table-responsive">
<tbody> <table class="table table-striped mt-3">
<tbody>
'; ';
echo '<tr>'; echo '<tr>';
@ -42,6 +43,7 @@ echo '<td></td>';
echo '</tr>'; echo '</tr>';
echo ' echo '
</tbody> </tbody>
</table> </table>
</div>
'; ';

View file

@ -9,14 +9,15 @@ echo Bootstrap::link(array(
)); ));
echo ' echo '
<table class="table table-striped mt-3"> <div class="table-responsive">
<thead> <table class="table table-striped mt-3">
<tr> <thead>
<th class="border-bottom-0" scope="col">'.$L->g('Name').'</th> <tr>
<th class="border-bottom-0" scope="col">'.$L->g('URL').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Name').'</th>
</tr> <th class="border-bottom-0" scope="col">'.$L->g('URL').'</th>
</thead> </tr>
<tbody> </thead>
<tbody>
'; ';
foreach ($categories->keys() as $key) { foreach ($categories->keys() as $key) {
@ -28,6 +29,7 @@ foreach ($categories->keys() as $key) {
} }
echo ' echo '
</tbody> </tbody>
</table> </table>
</div>
'; ';

View file

@ -11,18 +11,19 @@ echo Bootstrap::link(array(
)); ));
echo ' echo '
<table class="table table-striped mt-3"> <div class="table-responsive">
<thead> <table class="table table-striped mt-3">
<tr> <thead>
<th class="border-bottom-0" scope="col">'.$L->g('Username').'</th> <tr>
<th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Nickname').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Username').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Email').'</th> <th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Nickname').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Status').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Email').'</th>
<th class="border-bottom-0" scope="col">'.$L->g('Role').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Status').'</th>
<th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Registered').'</th> <th class="border-bottom-0" scope="col">'.$L->g('Role').'</th>
</tr> <th class="border-bottom-0 d-none d-lg-table-cell" scope="col">'.$L->g('Registered').'</th>
</thead> </tr>
<tbody> </thead>
<tbody>
'; ';
$list = $users->keys(); $list = $users->keys();
@ -51,6 +52,7 @@ foreach ($list as $username) {
} }
echo ' echo '
</tbody> </tbody>
</table> </table>
</div>
'; ';