[erp5_web_renderjs_ui] Move the main action button to a more visible location

Add some color just for prototyping

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -581,7 +581,6 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a::before {
 * Gadget: header
 **********************************************/
 div[data-gadget-scope='header'] .ui-header {
-  background-color: #085078;
   position: fixed;
   z-index: 1000;
   text-align: center;
@@ -609,10 +608,6 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
 div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
   border-right: 1px solid rgba(255, 255, 255, 0.55);
 }
-div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
-div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
-  border-left: 1px solid rgba(255, 255, 255, 0.55);
-}
 div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
 div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
   display: block;
@@ -648,10 +643,28 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
     display: none;
   }
 }
+@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) {
+  div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
+  div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
+    border-left: 1px solid rgba(255, 255, 255, 0.55);
+  }
+}
+@media only screen and (min-width: 62em) {
+  div[data-gadget-scope='header'] .ui-header > .ui-btn-right {
+    order: 99;
+  }
+  div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
+  div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
+    margin: 0.5em;
+    margin-left: 2em;
+    background-color: #F60;
+  }
+}
 div[data-gadget-scope='header'] .ui-header h1 {
   text-align: left;
   line-height: 2.6em;
   flex: 1;
+  background-color: #085078;
   color: #FFFFFF;
   white-space: nowrap;
   overflow: hidden;
@@ -946,7 +959,11 @@ div[data-gadget-scope='erp5_searchfield'] button {
 .document_table .ui-table-header {
   display: flex;
   padding-bottom: 0.5em;
+}
+@media only screen and (max-width: 28em) {
+  .document_table .ui-table-header {
     border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
+  }
 }
 .document_table .ui-table-header h1 {
   color: #777777;
@@ -989,9 +1006,13 @@ div[data-gadget-scope='erp5_searchfield'] button {
   vertical-align: middle;
 }
 .document_table table thead {
+  /*
       background-color: #eeeeee;
-  background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgba(0, 0, 0, .04);
       color: #777777;
+      */
+  background-color: #0E81C2;
+  color: #FFFFFF;
 }
 .document_table table thead tr th {
   padding: 0.4em 0.25em;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.14349.56496.11042</string> </value>
+                <value> <string>952.14468.56596.29457</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1467291947.42</float>
+                        <float>1467298883.69</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -712,8 +712,6 @@ div[data-gadget-scope='editor_panel'] {
 **********************************************/
 div[data-gadget-scope='header'] .ui-header {
 
-  background-color: @colorheaderbackground;
-
   // width: 100%;
   position: fixed;
   z-index: 1000;
@@ -744,11 +742,6 @@ div[data-gadget-scope='header'] .ui-header {
       border-right: 1px solid rgba(255, 255, 255, 0.55);
     }
   }
-  & > .ui-btn-right {
-    button, a {
-      border-left: 1px solid rgba(255, 255, 255, 0.55);
-    }
-  }
 
   .ui-controlgroup-controls {
 
@@ -785,10 +778,28 @@ div[data-gadget-scope='header'] .ui-header {
     }
   }
 
+  & > .ui-btn-right {
+    @media @smartphone, @tablet {
+      button, a {
+        border-left: 1px solid rgba(255, 255, 255, 0.55);
+      }
+    }
+    @media @desktop {
+      order: 99;
+      button, a {
+        margin: 0.5em;
+        // XXX TODO: same than main page padding
+        margin-left: 2em;
+        background-color: #F60;
+      }
+    }
+  }
+
   h1 {
     text-align: left;
     line-height: @headerheight;
     flex: 1;
+    background-color: @colorheaderbackground;
 
     color: @white;
 
@@ -1104,7 +1115,9 @@ div[data-gadget-scope='erp5_searchfield'] {
   .ui-table-header {
     display: flex;
     padding-bottom: 0.5em;
+    @media @smartphone {
       border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
+    }
 
     h1 {
       // XXX TODO Same color than label
@@ -1147,9 +1160,14 @@ div[data-gadget-scope='erp5_searchfield'] {
     }
 
     thead {
+      /*
       background-color: #eeeeee;
       background-color: rgba(0, 0, 0, .04);
       color: #777777;
+      */
+      background-color: @colorsubheaderbackground;
+      // background-color: @colorheaderbackground;
+      color: @white;
 
 
       // XXX Same than cells