CSS: updated CSS grid to make it responsive and force items per line via a class name

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -1082,54 +1082,80 @@ html .document-table tbody tr:nth-child(odd) th {\n
   background-color: rgba(0,0,0,.04);\n
 }\n
 \n
-/* --------------------------- TABS --------------------------------------- */\n
+/* ------------------------ TABS/GRID ------------------------------------ */\n
 /* thx: Lea Verou - http://bit.ly/1rAhqzm */\n
-.nav_container li a {\n
+.grid-container li a {\n
   border-top: 0px;\n
 }\n
-.nav_container li.ui-block-a,\n
-.nav_container li.ui-block-b {\n
+.grid-container li.ui-block-a,\n
+.grid-container li.ui-block-b {\n
   clear: none;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(1) {\n
+.grid-container ul li:first-child:nth-last-child(1),\n
+div.grid-container.line-1 ul.ui-grid li {\n
   width: 100%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(2),\n
-.nav_container ul li:first-child:nth-last-child(2) ~ li {\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
   width: 50%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(3),\n
-.nav_container ul li:first-child:nth-last-child(3) ~ li {\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
   width: 33.3333%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(4),\n
-.nav_container ul li:first-child:nth-last-child(4) ~ li {\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
   width: 25%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(5),\n
-.nav_container ul li:first-child:nth-last-child(5) ~ li {\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
   width: 20%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(6),\n
-.nav_container ul li:first-child:nth-last-child(6) ~ li {\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
   width: 16.667%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(7),\n
-.nav_container ul li:first-child:nth-last-child(7) ~ li {\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
   width: 14,285714286%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(8),\n
-.nav_container ul li:first-child:nth-last-child(8) ~ li {\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
   width: 12.5%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(9),\n
-.nav_container ul li:first-child:nth-last-child(9) ~ li {\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
   width: 11.112%;\n
 }\n
-.nav_container ul li:first-child:nth-last-child(10),\n
-.nav_container ul li:first-child:nth-last-child(10) ~ li {\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
   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
+    width: 100%;\n
+  }\n
+}\n
 /* ----------------------------- FORM LAYOUT ------------------------------ */\n
 html .left, html .right, html .center, html .bottom {\n
   vertical-align: top;\n
@@ -1414,7 +1440,7 @@ html.ui-mobile body nav.ui-title {\n
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>936.46087.64931.62208</string> </value>
+                <value> <string>936.46294.38547.13499</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -1432,7 +1458,7 @@ html.ui-mobile body nav.ui-title {\n
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1407318319.6</float>
+                        <float>1407330793.38</float>
                         <string>GMT</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_tab_list_html.xml

@@ -116,6 +116,7 @@
     <script src="RSVP.js" type="text/javascript"></script>\n
     <script src="renderjs.js" type="text/javascript"></script>\n
     <script src="handlebars.js" type="text/javascript"></script>\n
+\n
     <!-- custom script -->\n
     <script src="gadget_erp5_tab_list.js" type="text/javascript"></script>\n
 \n
@@ -130,7 +131,7 @@
   </head>\n
   <body>\n
 \n
-    <div class="nav_container"></div>\n
+    <div class="grid-container"></div>\n
 \n
   </body>\n
 </html>
@@ -256,7 +257,7 @@
             </item>
             <item>
                 <key> <string>actor</string> </key>
-                <value> <string>romain</string> </value>
+                <value> <string>sven</string> </value>
             </item>
             <item>
                 <key> <string>comment</string> </key>
@@ -270,7 +271,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>936.24412.61314.46199</string> </value>
+                <value> <string>936.46254.12819.56183</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -288,7 +289,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1406030804.16</float>
+                        <float>1407329213.15</float>
                         <string>GMT</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_tab_list_js.xml

@@ -147,11 +147,11 @@
     // declared methods\n
     /////////////////////////////////////////////////////////////////\n
     .declareMethod(\'render\', function (options) {\n
-      var nav_element = this.props.element.querySelector(".nav_container"),\n
+      var nav_element = this.props.element.querySelector(".grid-container"),\n
         erp5_document = options.erp5_document,\n
         view_list = erp5_document._links.action_object_view,\n
         i,\n
-        nav_html = \'<nav data-role="navbar" data-collapsible="true"><ul>\',\n
+        nav_html = \'<nav data-role="navbar"><ul class="ui-grid">\',\n
         promise_list = []\n
 \n
       for (i = 0; i < view_list.length; i += 1) {\n
@@ -309,7 +309,7 @@
             </item>
             <item>
                 <key> <string>actor</string> </key>
-                <value> <string>romain</string> </value>
+                <value> <string>sven</string> </value>
             </item>
             <item>
                 <key> <string>comment</string> </key>
@@ -323,7 +323,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>936.24630.48288.16725</string> </value>
+                <value> <string>936.46280.20106.51694</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -341,7 +341,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1406035448.02</float>
+                        <float>1407330147.68</float>
                         <string>GMT</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/bt/revision

-37
+38
\ No newline at end of file