[erp5_web_renderjs_ui] Improve listbox rendering on mobile

Display only 2 lines of content per document.
Correctly align all text.

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -164,6 +164,7 @@ body {
   display: block;
   color: #1F1F1F;
   word-wrap: break-word;
+  word-break: break-word;
 }
 body,
 button,
@@ -1289,12 +1290,13 @@ div[data-gadget-scope='erp5_searchfield'] button {
     display: block;
     overflow: hidden;
     width: 100%;
-    height: 4em;
     position: relative;
+    height: 4em;
+    line-height: 2em;
   }
-  .document_table table tbody tr td,
-  .document_table table tbody tr th {
-    display: inline-block;
+  .document_table table tbody tr td *,
+  .document_table table tbody tr th * {
+    display: inline;
   }
   .document_table table tbody tr td:first-child,
   .document_table table tbody tr th:first-child {
@@ -1310,6 +1312,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    padding-top: 6pt;
   }
   .document_table table tbody tr td:first-child a:after,
   .document_table table tbody tr th:first-child a:after {
@@ -1331,12 +1334,14 @@ div[data-gadget-scope='erp5_searchfield'] button {
   .document_table table tbody tr td:first-child ~ td,
   .document_table table tbody tr th:first-child ~ td {
     font-size: 0.8em;
+    display: inline;
   }
   .document_table table tbody tr td:first-child ~ th a,
   .document_table table tbody tr th:first-child ~ th a,
   .document_table table tbody tr td:first-child ~ td a,
   .document_table table tbody tr th:first-child ~ td a {
     pointer-events: none;
+    color: #777777;
   }
   .document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after,
   .document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.42445.27813.34781</string> </value>
+                <value> <string>961.59557.4519.51251</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1503676812.98</float>
+                        <float>1504702928.19</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -233,6 +233,7 @@ body {
   color: @colorforeground;
 
   word-wrap: break-word;
+  word-break: break-word;
 }
 
 body, button, input, textarea, select {
@@ -1492,12 +1493,16 @@ div[data-gadget-scope='erp5_searchfield'] {
           display: block;
           overflow: hidden;
           width: 100%;
-          height: 4em;
           position: relative;
+          // Only 2 visible lines are visible
+          height: 4em;
+          line-height: 2em;
 
           td, th {
-            // all cells inline-block
-            display: inline-block;
+            * {
+              // Disable all block (div, p, ...)
+              display: inline;
+            }
 
             &:first-child {
               // first cell must be locked
@@ -1513,6 +1518,8 @@ div[data-gadget-scope='erp5_searchfield'] {
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
+                // Reduce the gap between the first and second visible lines
+                padding-top: @margin-size;
 
                 &:after {
                   // XXX copy/pasted
@@ -1535,10 +1542,15 @@ div[data-gadget-scope='erp5_searchfield'] {
 
               ~ th, ~ td {
                 // set line height on cells after first row
+                // First column must be more visible
                 font-size: 0.8em;
+                // Cells must be next to the other and correctly aligned
+                display: inline;
 
                 a {
                   pointer-events: none;
+                  // Add contrast with the first column content
+                  color: @grey;
                 }
 
                 &:not(:last-child) a:not(:empty):after {