Skip to content

erp5
erp5
Commit bcb5ebd4 authored by Sven Franck's avatar Sven Franck Committed by Romain Courteaud
Browse files
Options

erp5_web_renderjs_ui: CSS improved to responsive table

parent b7987db6
Show whitespace changes
Inline Side-by-side
Showing with 121 additions and 48 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml
View file @ bcb5ebd4
......@@ -145,6 +145,16 @@ html.ui-mobile body .ui-header .ui-title .ui-btn {\n
font-size: 100%;\n
}\n
\n
/* responsive listview-table */\n
@media (max-width: 48em) {\n
html table tbody tr td:first-child ~ td a,\n
html table tbody tr th:first-child ~ th a,\n
html table tbody tr td:first-child ~ td a,\n
html table tbody tr th:first-child ~ th a {\n
font-size: 85%;\n
}\n
}\n
\n
/* from here on in % of whatever is set above */\n
.ui-content-header-section .ui-content-title {\n
font-size: 500%;\n
......@@ -780,10 +790,10 @@ html.ui-mobile head + body .ui-field-contain > :last-child {\n
-------------------------------------------------------------------------\n
*/\n
.ui-collapsible .ui-listview .ui-last-child {\n
-webkit-border-bottom-left-radius: .625em;\n
border-bottom-left-radius: .625em;\n
-webkit-border-bottom-right-radius: .625em;\n
border-bottom-right-radius: .625em;\n
-webkit-border-bottom-left-radius: 0;\n
border-bottom-left-radius: 0;\n
-webkit-border-bottom-right-radius: 0;\n
border-bottom-right-radius: 0;\n
\n
}\n
\n
......@@ -804,8 +814,9 @@ table th,\n
table td {\n
line-height: 1.5em;\n
text-align: left;\n
padding: .4em .25em;\n
min-height: 2.5em; /* hardcoded if no links;*/\n
vertical-align: middle;\n
padding: 0;\n
}\n
table th .ui-btn,\n
table td .ui-btn {\n
......@@ -877,16 +888,18 @@ table caption {\n
tfoot,\n
tfoot tr,\n
.ui-table-inset tfoot tr:last-child th:last-child,\n
.ui-table-inset tfoot tr:last-child td:last-child {\n
-webkit-border-bottom-right-radius: .6em;\n
border-bottom-right-radius: .6em;\n
.ui-table-inset tfoot tr:last-child td:last-child,\n
.ui-table-inset tfoot .ui-corner-all {\n
-webkit-border-bottom-right-radius: .325em;\n
border-bottom-right-radius: .325em;\n
}\n
tfoot,\n
tfoot tr,\n
.ui-table-inset tfoot tr:last-child th:first-child,\n
.ui-table-inset tfoot tr:last-child td:first-child {\n
-webkit-border-bottom-left-radius: .6em;\n
border-bottom-left-radius: .6em;\n
.ui-table-inset tfoot tr:last-child td:first-child,\n
.ui-table-inset tfoot .ui-corner-all {\n
-webkit-border-bottom-left-radius: .325em;\n
border-bottom-left-radius: .325em;\n
}\n
\n
/* make sure JQM does not mess up table footer */\n
......@@ -901,6 +914,15 @@ html .ui-field-contain tfoot .ui-controlgroup-controls {\n
margin: auto;\n
}\n
\n
/* box size everything */\n
html table td,\n
html table th,\n
html table td a,\n
html table th a {\n
-webkit-box-sizing: border-box;\n
-moz-box-sizing: border-box;\n
box-sizing: border-box;\n
}\n
/* header cell formatting */\n
html table thead th,\n
html table thead td {\n
......@@ -908,16 +930,17 @@ html table thead td {\n
font-weight: normal;\n
vertical-align: middle;\n
text-align: left;\n
-webkit-box-sizing: border-box;\n
-moz-box-sizing: border-box;\n
box-sizing: border-box;\n
}\n
\n
/* uncss table body links */\n
/* uncss and stretch table body links */\n
html table tbody td a,\n
html table tbody th a {\n
text-decoration: none;\n
font-weight: normal;\n
width: 100%;\n
display: block;\n
padding: .4em .25em;\n
min-height: inherit;\n
}\n
html table tbody td:hover a,\n
html table tbody th:hover a {\n
......@@ -1020,6 +1043,10 @@ tfoot .ui-controlgroup .ui-controlgroup-controls a {\n
width: 100%;\n
display: block;\n
}\n
\n
table th, table td {\n
min-height: 0;\n
}\n
\n
/* accessibly hide table header if there is a hand made table-header */\n
html .ui-table-header ~ table thead {\n
......@@ -1066,24 +1093,6 @@ tfoot .ui-controlgroup .ui-controlgroup-controls a {\n
border-right-width: 0;\n
border-left-width: 0;\n
}\n
\n
/* hide header excess rows and cells\n
html table thead tr:not(:first-child),\n
html table thead th:not(:first-child) {\n
display: none;\n
}\n
*/\n
/* first cell is like ui-title\n
html table thead tr:first-child {\n
width: 100%;\n
border-bottom-width: 1px;\n
border-bottom-style: solid;\n
}\n
html table thead th:first-child {\n
margin: 0 30%;\n
text-align: center;\n
}\n
*/\n
\n
/* hide background and borders */\n
html table tbody tr:nth-child(odd) td,\n
......@@ -1097,16 +1106,18 @@ tfoot .ui-controlgroup .ui-controlgroup-controls a {\n
border-bottom-width: 0;\n
}\n
\n
/* block the table */\n
/* block the table, set to overflow to cover leaking cells */\n
table.ui-responsive,\n
table.ui-responsive tbody {\n
display: block;\n
width: 100%;\n
}\n
\n
/* each row becomes a table */\n
/* each row becomes a table, now block */\n
table.ui-responsive tr {\n
display: table;\n
display: block;\n
line-height: 1.5em;\n
overflow: hidden;\n
width: 100%;\n
}\n
\n
......@@ -1115,35 +1126,44 @@ tfoot .ui-controlgroup .ui-controlgroup-controls a {\n
table.ui-responsive tr th {\n
display: inline-block;\n
}\n
\n
/* first cell block element */\n
\n
/* first cell must be locked */\n
table.ui-responsive tr td:first-child,\n
table.ui-responsive tr th:first-child {\n
display: block;\n
display: inline-block;\n
width: 100%;\n
}\n
\n
/* link icon for table rows */\n
table.ui-responsive tbody tr {\n
min-height: 1.25em;\n
padding: 0.4em 2.75em 0.4em 1em;\n
min-height: 3.9em;\n
max-height: 3.9em;\n
position: relative;\n
line-height: 1.1em;\n
-webkit-box-sizing: border-box;\n
-moz-box-sizing: border-box;\n
box-sizing: border-box;\n
border-top: 1px solid;\n
padding: .4em .25em;\n
}\n
\n
/* bottom border on last row */ \n
table.ui-responsive tbody tr:last-child {\n
border-bottom-width: 1px;\n
border-bottom-style: solid;\n
}\n
\n
/* icon itself */\n
table.ui-responsive tbody tr:after {\n
font-size: 1.25em;\n
background: none repeat scroll 0 center rgba(0, 0, 0, 0);\n
background: transparent;\n
border-radius: 0;\n
content: ""; /* Thanks FontAwesome */\n
display: inline-block;\n
font-family: FontAwesome;\n
font-style: normal;\n
font-weight: normal;\n
line-height: 1;\n
margin-top: -9px;\n
right: 0.5625em;\n
right: 0;\n
margin-top: -11px;\n
top: 50%;\n
display: block;\n
......@@ -1151,6 +1171,40 @@ tfoot .ui-controlgroup .ui-controlgroup-controls a {\n
position: absolute;\n
width: 22px;\n
}\n
\n
/* stretch first link to full width (positioned relative to <tr>) */\n
html table tbody tr td:first-child a,\n
html table tbody tr th:first-child a {\n
position: absolute;\n
width: 100%;\n
top: 0;\n
bottom: 0;\n
margin-left: -.25em;\n
}\n
\n
/* set line height on cells after first row */\n
table tbody tr th:first-child ~ th {\n
line-height: 0;\n
}\n
\n
/* disactivate all links in these cells and set line-height, too */\n
html table tbody tr td:first-child ~ td a,\n
html table tbody tr th:first-child ~ th a,\n
html table tbody tr td:first-child ~ td a,\n
html table tbody tr th:first-child ~ th a {\n
display: inline-block;\n
padding: 0;\n
pointer-events: none;\n
line-height: 1em;\n
}\n
\n
/* pad non-empty cells just a little */\n
html table tbody tr td:first-child ~ td a:not(:empty),\n
html table tbody tr th:first-child ~ td a:not(:empty),\n
html table tbody tr td:first-child ~ th a:not(:empty),\n
html table tbody tr th:first-child ~ th a:not(:empty) {\n
padding: 0 0.1em;\n
}\n
\n
/* reset align */\n
tfoot .ui-controlgroup {\n
......@@ -2170,6 +2224,13 @@ html head + body .ui-bar-a .ui-btn:active,\n
html head + body .ui-body-a .ui-btn:active,\n
html head + body .ui-btn.ui-btn-a:active,\n
html head + body .ui-group-theme-a .ui-btn:active,\n
html head + body .ui-group-theme-a .ui-btn-a:active,\n
\n
html head + body .ui-bar-a .ui-btn-active,\n
html head + body .ui-body-a .ui-btn-active,\n
html head + body .ui-btn.ui-btn-a.ui-btn-active,\n
html head + body .ui-group-theme-a .ui-btn-active,\n
html head + body .ui-group-theme-a .ui-btn-a.ui-btn-active,\n
\n
/* Table row */\n
html head + body table.ui-body-a tbody tr:hover {\n
......@@ -2376,7 +2437,13 @@ html head + body .ui-bar-c .ui-btn:active,\n
html head + body .ui-body-c .ui-btn:active,\n
html head + body .ui-btn.ui-btn-c:active,\n
html head + body .ui-group-theme-c .ui-btn:active,\n
html head + body .ui-group-theme-c .ui-btn.ui-btn-c:active,\n
html head + body .ui-group-theme-c .ui-btn-c:active\n
\n
html head + body .ui-bar-c .ui-btn-active,\n
html head + body .ui-body-c .ui-btn-active,\n
html head + body .ui-btn.ui-btn-c.ui-btn-active,\n
html head + body .ui-group-theme-c .ui-btn-active,\n
html head + body .ui-group-theme-c .ui-btn-c.ui-btn-active,\n
\n
/* Table row hover */\n
html head + body table.ui-body-c tbody tr:hover{\n
......@@ -2569,6 +2636,12 @@ html head + body .ui-btn.ui-btn-d:active,\n
html head + body .ui-group-theme-d .ui-btn:active,\n
html head + body .ui-group-theme-d .ui-btn.ui-btn-d:active,\n
\n
html head + body .ui-bar-d .ui-btn-active,\n
html head + body .ui-body-d .ui-btn-active,\n
html head + body .ui-btn.ui-btn-d.ui-btn-active,\n
html head + body .ui-group-theme-d .ui-btn.ui-btn-active,\n
html head + body .ui-group-theme-d .ui-btn.ui-btn-d.ui-btn-active,\n
\n
/* Table row hover */\n
html head + body table.ui-body-d tbody tr:hover {\n
background-color: #25292b;\n
......@@ -4400,7 +4473,7 @@ html .ui-btn[class*="ui-icon-"]:after {\n
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>938.16158.8004.25992</string> </value>
<value> <string>938.18709.39605.41420</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -4418,7 +4491,7 @@ html .ui-btn[class*="ui-icon-"]:after {\n
</tuple>
<state>
<tuple>
<float>1413361727.89</float>
<float>1413453525.02</float>
<string>GMT</string>
</tuple>
</state>
......
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