[erp5_web_renderjs_ui] Align header and content in desktop mode

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -712,6 +712,11 @@ div[data-gadget-scope='header'] .ui-header h1 > span {
     padding-left: 2em;
   }
 }
+@media only screen and (min-width: 62em) {
+  div[data-gadget-scope='header'] .ui-header h1 > span {
+    padding-left: 2em;
+  }
+}
 div[data-gadget-scope='header'] .ui-header h1 a {
   display: block;
   white-space: nowrap;
@@ -720,9 +725,18 @@ div[data-gadget-scope='header'] .ui-header h1 a {
 }
 div[data-gadget-scope='header'] .ui-header h1 a::before {
   display: inline-block;
-  text-align: center;
   width: 4em;
 }
+@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (max-width: 28em) {
+  div[data-gadget-scope='header'] .ui-header h1 a::before {
+    text-align: center;
+  }
+}
+@media only screen and (min-width: 62em) {
+  div[data-gadget-scope='header'] .ui-header h1 a::before {
+    padding-left: 2em;
+  }
+}
 @media only screen and (max-width: 28em) {
   div[data-gadget-scope='header'] .ui-header h1 a::before {
     width: 2em;
@@ -752,8 +766,8 @@ div[data-gadget-scope='header'] .ui-header ul a {
   }
   div[data-gadget-scope='header'] .ui-header ul li a {
     display: block;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
+    padding-left: 2em;
+    padding-right: 2em;
     min-width: 5em;
     line-height: 2.6em;
     height: 100%;

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.47272.27712.13038</string> </value>
+                <value> <string>952.47419.7858.59784</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1469180891.44</float>
+                        <float>1469189660.63</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -38,6 +38,8 @@
 @headertitleleftlargemargin: 4em;
 @headertitleleftsmallmargin: 2em;
 
+@mainpaddingdesktop: 2em;
+
 // XXX desktop: 12em
 @panelwidth: 17em;
 
@@ -548,7 +550,7 @@ div[data-gadget-scope='panel'] {
         white-space: nowrap; 
 
         &::before {
-          width: 2em;
+          width: @mainpaddingdesktop;
         }
         &:hover, &:active {
           background-color: darken(@panelbackgroundcolor, 10%);
@@ -761,8 +763,7 @@ div[data-gadget-scope='header'] .ui-header {
       display: table-footer-group;
       button, a {
         margin: 0.5em;
-        // XXX TODO: same than main page padding
-        margin-left: 2em;
+        margin-left: @mainpaddingdesktop;
       }
     }
   }
@@ -787,7 +788,10 @@ div[data-gadget-scope='header'] .ui-header {
     & > span {
       padding-left: @headertitleleftlargemargin;
       @media @smartphone {
-        padding-left: @headertitleleftsmallmargin
+        padding-left: @headertitleleftsmallmargin;
+      }
+      @media @desktop {
+        padding-left: @mainpaddingdesktop;
       }
     }
     // Clickable title
@@ -801,7 +805,12 @@ div[data-gadget-scope='header'] .ui-header {
 
       &::before {
         display: inline-block;
-        text-align: center;
+        @media @tablet, @smartphone {
+          text-align: center;
+        }
+        @media @desktop {
+          padding-left: @mainpaddingdesktop;
+        }
 
         width: @headertitleleftlargemargin;
         @media @smartphone {
@@ -842,8 +851,8 @@ div[data-gadget-scope='header'] .ui-header {
       a {
         display: block;
 
-        padding-left: 0.8em;
-        padding-right: 0.8em;
+        padding-left: @mainpaddingdesktop;
+        padding-right: @mainpaddingdesktop;
         min-width: 5em;
 
         line-height: @headerheight;
@@ -935,7 +944,7 @@ div[data-gadget-scope='header'] .ui-header {
   }
 
   // Top padding
-  padding: 2em;
+  padding: @mainpaddingdesktop;
   padding-top: 9em;
   @media @smartphone {
     padding: 0.5em;
@@ -1113,7 +1122,7 @@ div[data-gadget-scope='header'] .ui-header {
       white-space: nowrap; 
 
       &::before {
-        width: 2em;
+        width: @mainpaddingdesktop;
       }
       &:hover, &:active {
         background-color: darken(@panelbackgroundcolor, 10%);