From 7b6d8ca2b5f2b6c1911b1563d405df6068c5233b Mon Sep 17 00:00:00 2001
From: Tomas Peterka <tomas.peterka@nexedi.com>
Date: Mon, 29 Jan 2018 15:31:39 +0100
Subject: [PATCH] [renderjs_ui] Telephone displays in horizontal alignment

/reviewed-on https://lab.nexedi.com/nexedi/erp5/merge_requests/559
---
 .../rjs_gadget_erp5_nojqm_css.css                | 14 ++++++++------
 .../rjs_gadget_erp5_nojqm_css.xml                |  4 ++--
 .../erp5_web_renderjs_ui/erp5css.less.txt        | 16 +++++++++++-----
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
index b8a6f6d046..cafc24ca09 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
@@ -942,9 +942,6 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content {
   padding: 24pt;
   padding-top: 66pt;
-  /* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
-                 Don't rely on this class because it will be removed.
-                 It was used to force horizontal rendering of fields inside FormBox. */
   /*
   @media @smartphone {
     .ui-field-contain {
@@ -1000,8 +997,14 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content .field_container > div > div > div.ui-field-contain div {
   width: 100%;
 }
-.gadget-content .horizontal_align_form_box .ui-field-contain > div {
-  display: block-inline;
+.gadget-content .horizontal_align_form_box .field_container > div {
+  /* Class .horizontal_align_form_box is here only for backward-compatibility!
+       It is used to force horizontal rendering of fields inside FormBox.
+       The first > div represents form-group ("left", "right" ...) */
+  display: flex;
+}
+.gadget-content .horizontal_align_form_box .field_container > div > div {
+  flex: 1;
 }
 .gadget-content .ui-content-header-plain {
   font-size: 150%;
@@ -1305,7 +1308,6 @@ div[data-gadget-scope='erp5_searchfield'] div.search_parsed_value button {
 .document_table table {
   width: 100%;
   text-align: left;
-  /* end-of tbody, tfoot*/
 }
 .document_table table th,
 .document_table table td {
diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
index e6e1240da1..0caff61ca3 100644
--- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+++ b/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>964.49926.23272.20514</string> </value>
+                <value> <string>965.9188.33414.53213</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1515762544.29</float>
+                        <float>1517236148.36</float>
                         <string>UTC</string>
                       </tuple>
                     </state>
diff --git a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
index f40e5f86da..c59636b195 100644
--- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
@@ -1160,11 +1160,17 @@ div[data-gadget-scope='header'] .ui-header {
       width: 100%;
     }
   }
-  /* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
-                 Don't rely on this class because it will be removed.
-                 It was used to force horizontal rendering of fields inside FormBox. */
-  .horizontal_align_form_box .ui-field-contain > div {
-    display: block-inline;
+
+  .horizontal_align_form_box .field_container > div {
+
+    /* Class .horizontal_align_form_box is here only for backward-compatibility!
+       It is used to force horizontal rendering of fields inside FormBox.
+       The first > div represents form-group ("left", "right" ...) */
+
+    display: flex;
+    & > div {
+      flex: 1;
+    }
   }
 
   .ui-content-header-plain {
-- 
2.30.9