CSS: add responsive grid layout allowing to force items per line

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -1083,6 +1083,23 @@ html .document-table tbody tr:nth-child(odd) th {\n
 }\n
 \n
 /* ------------------------ TABS/GRID ------------------------------------ */\n
+/* copy JQM grid CSS without width (set below) */\n
+ul.grid-items, ul.grid-items li {\n
+    list-style: none outside none;\n
+    margin-left: 0;\n
+    margin-right: 0;\n
+    padding: 0;\n
+}\n
+ul.grid-items {\n
+    overflow: hidden;\n
+}\n
+/*\n
+ * Width:\n
+ * default all in one line (as for tabs)\n
+ * > add .line-[x] to .grid-container = force [x] items/line\n
+ * > add .ui-responsive to .grid-container = force ONE item/line on smartphone\n
+ */\n
+\n
 /* thx: Lea Verou - http://bit.ly/1rAhqzm */\n
 .grid-container li a {\n
   border-top: 0px;\n
@@ -1092,70 +1109,73 @@ html .document-table tbody tr:nth-child(odd) th {\n
   clear: none;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(1),\n
-div.grid-container.line-1 ul.ui-grid li {\n
+div.grid-container.line-1 ul.grid-items li,\n
+div.grid-container.line-1 ul.grid-items li ~ li {\n
   width: 100%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(2),\n
 .grid-container ul li:first-child:nth-last-child(2) ~ li,\n
-div.grid-container.line-2 ul.ui-grid li,\n
-div.grid-container.line-2 ul.ui-grid li ~ li {\n
+div.grid-container.line-2 ul.grid-items li,\n
+div.grid-container.line-2 ul.grid-items li ~ li {\n
   width: 50%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(3),\n
 .grid-container ul li:first-child:nth-last-child(3) ~ li,\n
-div.grid-container.line-3 ul.ui-grid li,\n
-div.grid-container.line-3 ul.ui-grid li ~ li {\n
+div.grid-container.line-3 ul.grid-items li,\n
+div.grid-container.line-3 ul.grid-items li ~ li {\n
   width: 33.3333%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(4),\n
 .grid-container ul li:first-child:nth-last-child(4) ~ li,\n
-div.grid-container.line-4 ul.ui-grid li,\n
-div.grid-container.line-4 ul.ui-grid li ~ li {\n
+div.grid-container.line-4 ul.grid-items li,\n
+div.grid-container.line-4 ul.grid-items li ~ li {\n
   width: 25%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(5),\n
 .grid-container ul li:first-child:nth-last-child(5) ~ li,\n
-div.grid-container.line-5 ul.ui-grid li,\n
-div.grid-container.line-5 ul.ui-grid li ~ li {\n
+div.grid-container.line-5 ul.grid-items li,\n
+div.grid-container.line-5 ul.grid-items li ~ li {\n
   width: 20%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(6),\n
 .grid-container ul li:first-child:nth-last-child(6) ~ li,\n
-div.grid-container.line-6 ul.ui-grid li,\n
-div.grid-container.line-6 ul.ui-grid li ~ li {\n
+div.grid-container.line-6 ul.grid-items li,\n
+div.grid-container.line-6 ul.grid-items li ~ li {\n
   width: 16.667%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(7),\n
 .grid-container ul li:first-child:nth-last-child(7) ~ li,\n
-div.grid-container.line-7 ul.ui-grid li,\n
-div.grid-container.line-7 ul.ui-grid li ~ li {\n
+div.grid-container.line-7 ul.grid-items li,\n
+div.grid-container.line-7 ul.grid-items li ~ li {\n
   width: 14,285714286%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(8),\n
 .grid-container ul li:first-child:nth-last-child(8) ~ li,\n
-div.grid-container.line-8 ul.ui-grid li,\n
-div.grid-container.line-8 ul.ui-grid li ~ li {\n
+div.grid-container.line-8 ul.grid-items li,\n
+div.grid-container.line-8 ul.grid-items li ~ li {\n
   width: 12.5%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(9),\n
 .grid-container ul li:first-child:nth-last-child(9) ~ li,\n
-div.grid-container.line-9 ul.ui-grid li,\n
-div.grid-container.line-9 ul.ui-grid li ~ li {\n
+div.grid-container.line-9 ul.grid-items li,\n
+div.grid-container.line-9 ul.grid-items li ~ li {\n
   width: 11.112%;\n
 }\n
 .grid-container ul li:first-child:nth-last-child(10),\n
 .grid-container ul li:first-child:nth-last-child(10) ~ li,\n
-div.grid-container.line-10 ul.ui-grid li,\n
-div.grid-container.line-10 ul.ui-grid li ~ li {\n
+div.grid-container.line-10 ul.grid-items li,\n
+div.grid-container.line-10 ul.grid-items li ~ li {\n
   width: 10%;\n
 }\n
 \n
 @media (max-width: 40em) {\n
-  div.grid-container.ui-responsive ul.ui-grid li,\n
-  div.grid-container.ui-responsive ul.ui-grid li ~ li {\n
+  div.grid-container.ui-responsive ul.grid-items li,\n
+  div.grid-container.ui-responsive ul.grid-items li ~ li {\n
     width: 100%;\n
   }\n
 }\n
+\n
+\n
 /* ----------------------------- FORM LAYOUT ------------------------------ */\n
 html .left, html .right, html .center, html .bottom {\n
   vertical-align: top;\n
@@ -1440,7 +1460,7 @@ html.ui-mobile body nav.ui-title {\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>936.46294.38547.13499</string> </value>
+                <value> <string>936.46336.62391.44851</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -1458,7 +1478,7 @@ html.ui-mobile body nav.ui-title {\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1407330793.38</float>
+                        <float>1407335558.98</float>
                         <string>GMT</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_tab_list_js.xml

@@ -151,7 +151,7 @@
         erp5_document = options.erp5_document,\n
         view_list = erp5_document._links.action_object_view,\n
         i,\n
-        nav_html = \'<nav data-role="navbar"><ul class="ui-grid">\',\n
+        nav_html = \'<nav data-role="navbar"><ul class="grid-items">\',\n
         promise_list = []\n
 \n
       for (i = 0; i < view_list.length; i += 1) {\n
@@ -323,7 +323,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>936.46280.20106.51694</string> </value>
+                <value> <string>936.46363.37694.56064</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -341,7 +341,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1407330147.68</float>
+                        <float>1407334850.3</float>
                         <string>GMT</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/bt/revision

-38
+39
\ No newline at end of file