From 8ffe7097a45cea7195d4701b72bffc804c75515c Mon Sep 17 00:00:00 2001
From: Laurent Destailleur <eldy@destailleur.fr>
Date: Thu, 9 Jun 2016 01:33:26 +0200
Subject: [PATCH] Prepare responsive fixes
---
htdocs/public/test/test_arrays.php | 40 +++++++++++++++++++++++++-----
htdocs/theme/eldy/style.css.php | 15 ++++++++---
htdocs/theme/md/style.css.php | 8 ++++++
3 files changed, 53 insertions(+), 10 deletions(-)
diff --git a/htdocs/public/test/test_arrays.php b/htdocs/public/test/test_arrays.php
index 44911b8fa9b..28ff4bdb743 100644
--- a/htdocs/public/test/test_arrays.php
+++ b/htdocs/public/test/test_arrays.php
@@ -30,7 +30,7 @@ if (empty($usedolheader))
<link rel="shortcut icon" type="image/x-icon" href="<?php echo DOL_URL_ROOT ?>/theme/eldy/img/favicon.ico"/>
<title>Test page</title>
<!-- Includes for JQuery (Ajax library) -->
- <link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/css/smoothness/jquery-ui.custom.css" />
+ <link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/css/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/datatables/media/css/jquery.dataTables.css" />
<?php if ($_GET["dol_use_jmobile"] == 1) { ?>
<link rel="stylesheet" type="text/css" href="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/mobile/jquery.mobile-latest.min.css" />
@@ -40,6 +40,7 @@ if (empty($usedolheader))
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/tablednd/jquery.tablednd.0.6.min.js"></script>
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/datatables/media/js/jquery.dataTables.js"></script>
+ <script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/select2/select2.min.js?version=4.0.0-beta"></script>
<?php if ($_GET["dol_use_jmobile"] == 1) { ?>
<script type="text/javascript" src="<?php echo DOL_URL_ROOT ?>/includes/jquery/plugins/mobile/jquery.mobile-latest.min.js"></script>
<?php } ?>
@@ -87,8 +88,9 @@ This page is a sample of page using tables. It is designed to make test with<br>
- tablednd<br>
</h1>
-<br><hr><br>Example 0a : Table with div+div+div containg a select that should be overflowed and truncated => Use this to align text or form<br>
+<?php ?>
+<br><hr><br>Example 0a : Table with div+div+div containg a select that should be overflowed and truncated => Use this to align text or form<br>
<div class="tagtable centpercent">
<div class="tagtr">
@@ -127,12 +129,31 @@ This page is a sample of page using tables. It is designed to make test with<br>
</tr>
</table>
-
+<?php ?>
<br><hr><br>Example 1 : Standard table/thead/tbody/tr/th-td (no class pair/impair on td) => Use this if you need the drag and drop for lines or for long result tables<br>
+
+<script type="text/javascript" language="javascript">
+/*jQuery(document).ready(function() {
+$(document).ready(function() {
+ var table = $('#tablelines3').DataTable( {
+ scrollY: "300px",
+ scrollX: true,
+ scrollCollapse: true,
+ paging: false,
+ fixedColumns: {
+ leftColumns: 1,
+ rightColumns: 1
+ }
+ } );
+} );
+});*/
+</script>
+
+
<?php
include_once DOL_DOCUMENT_ROOT.'/product/class/product.class.php';
$productspecimen=new Product($db);
@@ -198,16 +219,23 @@ if (! empty($moreforfilter))
}
?>
-<table class="tagtable liste<?php echo $moreforfilter?" listwithfilterbefore":""; ?>" id="tablelines3">
+
+<table class="stripe row-border order-column centpercent tagtable liste<?php echo $moreforfilter?" listwithfilterbefore":""; ?>" id="tablelines3">
+<thead>
<tr class="liste_titre">
<?php print getTitleFieldOfList($langs->trans('title1'),0,$_SERVER["PHP_SELF"],'aaa','','','align="left"',$sortfield,$sortorder); ?>
<?php print getTitleFieldOfList($langs->trans('title2'),0,$_SERVER["PHP_SELF"],'bbb','','','align="right"',$sortfield,$sortorder); ?>
<?php print getTitleFieldOfList($langs->trans('title3'),0,$_SERVER["PHP_SELF"],'ccc','','','align="center"',$sortfield,$sortorder); ?>
</tr>
+</thead>
+<tbody>
<tr class="pair"><td><?php echo $productspecimen->getNomUrl(1); ?></td><td align="right">b1</td><td class="tdlineupdown" align="left">c1</td></tr>
-<tr class="impair"><td>a2</td><td align="right">b2</td><td class="tdlineupdown" align="left">c2</td></tr>
+<tr class="impair nowrap"><td>a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2 a2</td><td align="right">b2</td><td class="tdlineupdown" align="left">c2</td></tr>
<tr class="pair"><td>a3</td><td align="right">b3</td><td class="tdlineupdown" align="left">c3</td></tr>
+</tbody>
</table>
+
+
<br>
@@ -323,7 +351,7 @@ $('xxxth').replaceWith(
<tr>
<td>line2</td>
<td>dfsdf</td>
- <td align="center"> xxx </td>
+ <td align="center" class="nowrap"> xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx </td>
</tr>
<tr>
<td>line3</td>
diff --git a/htdocs/theme/eldy/style.css.php b/htdocs/theme/eldy/style.css.php
index 52ee642719c..ca73d3d8bbc 100644
--- a/htdocs/theme/eldy/style.css.php
+++ b/htdocs/theme/eldy/style.css.php
@@ -569,6 +569,15 @@ div.myavailability {
margin-top: 25px !important;
}
+/* DOL_XXX for future usage (when left menu has been removed). If we do not use datatable */
+.table-responsive {
+ width: calc(100% - 330px);
+ margin-bottom: 15px;
+ overflow-y: hidden;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+
/* ============================================================================== */
/* Styles to hide objects */
@@ -638,16 +647,14 @@ td.showDragHandle {
/* ============================================================================== */
#id-container {
- /* margin-top: 12px;
- margin-bottom: 8px; */
- display: table;
+ display: table; /* DOL_XXX Empeche fonctionnement correct du scroll horizontal sur tableau, avec datatable ou CSS */
table-layout: fixed;
}
#id-right, #id-left {
padding-top: 12px;
padding-bottom: 8px;
- display: table-cell;
+ display: table-cell; /* DOL_XXX Empeche fonctionnement correct du scroll horizontal sur tableau, avec datatable ou CSS */
float: none;
vertical-align: top;
}
diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php
index 559f464a6df..b42927e3ba8 100644
--- a/htdocs/theme/md/style.css.php
+++ b/htdocs/theme/md/style.css.php
@@ -568,6 +568,14 @@ div.myavailability {
margin-top: 25px !important;
}
+/* for future usage (when left menu has been removed) */
+.table-responsive {
+ width: calc(100% - 330px);
+ margin-bottom: 15px;
+ overflow-y: hidden;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
/* ============================================================================== */
/* Styles to hide objects */
--
GitLab