[erp5_web_renderjs_ui] Factorise erp5 css code

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -816,30 +816,43 @@ div[data-gadget-scope='header'] .ui-header h1 > span::before {
     margin-right: 6pt;
   }
 }
-div[data-gadget-scope='header'] .ui-header h1 a {
+div[data-gadget-scope='header'] .ui-header h1 form {
+  height: 100%;
+}
+div[data-gadget-scope='header'] .ui-header h1 form button {
+  text-align: left;
+  height: 100%;
+  width: 100%;
+}
+div[data-gadget-scope='header'] .ui-header h1 a,
+div[data-gadget-scope='header'] .ui-header h1 form button {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-div[data-gadget-scope='header'] .ui-header h1 a::before {
+div[data-gadget-scope='header'] .ui-header h1 a::before,
+div[data-gadget-scope='header'] .ui-header h1 form button::before {
   display: inline-block;
   width: 42pt;
 }
 @media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header h1 a::before {
+  div[data-gadget-scope='header'] .ui-header h1 a::before,
+  div[data-gadget-scope='header'] .ui-header h1 form button::before {
     text-align: center;
   }
 }
 @media not screen and (max-width: 85em) {
-  div[data-gadget-scope='header'] .ui-header h1 a::before {
+  div[data-gadget-scope='header'] .ui-header h1 a::before,
+  div[data-gadget-scope='header'] .ui-header h1 form button::before {
     width: 12pt;
     margin-left: 24pt;
     margin-right: 6pt;
   }
 }
 @media not screen and (min-width: 45em) {
-  div[data-gadget-scope='header'] .ui-header h1 a::before {
+  div[data-gadget-scope='header'] .ui-header h1 a::before,
+  div[data-gadget-scope='header'] .ui-header h1 form button::before {
     width: 30pt;
   }
 }
@@ -873,6 +886,7 @@ div[data-gadget-scope='header'] .ui-header ul {
   div[data-gadget-scope='header'] .ui-header ul li a {
     padding-top: 3pt;
     padding-bottom: 3pt;
+    line-height: inherit;
     white-space: nowrap;
     overflow: hidden;
   }

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml

@@ -228,7 +228,7 @@
             </item>
             <item>
                 <key> <string>actor</string> </key>
-                <value> <string>zope</string> </value>
+                <value> <string>vincent</string> </value>
             </item>
             <item>
                 <key> <string>comment</string> </key>
@@ -242,7 +242,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>962.1204.63259.57958</string> </value>
+                <value> <string>963.50757.27093.23739</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1505133981.01</float>
+                        <float>1511952591.56</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -813,8 +813,39 @@ div[data-gadget-scope='editor_panel'] {
   min-width: @sub-line-min-width-desktop;
 }
 
-div[data-gadget-scope='header'] .ui-header {
+.renderTabletSubLink() {
+  padding-top: @half-margin-size;
+  padding-bottom: @half-margin-size;
+  line-height: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  &::before {
+    font-size: 1.2em;
+    display: block;
+  }
+}
 
+.renderTabletSubListElement() {
+  flex: 1;
+  // XXX TODO Hardcoded color
+  border-left: 1px solid rgba(0, 0, 0, 0.55);
+  &:first-child {
+    border-left: none;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.renderTabletNotALinkTitle() {
+  padding-left: @headertitlespanleftmiddlepadding;
+  &::before {
+    margin-right:@headertitlespanleftlargemargin;
+  }
+}
+
+div[data-gadget-scope='header'] .ui-header {
   position: fixed;
   z-index: 1000;
   text-align: center;
@@ -938,21 +969,26 @@ div[data-gadget-scope='header'] .ui-header {
       }
 
       @media @tablet {
-         padding-left: @headertitlespanleftmiddlepadding;
-         &::before {
-           margin-right:@headertitlespanleftlargemargin;
-         }
+        .renderTabletNotALinkTitle();
       }
 
       @media @smartphone {
-         padding-left: @headertitlespanleftsmallpadding;
-         &::before {
-           margin-right:@headertitlespanleftsmallmargin;
-         }
+        padding-left: @headertitlespanleftsmallpadding;
+        &::before {
+          margin-right:@headertitlespanleftsmallmargin;
+        }
       }
     }
-    // Clickable title
-    a {
+    // Clickable title and button
+    form {
+      height: 100%;
+      button {
+        text-align: left;
+        height: 100%;
+        width: 100%;
+      }
+    }
+    a, form button {
       display: block;
 
       // Do not put link on multi line in case of small screen
@@ -999,28 +1035,12 @@ div[data-gadget-scope='header'] .ui-header {
 
     li {
       @media @tablet, @smartphone {
-        flex: 1;
-        // XXX TODO Hardcoded color
-        border-left: 1px solid rgba(0, 0, 0, 0.55);
-        &:first-child {
-          border-left: none;
-        }
-
-        a {
-          display: block;
-        }
+        .renderTabletSubListElement();
       }
 
       @media @tablet {
         a {
-          padding-top: @half-margin-size;
-          padding-bottom: @half-margin-size;
-          white-space: nowrap;
-          overflow: hidden;
-          &::before {
-            font-size: 1.2em;
-            display: block;
-          }
+          .renderTabletSubLink();
         }
       }
 
@@ -1053,13 +1073,9 @@ div[data-gadget-scope='header'] .ui-header {
           }
         }
       }
-
     }
-
   }
-
 }
-
 /**********************************************
 * Gadget: main
 **********************************************/