makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 06:08:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/11552] Responsive member list

Browse source 
Responsive member list and better responsive tables

PHPBB3-11552
This commit is contained in:
Vjacheslav Trushkin 2013-10-19 21:01:25 +03:00
parent fbd57b9369
commit 734131d750
9 changed files with 103 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
phpBB/styles/prosilver/template/forum_fn.js
View file

@ -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),

2
phpBB/styles/prosilver/template/mcp_front.html
View file

@ -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>

2
phpBB/styles/prosilver/template/mcp_logs.html
View file

@ -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>

4
phpBB/styles/prosilver/template/mcp_warn_front.html
View file

@ -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>

2
phpBB/styles/prosilver/template/mcp_warn_list.html
View file

@ -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>

4
phpBB/styles/prosilver/template/memberlist_body.html
View file

@ -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> &bull; <!-- 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> &bull; <!-- 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>

2
phpBB/styles/prosilver/template/search_body.html
View file

@ -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>&nbsp;{recentsearch.TIME}</span></td>
<td class="active">{recentsearch.TIME}</td>
</tr>
<!-- BEGINELSE -->
<tr class="bg1">

6
phpBB/styles/prosilver/theme/common.css
View file

@ -435,6 +435,10 @@ ul.responsive-popup li {
text-align: left;
}
.wrap ul.responsive-popup li {
white-space: normal;
}
ul.responsive-popup li:before, ul.responsive-popup li:after {
display: none !important;
}
@ -502,7 +506,7 @@ table.table1 tbody th {
/* Specific column styles */
table.table1 .name { text-align: left; }
table.table1 .posts { text-align: center !important; width: 7%; }
table.table1 .posts { text-align: center; width: 7%; }
table.table1 .joined { text-align: left; width: 15%; }
table.table1 .active { text-align: left; width: 15%; }
table.table1 .mark { text-align: center; width: 7%; }

70
phpBB/styles/prosilver/theme/responsive.css
View file

@ -232,72 +232,50 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
/* Responsive tables
----------------------------------------*/
table.responsive, table.responsive thead, table.responsive tbody, table.responsive tr, table.responsive th, table.responsive td {
display: block;
width: auto;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table.responsive thead {
display: none;
}
table.responsive th {
display: none;
border-bottom-width: 0 !important;
}
table.mcp-warnings thead {
table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
display: block;
}
table.mcp-warnings th:nth-child(1),
table.mcp-warnings th:nth-child(3) {
display: inline;
table.responsive thead, table.responsive th {
display: none;
}
table.mcp-warnings th:nth-child(1):after {
content: ',';
table.responsive.show-header thead, table.responsive.show-header th:first-child {
display: block;
width: auto !important;
text-align: left !important;
}
table.responsive tr {
overflow: hidden;
margin: 5px 0;
margin: 2px 0;
}
table.mcp-logs td:nth-child(2),
table.mcp-warnings td:nth-child(2n + 1) {
width: 50%;
float: left;
table.responsive td {
width: auto !important;
text-align: left !important;
padding: 4px;
}
table.mcp-logs td:nth-child(3),
table.mcp-warnings td:nth-child(2n) {
margin-left: 50%;
text-align: right;
table.responsive td.empty {
display: none !important;
}
table.mcp-logs td:nth-child(4), table.mcp-logs td:nth-child(5),
table.mcp-logs-full td:nth-child(1), table.mcp-logs-full td:nth-child(2) {
width: 33%;
float: left;
table.responsive td > dfn {
display: inline-block !important;
}
table.mcp-logs td:nth-child(4),
table.mcp-logs-full td:nth-child(4) {
clear: left;
table.responsive td > dfn:after {
content: ':';
padding-right: 5px;
}
table.mcp-logs td:nth-child(5),
table.mcp-logs-full td:nth-child(2) {
text-align: center;
table.responsive span.rank-img {
float: none;
padding-right: 5px;
}
table.mcp-logs td:nth-child(6),
table.mcp-logs-full td:nth-child(3) {
margin-left: 66%;
text-align: right;
table.responsive#memberlist td:first-child input[type="checkbox"] {
float: right;
}
/* Forms