Skip to content

E
erp5_workflow
Commit bef620e9 authored by Sven Franck's avatar Sven Franck Committed by Sebastien Robin
Browse files
Options

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

parent 3c80a325
Hide whitespace changes
Inline Side-by-side
Showing with 62 additions and 35 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml
View file @ bef620e9
......@@ -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
View file @ bef620e9
......@@ -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
View file @ bef620e9
......@@ -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
View file @ bef620e9
37
\ No newline at end of file
38
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7