mirror/php-phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-05-21 14:59:46 +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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15
phpBB/styles/prosilver/template/viewforum_body.html

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

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