diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-19 21:01:25 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-19 21:01:25 +0300 |
| commit | 734131d75053bd27fbe4f3b1292e81c4fc16abe3 (patch) | |
| tree | 1397fc44cce47f379a8aecb3ec1091007ce0666f /phpBB/styles/prosilver/template | |
| parent | fbd57b93696394e5c80297c4b166fff5bfc16860 (diff) | |
| download | forums-734131d75053bd27fbe4f3b1292e81c4fc16abe3.tar forums-734131d75053bd27fbe4f3b1292e81c4fc16abe3.tar.gz forums-734131d75053bd27fbe4f3b1292e81c4fc16abe3.tar.bz2 forums-734131d75053bd27fbe4f3b1292e81c4fc16abe3.tar.xz forums-734131d75053bd27fbe4f3b1292e81c4fc16abe3.zip | |
[ticket/11552] Responsive member list
Responsive member list and better responsive tables
PHPBB3-11552
Diffstat (limited to 'phpBB/styles/prosilver/template')
| -rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 66 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/mcp_front.html | 2 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/mcp_logs.html | 2 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/mcp_warn_front.html | 4 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/mcp_warn_list.html | 2 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/memberlist_body.html | 4 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/search_body.html | 2 |
7 files changed, 74 insertions, 8 deletions
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index a6cb378246..97f99a5e52 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -533,6 +533,72 @@ function insert_single_user(formId, user) $(window).resize(check); }); + // Responsive tables + $('table.table1').not('.not-responsive').each(function() { + var $this = $(this), + th = $this.find('thead > tr > th'), + columns = th.length, + headers = [], + totalHeaders = 0, + i, headersLength; + + // Find each header + th.each(function() { + 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 ++; + }); + + 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; + }); + }); + }); + // Responsive link lists $('.linklist:not(.navlinks, .skip-responsive)').each(function() { var $this = $(this), diff --git a/phpBB/styles/prosilver/template/mcp_front.html b/phpBB/styles/prosilver/template/mcp_front.html index fd224f80bc..402cfe029a 100644 --- a/phpBB/styles/prosilver/template/mcp_front.html +++ b/phpBB/styles/prosilver/template/mcp_front.html @@ -147,7 +147,7 @@ <h3>{L_LATEST_LOGS}</h3> - <table class="table1 responsive mcp-logs" cellspacing="0"> + <table class="table1" cellspacing="0"> <thead> <tr> <th class="name">{L_ACTION}</th> diff --git a/phpBB/styles/prosilver/template/mcp_logs.html b/phpBB/styles/prosilver/template/mcp_logs.html index 658e8cf97f..492c8cf201 100644 --- a/phpBB/styles/prosilver/template/mcp_logs.html +++ b/phpBB/styles/prosilver/template/mcp_logs.html @@ -21,7 +21,7 @@ </li> </ul> - <table cellspacing="1" class="table1 responsive mcp-logs-full"> + <table cellspacing="1" class="table1"> <thead> <tr> <th>{L_USERNAME}</th> diff --git a/phpBB/styles/prosilver/template/mcp_warn_front.html b/phpBB/styles/prosilver/template/mcp_warn_front.html index 1ede323720..5a332cf202 100644 --- a/phpBB/styles/prosilver/template/mcp_warn_front.html +++ b/phpBB/styles/prosilver/template/mcp_warn_front.html @@ -33,7 +33,7 @@ <h3>{L_MOST_WARNINGS}</h3> <!-- IF .highest --> - <table class="table1 responsive mcp-warnings" cellspacing="0"> + <table class="table1" cellspacing="0"> <thead> <tr> <th class="name">{L_USERNAME}</th> @@ -67,7 +67,7 @@ <h3>{L_LATEST_WARNINGS}</h3> <!-- IF .latest --> - <table class="table1 responsive mcp-warnings" cellspacing="0"> + <table class="table1" cellspacing="0"> <thead> <tr> <th class="name">{L_USERNAME}</th> diff --git a/phpBB/styles/prosilver/template/mcp_warn_list.html b/phpBB/styles/prosilver/template/mcp_warn_list.html index 61e449b5b5..cdf2aecc0e 100644 --- a/phpBB/styles/prosilver/template/mcp_warn_list.html +++ b/phpBB/styles/prosilver/template/mcp_warn_list.html @@ -21,7 +21,7 @@ </li> </ul> - <table class="table1 responsive mcp-warnings" cellspacing="0"> + <table class="table1" cellspacing="0"> <thead> <tr> <th class="name">{L_USERNAME}</th> diff --git a/phpBB/styles/prosilver/template/memberlist_body.html b/phpBB/styles/prosilver/template/memberlist_body.html index 46b35eae2c..f4190d7931 100644 --- a/phpBB/styles/prosilver/template/memberlist_body.html +++ b/phpBB/styles/prosilver/template/memberlist_body.html @@ -28,7 +28,7 @@ <div class="panel"> <div class="inner"> - <ul class="linklist"> + <ul class="linklist wrap"> <li> <!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}" id="member_search" data-alt-text="{LA_HIDE_MEMBER_SEARCH}">{L_FIND_USERNAME}</a> • <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}" id="member_search" data-alt-text="{LA_FIND_USERNAME}">{L_HIDE_MEMBER_SEARCH}</a> • <!-- ENDIF --> <strong style="font-size: 0.95em;"> @@ -58,7 +58,7 @@ <table class="table1" cellspacing="1" id="memberlist"> <thead> <tr> - <th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th> + <th class="name" data-dfn="{L_RANK}, <!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF -->"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th> <th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th> <th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th> <th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th> diff --git a/phpBB/styles/prosilver/template/search_body.html b/phpBB/styles/prosilver/template/search_body.html index d4c1f98a2a..7229e5a5dc 100644 --- a/phpBB/styles/prosilver/template/search_body.html +++ b/phpBB/styles/prosilver/template/search_body.html @@ -105,7 +105,7 @@ <!-- BEGIN recentsearch --> <tr class="<!-- IF recentsearch.S_ROW_COUNT is even -->bg1<!-- ELSE -->bg2<!-- ENDIF -->"> <td><a href="{recentsearch.U_KEYWORDS}">{recentsearch.KEYWORDS}</a></td> - <td class="active"><span> {recentsearch.TIME}</span></td> + <td class="active">{recentsearch.TIME}</td> </tr> <!-- BEGINELSE --> <tr class="bg1"> |