[erp5_web_renderjs_ui] Only display subheader icon on smartphone

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -754,7 +754,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
     display: none;
   }
 }
-@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) {
+@media only screen and (min-width: 28em) and (max-width: 62em) {
   div[data-gadget-scope='header'] .ui-header ul li {
     display: table-cell;
     border-left: 1px solid rgba(0, 0, 0, 0.55);
@@ -775,6 +775,32 @@ div[data-gadget-scope='header'] .ui-header ul a {
     display: block;
   }
 }
+@media only screen and (max-width: 28em) {
+  div[data-gadget-scope='header'] .ui-header ul li {
+    line-height: 2.6em;
+    display: table-cell;
+    border-left: 1px solid rgba(0, 0, 0, 0.55);
+  }
+  div[data-gadget-scope='header'] .ui-header ul li:first-child {
+    border-left: none;
+  }
+  div[data-gadget-scope='header'] .ui-header ul li a {
+    display: block;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 1.5em;
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
+    overflow: hidden;
+    text-indent: -9999px;
+    white-space: nowrap;
+  }
+  div[data-gadget-scope='header'] .ui-header ul li a::before {
+    float: left;
+    text-indent: 0;
+    width: 100%;
+  }
+}
 /**********************************************
 * Gadget: main
 **********************************************/

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.42944.22072.22442</string> </value>
+                <value> <string>952.43131.61056.30890</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468921365.19</float>
+                        <float>1468932538.95</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -80,7 +80,9 @@
 
 .hide_text(@width: 3em) {
   // https://css-tricks.com/forums/topic/hide-text-but-not-the-before-pseudo-class/
-  width: @width;
+  & when (@width > 0) {
+    width: @width;
+  }
   overflow: hidden;
   text-indent: -9999px;
   white-space: nowrap;
@@ -853,8 +855,38 @@ div[data-gadget-scope='header'] .ui-header {
     }
     }
 
-    @media @smartphone, @tablet {
+    @media @tablet {
+      li {
+        display: table-cell;
+        border-left: 1px solid rgba(0, 0, 0, 0.55);
+
+        &:first-child {
+          border-left: none;
+        }
+        a {
+          display: block;
+
+          padding-top: 0.4em;
+          padding-bottom: 0.4em;
+
+          white-space: nowrap;
+          overflow: hidden;
+
+          &::before {
+            font-size: 1.2em;
+            padding-bottom: 0.3em;
+            display: block;
+          }
+        }
+      }
+    }
+
+
+
+    @media @smartphone {
     li {
+      line-height: @headerheight;
+
       display: table-cell;
       border-left: 1px solid rgba(0, 0, 0, 0.55);
 
@@ -864,20 +896,25 @@ div[data-gadget-scope='header'] .ui-header {
       a {
         display: block;
 
+        text-align: center;
+        vertical-align: middle;
+        font-size: 1.5em;
+
         padding-top: 0.4em;
         padding-bottom: 0.4em;
 
-        white-space: nowrap;
-        overflow: hidden;
+        .hide_text(@width: false);
 
         &::before {
-          font-size: 1.2em;
-          padding-bottom: 0.3em;
-          display: block;
+          float: left;
+          text-indent: 0;
+          width: 100%;
         }
+
       }
     }
     }
+
   }
 
 }