mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-05-22 07:20:11 +02:00
Code Issues Releases Wiki Activity

[ticket/11956] Adjustments to responsive topiclist lists

Browse Source 
Changes behavior of topiclist lists on mobile devices.
Shows/hides certain elements in each row to present all
important information to visitor on mobile devices, such
as last post when viewing forum instead of first post.

Also fixes topiclist layout bug in drafts.html

PHPBB3-11956
This commit is contained in:
Vjacheslav Trushkin 2013-10-22 00:11:48 +03:00
parent 5c51378186
commit d2d4438db5
16 changed files with 170 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
phpBB/styles/prosilver/template/drafts.html
View File

@ -32,6 +32,9 @@
<!-- IF not S_PRIVMSGS --><!-- IF draftrow.S_LINK_TOPIC -->{L_TOPIC}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
<!-- ELSEIF draftrow.S_LINK_FORUM -->{L_FORUM}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
<!-- ELSE -->{L_NO_TOPIC_FORUM}<!-- ENDIF --><!-- ENDIF -->
<div class="responsive-show" style="display: none;">
{L_SAVE_DATE}{L_COLON} <strong>{draftrow.DATE}</strong>
</div>
</div>
</dt>
<dd class="info"><span>{draftrow.DATE}</span></dd>

76
phpBB/styles/prosilver/template/forum_fn.js
View File

