diff options
Diffstat (limited to 'phpBB/adm')
-rw-r--r-- | phpBB/adm/style/acp_main.html | 2 | ||||
-rw-r--r-- | phpBB/adm/style/admin.css | 98 | ||||
-rw-r--r-- | phpBB/adm/style/admin.js | 97 |
3 files changed, 196 insertions, 1 deletions
diff --git a/phpBB/adm/style/acp_main.html b/phpBB/adm/style/acp_main.html index d9e7fb7eeb..b6d520130a 100644 --- a/phpBB/adm/style/acp_main.html +++ b/phpBB/adm/style/acp_main.html @@ -78,7 +78,7 @@ <!-- EVENT acp_main_notice_after --> - <table cellspacing="1"> + <table cellspacing="1" class="two-columns no-header" data-no-responsive-header="true"> <caption>{L_FORUM_STATS}</caption> <col class="col1" /><col class="col2" /><col class="col1" /><col class="col2" /> <thead> diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 79b88cf52f..2cd8d0005c 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -754,6 +754,104 @@ td.name { color: #BC2A4D; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + display: block; + } + + table.responsive thead, table.responsive th, table.responsive colgroup { + display: none; + } + + table.responsive.show-header thead, table.responsive.show-header th:first-child, table.responsive caption { + display: block; + width: auto !important; + text-align: left !important; + margin: 0; + } + + table.responsive { + background: transparent none; + border-width: 0; + } + + table.responsive caption { + padding: 3px 4px; + color: #FFFFFF; + background: #70AED3 url("../images/gradient2b.gif") bottom left repeat-x; + border-top: 1px solid #6DACD2; + border-bottom: 1px solid #327AA5; + text-align: left; + font-size: 0.75em; + font-weight: bold; + text-transform: uppercase; + } + + table.responsive.show-header th:first-child span.rank-img, table.responsive.no-caption caption, table.responsive.no-header thead { + display: none; + } + + table.responsive tr { + margin: 2px 0; + border: 1px solid #CCCFD3; + background-color: #FFFFFF; + padding: 1px 1px 0; + overflow: hidden; + } + + table.responsive tr.row1 td { background-color: #F9F9F9; } + table.responsive tr.row2 td { background-color: #DCEBFE; } + table.responsive tr.row3 td { background-color: #DBDFE2; } + table.responsive tr.row4 td { background-color: #E4E8EB; } + table.responsive tr.col1 td { background-color: #DCEBFE; } + table.responsive tr.col2 td { background-color: #F9F9F9; } + table.responsive tr.row1a td { background-color: #F9F9F9; } + table.responsive tr.row1b td { background-color: #F6F6F6; } + table.responsive tr.row2a td { background-color: #E7EEF4; } + table.responsive tr.row2b td { background-color: #E3EBF2; } + + table.responsive td { + width: auto !important; + text-align: left !important; + padding: 4px; + margin-bottom: 1px; + } + + table.responsive td.empty { + display: none !important; + } + + table.responsive td > dfn { + display: inline-block !important; + } + + table.responsive td > dfn:after { + content: ':'; + padding-right: 5px; + } + + table.responsive.two-columns td { + width: 50% !important; + float: left; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + table.responsive.two-columns td:nth-child(2n+1) { + clear: left; + } + + table.responsive span.rank-img { + float: none; + padding-right: 5px; + } + + table.responsive#memberlist td:first-child input[type="checkbox"] { + float: right; + } +} + /* General form styles ----------------------------------------*/ fieldset { diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js index a9e00ab9d7..385e49dc87 100644 --- a/phpBB/adm/style/admin.js +++ b/phpBB/adm/style/admin.js @@ -36,6 +36,103 @@ function parse_document(container) blocks.filter(':first').addClass('active'); } }); + + /** + * Responsive tables + */ + container.find('table').not('.not-responsive').each(function() { + var $this = $(this), + th = $this.find('thead > tr > th'), + columns = th.length, + headers = [], + totalHeaders = 0, + i, headersLength; + + // Find columns + $this.find('colgroup:first').children().each(function(i) { + var column = $(this); + if (column.hasClass('col1')) { + $this.find('td:nth-child(' + (i + 1) + ')').addClass('col1'); + } + if (column.hasClass('col2')) { + $this.find('td:nth-child(' + (i + 1) + ')').addClass('col2'); + } + }); + + // Find each header + if (!$this.data('no-responsive-header')) + { + th.each(function(column) { + var cell = $(this), + colspan = parseInt(cell.attr('colspan')), + dfn = cell.attr('data-dfn'), + text = dfn ? dfn : cell.text(); + + colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; + + for (i=0; i<colspan; i++) { + headers.push(text); + } + totalHeaders ++; + + if (dfn && !column) { + $this.addClass('show-header'); + } + }); + } + + headersLength = headers.length; + + // Add header text to each cell as <dfn> + $this.addClass('responsive'); + + if (totalHeaders < 2) { + $this.addClass('show-header'); + return; + } + + $this.find('tbody > tr').each(function() { + var row = $(this), + cells = row.children('td'), + column = 0; + + if (cells.length == 1) { + row.addClass('big-column'); + return; + } + + cells.each(function() { + var cell = $(this), + colspan = parseInt(cell.attr('colspan')), + text = cell.text().trim(); + + if (headersLength <= column) { + return; + } + + if (text.length && text !== '-') { + cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>'); + } + else { + cell.addClass('empty'); + } + + colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan; + column += colspan; + }); + }); + }); + + /** + * Hide empty responsive tables + */ + container.find('table.responsive > tbody').each(function() { + var items = $(this).children('tr'); + if (items.length == 0) + { + $(this).parent('table:first').addClass('responsive-hide'); + } + }); } /** |