[renderjs_ui] Empty worklist has relative positioning to be stackable

@Nicolas uses worklist as one of many gadgets in one page thus stackable empty worklist is necessary (before it was positioned as an fixed element).

/reviewed-on nexedi/erp5!387

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -918,8 +918,8 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content {
   padding: 24pt;
   padding-top: 66pt;
-  /* Disclaimer: It is here only for backward-compatibility! Don't rely on
-                 this class because it will be removed.
+  /* 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 {
@@ -982,6 +982,24 @@ div[data-gadget-scope='header'] .ui-header ul {
 .gadget-content .ui-content-header-plain {
   font-size: 150%;
 }
+.gadget-content .worklist-empty {
+  max-width: 442px;
+  /* original size of the embedded image */
+  width: 100%;
+  /* smaller screens than 442px will show full-width box */
+  margin: auto;
+  /* center with known width */
+  text-align: center;
+}
+.gadget-content .worklist-empty h2 {
+  font-size: 300%;
+  /* copy behaviour of previously used .first-loader */
+  margin-bottom: 0.5em;
+}
+.gadget-content .worklist-empty img {
+  width: 100%;
+  /* height will be computed automatically and proportionally */
+}
 .gadget-content ul.document-listview:not(:last-of-type) {
   margin-bottom: 12pt;
 }
@@ -1054,8 +1072,8 @@ div[data-gadget-scope='header'] .ui-header ul {
   }
   .gadget-content .ui-field-contain > label {
     flex: 1;
-    /* Disclaimer: It is here only for backward-compatibility! Don't rely on
-                       this class because it will be removed.
+    /* Disclaimer: Class .invisible is here only for backward-compatibility!
+                       Don't rely on this class because it will be removed.
                        It was used to hide the label of a FormBox. */
   }
   .gadget-content .ui-field-contain > label.invisible {

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>961.60979.41143.53009</string> </value>
+                <value> <string>962.1204.63259.57958</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1504787937.42</float>
+                        <float>1505133981.01</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_worklist_html.html

@@ -28,9 +28,9 @@
         {{/each}}
       </ul>
       {{else}}
-      <div class="first-loader">
+      <div class="worklist-empty">
         <h2 data-i18n="All work caught up!">All work caught up!</h2>
-        <img width="442" height="442" src="gadget_erp5_worklist_empty.svg?format=svg">
+        <img src="gadget_erp5_worklist_empty.svg?format=svg">
         </div>
       {{/if}}
     </script>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_worklist_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>960.12553.18419.64989</string> </value>
+                <value> <string>962.1183.1144.61900</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1498036615.88</float>
+                        <float>1505133662.18</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

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

@@ -1117,8 +1117,8 @@ div[data-gadget-scope='header'] .ui-header {
       width: 100%;
     }
   }
-  /* Disclaimer: It is here only for backward-compatibility! Don't rely on
-                 this class because it will be removed.
+  /* 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;
@@ -1127,7 +1127,19 @@ div[data-gadget-scope='header'] .ui-header {
   .ui-content-header-plain {
     font-size: 150%;
   }
-
+  .worklist-empty {
+    max-width: 442px; /* original size of the embedded image */
+    width: 100%; /* smaller screens than 442px will show full-width box */
+    margin: auto; /* center with known width */
+    text-align: center;
+    h2 {
+      font-size: 300%; /* copy behaviour of previously used .first-loader */
+      margin-bottom: 0.5em;
+    }
+    img {
+      width: 100%; /* height will be computed automatically and proportionally */
+    }
+  }
   ul.document-listview {
     &:not(:last-of-type) {
       margin-bottom: @double-margin-size;
@@ -1218,8 +1230,8 @@ div[data-gadget-scope='header'] .ui-header {
       display: flex;
       & > label {
         flex: 1;
-        /* Disclaimer: It is here only for backward-compatibility! Don't rely on
-                       this class because it will be removed.
+        /* Disclaimer: Class .invisible is here only for backward-compatibility!
+                       Don't rely on this class because it will be removed.
                        It was used to hide the label of a FormBox. */
         &.invisible {
           display: none;