@ -536,6 +536,82 @@ function insert_single_user(formId, user)
$(window).resize(check);
});
// Responsive topic lists
$('.topiclist.responsive-show-all > li > dl').each(function() {
var $this = $(this),
block = $this.find('dt .responsive-show:last-child'),
first = true;
if (!block.length) {
$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
block = $this.find('dt .responsive-show:last-child');
}
else {
first = (block.text().trim().length == 0);
}
$this.find('dd').not('.mark').each(function() {
var column = $(this),
children = column.children(),
html = column.html();
if (children.length == 1 && children.text() == column.text()) {
html = children.html();
}
block.append((first ? '' : '<br />') + html);
first = false;
});
});
$('.topiclist.responsive-show-columns').each(function() {
var list = $(this),
headers = [],
headersLength = 0;
list.prev('.topiclist').find('li.header dd').not('.mark').each(function() {
headers.push($(this).text());
headersLength ++;
});
if (!headersLength) {
return;
}
list.find('dl').each(function() {
var $this = $(this),
block = $this.find('dt .responsive-show:last-child'),
first = true;
if (!block.length) {
$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
block = $this.find('dt .responsive-show:last-child');
}
else {
first = (block.text().trim().length == 0);
}
$this.find('dd').not('.mark').each(function(i) {
var column = $(this),
children = column.children(),
html = column.html();
if (children.length == 1 && children.text() == column.text()) {
html = children.html();
}
if (i < headersLength) {
html = headers[i] + ': <strong>' + html + '</strong>';
}
block.append((first ? '' : '<br />') + html);
first = false;
});
});
});
// Responsive tables
$('table.table1').not('.not-responsive').each(function() {
var $this = $(this),

10
phpBB/styles/prosilver/template/forumlist_body.html
View File

@ -42,6 +42,16 @@
<a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="<!-- IF forumrow.subforum.UNREAD -->{L_UNREAD_POSTS}<!-- ELSE -->{L_NO_UNREAD_POSTS}<!-- ENDIF -->">{forumrow.subforum.SUBFORUM_NAME}</a><!-- IF not forumrow.subforum.S_LAST_ROW -->,<!-- ENDIF -->
<!-- END subforum -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT -->
<div class="responsive-show" style="display: none;">
<!-- IF forumrow.CLICKS -->
{L_REDIRECTS}{L_COLON} <strong>{forumrow.CLICKS}</strong>
<!-- ELSEIF not forumrow.S_IS_LINK and forumrow.TOPICS -->
{L_TOPICS}{L_COLON} <strong>{forumrow.TOPICS}</strong>
<!-- ENDIF -->
</div>
<!-- ENDIF -->
</div>
</dt>
<!-- IF forumrow.CLICKS -->

10
phpBB/styles/prosilver/template/mcp_forum.html
View File

@ -63,7 +63,15 @@
</ul>
</div>
<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<div class="responsive-hide">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
</div>
<div class="responsive-show" style="display: none;">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; {topicrow.LAST_POST_TIME}<br />
{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong>
</div>
</div>
</dt>

6
phpBB/styles/prosilver/template/mcp_front.html
View File

@ -21,7 +21,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist missing-column">
<ul class="topiclist cplist missing-column responsive-show-all">
<!-- BEGIN unapproved -->
<li class="row<!-- IF unapproved.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
@ -75,7 +75,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist two-long-columns">
<ul class="topiclist cplist two-long-columns responsive-show-all">
<!-- BEGIN report -->
<li class="row<!-- IF report.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
@ -116,7 +116,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist two-long-columns">
<ul class="topiclist cplist two-long-columns responsive-show-all">
<!-- BEGIN pm_report -->
<li class="row<!-- IF pm_report.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">

2
phpBB/styles/prosilver/template/mcp_queue.html
View File

@ -35,7 +35,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist missing-column">
<ul class="topiclist cplist missing-column responsive-show-all">
<!-- BEGIN postrow -->

7
phpBB/styles/prosilver/template/mcp_reports.html
View File

@ -48,6 +48,9 @@
<a href="{postrow.U_VIEW_DETAILS}" class="topictitle">{postrow.PM_SUBJECT}</a> {postrow.ATTACH_ICON_IMG}<br />
<span>{L_MESSAGE_BY_AUTHOR} {postrow.PM_AUTHOR_FULL} &raquo; {postrow.PM_TIME}</span><br />
<span>{L_MESSAGE_TO} {postrow.RECIPIENTS}</span>
<div class="responsive-show" style="display: none;">
{L_REPORTER}{L_COLON} {postrow.REPORTER_FULL} &laquo; {postrow.REPORT_TIME}
</div>
</div>
</dt>
<dd class="moderation">
@ -58,6 +61,10 @@
<div class="list-inner">
<a href="{postrow.U_VIEW_DETAILS}" class="topictitle">{postrow.POST_SUBJECT}</a> {postrow.ATTACH_ICON_IMG}<br />
<span>{L_POSTED} {L_POST_BY_AUTHOR} {postrow.POST_AUTHOR_FULL} &raquo; {postrow.POST_TIME}</span>
<div class="responsive-show" style="display: none;">
{L_REPORTER}{L_COLON} {postrow.REPORTER_FULL} &laquo; {postrow.REPORT_TIME}<br />
<!-- IF postrow.U_VIEWFORUM -->{L_FORUM}{L_COLON} <a href="{postrow.U_VIEWFORUM}">{postrow.FORUM_NAME}</a><!-- ELSE -->{postrow.FORUM_NAME}<!-- ENDIF -->
</div>
</div>
</dt>
<dd class="moderation">

2
phpBB/styles/prosilver/template/ucp_attachments.html
View File

@ -31,7 +31,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist">
<ul class="topiclist cplist responsive-show-columns">
<!-- BEGIN attachrow -->
<li class="row<!-- IF attachrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">

2
phpBB/styles/prosilver/template/ucp_groups_manage.html
View File

@ -214,7 +214,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist two-long-columns">
<ul class="topiclist cplist two-long-columns responsive-show-all">
<!-- BEGIN leader -->
<li class="row<!-- IF attachrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">

10
phpBB/styles/prosilver/template/ucp_main_bookmarks.html
View File

@ -54,7 +54,15 @@
</ul>
</div>
<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<div class="responsive-hide">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
</div>
<div class="responsive-show" style="display: none;">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo;
<a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
</div>
</div>
</dt>
<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}

4
phpBB/styles/prosilver/template/ucp_main_drafts.html
View File

@ -45,6 +45,10 @@
<!-- ELSEIF draftrow.S_LINK_FORUM -->{L_FORUM}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
<!-- ELSEIF S_PRIVMSGS -->
<!-- ELSE -->{L_NO_TOPIC_FORUM}<!-- ENDIF -->
<div class="responsive-show" style="display: none;">
{L_SAVE_DATE}{L_COLON} <strong>{draftrow.DATE}</strong><br />
<!-- IF draftrow.U_INSERT --><a href="{draftrow.U_INSERT}">{L_LOAD_DRAFT}</a> &bull; <!-- ENDIF --><a href="{draftrow.U_VIEW_EDIT}">{L_VIEW_EDIT}</a>
</div>
</div>
</dt>
<dd class="info"><span>{draftrow.DATE}<br /><!-- IF draftrow.U_INSERT --><a href="{draftrow.U_INSERT}">{L_LOAD_DRAFT}</a> &bull; <!-- ENDIF --><a href="{draftrow.U_VIEW_EDIT}">{L_VIEW_EDIT}</a></span></dd>

9
phpBB/styles/prosilver/template/ucp_main_front.html
View File

@ -31,7 +31,14 @@
</ul>
</div>
<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<div class="responsive-hide">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
</div>
<div class="responsive-show" style="display: none;">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
</div>
</div>
</dt>
<dd class="lastpost"><span>{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}

21
phpBB/styles/prosilver/template/ucp_main_subscribed.html
View File

@ -23,7 +23,17 @@
<!-- BEGIN forumrow -->
<li class="row<!-- IF forumrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
<dl class="icon {forumrow.FORUM_IMG_STYLE}">
<dt><div class="list-inner"><a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />{forumrow.FORUM_DESC}</div></dt>
<dt>
<div class="list-inner">
<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
{forumrow.FORUM_DESC}
<!-- IF forumrow.LAST_POST_TIME -->
<div class="responsive-show" style="display: none;">
{L_LAST_POST} {L_POST_BY_AUTHOR} {forumrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{forumrow.LAST_POST_TIME}</a>
</div>
<!-- ENDIF -->
</div>
</dt>
<dd class="lastpost"><!-- IF forumrow.LAST_POST_TIME --><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {forumrow.LAST_POST_AUTHOR_FULL}
<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{forumrow.LAST_POST_TIME}</span>
<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF -->
@ -79,7 +89,14 @@
</ul>
</div>
<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<div class="responsive-hide">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
</div>
<div class="responsive-show" style="display: none;">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
</div>
</div>
</dt>
<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}

2
phpBB/styles/prosilver/template/ucp_pm_viewfolder.html
View File

@ -53,7 +53,7 @@
</dl>
</li>
</ul>
<ul class="topiclist cplist pmlist <!-- IF S_SHOW_RECIPIENTS -->missing-column<!-- ELSE -->two-columns<!-- ENDIF -->">
<ul class="topiclist cplist pmlist responsive-show-all <!-- IF S_SHOW_RECIPIENTS -->missing-column<!-- ELSE -->two-columns<!-- ENDIF -->">
<!-- BEGIN messagerow -->
<li class="row<!-- IF messagerow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF messagerow.PM_CLASS --> {messagerow.PM_CLASS}<!-- ENDIF -->">

13
phpBB/styles/prosilver/template/viewforum_body.html
View File

@ -163,8 +163,19 @@
</ul>
</div>
<!-- ENDIF -->
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<div class="responsive-hide">
<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
<!-- IF topicrow.S_POST_GLOBAL and FORUM_ID != topicrow.FORUM_ID --> &raquo; {L_IN} <a href="{topicrow.U_VIEW_FORUM}">{topicrow.FORUM_NAME}</a><!-- ENDIF -->
</div>
<!-- IF not S_IS_BOT -->
<div class="responsive-show" style="display: none;">
{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
<!-- IF topicrow.S_POST_GLOBAL and FORUM_ID != topicrow.FORUM_ID --><br />{L_POSTED} {L_IN} <a href="{topicrow.U_VIEW_FORUM}">{topicrow.FORUM_NAME}</a><!-- ENDIF -->
<!-- IF topicrow.REPLIES --><br />{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong><!-- ENDIF -->
</div>
<!-- ENDIF -->
<!-- EVENT topiclist_row_append -->
</div>
</dt>

28
phpBB/styles/prosilver/theme/responsive.css
View File

@ -133,35 +133,12 @@ ul.topiclist.forums dt, ul.topiclist.topics dt {
}
ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
margin-right: 250px;
padding-bottom: 18px;
}
ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
display: block;
}
ul.topiclist.forums dd.topics, ul.topiclist.topics dd.posts {
display: block;
position: absolute;
left: 45px;
right: 0;
bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 0;
height: auto;
border-width: 0;
margin: 0;
padding: 5px 0;
width: auto;
min-width: 0;
text-align: left;
font-weight: bold;
font-size: 1.2em;
line-height: 1em;
}
ul.topiclist dd.mark {
display: block;
position: absolute;
@ -196,6 +173,11 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
}
}
li.row .responsive-show strong {
font-weight: bold;
color: inherit;
}
/* Notifications list
----------------------------------------*/
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px)