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

Merge pull request #1803 from cyberalien/ticket/11956

Browse source 
Fixes for responsive design
This commit is contained in:
Nils Adermann 2013-10-24 09:45:16 -07:00
commit 9185fce9d4
28 changed files with 1075 additions and 622 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
phpBB/styles/prosilver/template/drafts.html
View file

@ -13,26 +13,31 @@
<div class="<!-- IF not S_PRIVMSGS -->forumbg<!-- ELSE -->panel<!-- ENDIF -->">
<div class="inner">
<ul class="topiclist">
<ul class="topiclist two-long-columns">
<li class="header">
<dl>
<dt>{L_LOAD_DRAFT}</dt>
<dd class="posted">{L_SAVE_DATE}</dd>
<dd class="info">{L_SAVE_DATE}</dd>
</dl>
</li>
</ul>
<ul class="topiclist<!-- IF not S_PRIVMSGS --> topics<!-- ELSE --> cplist<!-- ENDIF -->">
<ul class="topiclist two-long-columns<!-- IF not S_PRIVMSGS --> topics<!-- ELSE --> cplist<!-- ENDIF -->">
<!-- BEGIN draftrow -->
<li class="row<!-- IF draftrow.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
<dl>
<dt>
<div class="list-inner">
<a href="{draftrow.U_INSERT}" title="{L_LOAD_DRAFT}" class="topictitle">{draftrow.DRAFT_SUBJECT}</a><br />
<!-- 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="posted">{draftrow.DATE}</dd>
<dd class="info"><span>{draftrow.DATE}</span></dd>
</dl>
</li>
<!-- END draftrow -->

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

@ -409,47 +409,147 @@ function insert_single_user(formId, user)
self.close();
}
/**
* Run onload functions
*/
(function($) {
$(document).ready(function() {
// Swap .nojs and .hasjs
$('#phpbb.nojs').toggleClass('nojs hasjs');
function toggle_dropdown()
{
var $this = $(this),
options = $this.data('dropdown-options'),
parent = options.parent,
visible = parent.hasClass('dropdown-visible');
// Focus forms
$('form[data-focus]:first').each(function() {
$('#' + this.getAttribute('data-focus')).focus();
if (!visible) {
// Hide other dropdown menus
$('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
// Figure out direction of dropdown
var direction = options.direction,
verticalDirection = options.verticalDirection,
offset = $this.offset();
if (direction == 'auto') {
if (($(window).width() - $this.outerWidth(true)) / 2 > offset.left) {
direction = 'right';
}
else {
direction = 'left';
}
}
parent.toggleClass(options.leftClass, direction == 'left').toggleClass(options.rightClass, direction == 'right');
if (verticalDirection == 'auto') {
var height = $(window).height(),
top = offset.top - $(window).scrollTop();
if (top < height * 0.7) {
verticalDirection = 'down';
}
else {
verticalDirection = 'up';
}
}
parent.toggleClass(options.upClass, verticalDirection == 'up').toggleClass(options.downClass, verticalDirection == 'down');
}
options.dropdown.toggle();
parent.toggleClass(options.visibleClass, !visible).toggleClass('dropdown-visible', !visible);
// Check dimensions when showing dropdown
// !visible because variable shows state of dropdown before it was toggled
if (!visible) {
options.dropdown.find('.dropdown-contents').each(function() {
var $this = $(this),
windowWidth = $(window).width();
$this.css({
marginLeft: 0,
left: 0,
maxWidth: (windowWidth - 4) + 'px'
});
// Reset avatar dimensions when changing URL or EMAIL
$('input[data-reset-on-edit]').bind('keyup', function() {
var offset = $this.offset().left,
width = $this.outerWidth(true);
if (offset < 2) {
$this.css('left', (2 - offset) + 'px');
}
else if ((offset + width + 2) > windowWidth) {
$this.css('margin-left', (windowWidth - offset - width - 2) + 'px');
}
});
}
}
/**
* Dropdown handler
* Shows/hides dropdown, decides which side to open to
*
* @param [jQuery] toggle Link that toggles dropdown
* @param [jQuery] dropdown Dropdown menu
* @param [Object] [options] List of options
*/
function register_dropdown(toggle, dropdown, options)
{
var ops = {
parent: toggle.parent(), // Parent item to add classes to
direction: 'auto', // Direction of dropdown menu. Possible values: auto, left, right
verticalDirection: 'auto', // Vertical direction. Possible values: auto, up, down
visibleClass: 'visible', // Class to add to parent item when dropdown is visible
leftClass: 'dropdown-left', // Class to add to parent item when dropdown opens to left side
rightClass: 'dropdown-right', // Class to add to parent item when dropdown opens to right side
upClass: 'dropdown-up', // Class to add to parent item when dropdown opens above menu item
downClass: 'dropdown-down' // Class to add to parent item when dropdown opens below menu item
};
if (options) {
ops = $.extend(ops, options);
}
ops.dropdown = dropdown;
ops.parent.addClass('dropdown-container');
toggle.addClass('dropdown-toggle');
toggle.data('dropdown-options', ops);
toggle.click(toggle_dropdown);
}
/**
* Parse document block
*/
function parse_document(container)
{
var test = document.createElement('div'),
oldBrowser = (typeof test.style.borderRadius == 'undefined');
delete test;
/**
* Reset avatar dimensions when changing URL or EMAIL
*/
container.find('input[data-reset-on-edit]').bind('keyup', function() {
$(this.getAttribute('data-reset-on-edit')).val('');
});
// Pagination
$('a.pagination-trigger').click(function() {
/**
* Pagination
*/
container.find('a.pagination-trigger').click(function() {
jumpto($(this));
});
// Adjust HTML code for IE8 and older versions
var test = document.createElement('div'),
oldBrowser = (typeof test.style.borderRadius == 'undefined');
delete test;
/**
* Adjust HTML code for IE8 and older versions
*/
if (oldBrowser) {
// Fix .linklist.bulletin lists
$('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
container.find('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin');
// Do not run functions below for old browsers
return;
}
// Adjust topiclist lists with check boxes
$('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark');
// Resize navigation block to keep all links on same line
$('.navlinks').each(function() {
/**
* Resize navigation block to keep all links on same line
*/
container.find('.navlinks').each(function() {
var $this = $(this),
left = $this.children().not('.rightside'),
right = $this.children('.rightside');
@ -470,13 +570,15 @@ function insert_single_user(formId, user)
$(window).resize(resize);
});
// Responsive breadcrumbs
$('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() {
/**
* Makes breadcrumbs responsive
*/
container.find('.breadcrumbs:not([data-skip-responsive])').each(function() {
var $this = $(this),
$body = $('body'),
links = $this.find('.crumb'),
length = links.length,
classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'],
classes = ['wrapped-max', 'wrapped-wide', 'wrapped-medium', 'wrapped-small', 'wrapped-tiny'],
classesLength = classes.length,
maxHeight = 0,
lastWidth = false,
@ -536,8 +638,111 @@ function insert_single_user(formId, user)
$(window).resize(check);
});
// Responsive tables
$('table.table1').not('.not-responsive').each(function() {
/**
* Adjust topiclist lists with check boxes
*/
container.find('ul.topiclist dd.mark').siblings('dt').children('.list-inner').addClass('with-mark');
/**
* Appends contents of all extra columns to first column in
* .topiclist lists for mobile devices. Copies contents as is.
*
* To add that functionality to .topiclist list simply add
* responsive-show-all to list of classes
*/
container.find('.topiclist.responsive-show-all > li > dl').each(function() {
var $this = $(this),
block = $this.find('dt .responsive-show:last-child'),
first = true;
// Create block that is visible only on mobile devices
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);
}
// Copy contents of each column
$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;
});
});
/**
* Same as above, but prepends text from header to each
* column before contents of that column.
*
* To add that functionality to .topiclist list simply add
* responsive-show-columns to list of classes
*/
container.find('.topiclist.responsive-show-columns').each(function() {
var list = $(this),
headers = [],
headersLength = 0;
// Find all headers, get contents
list.prev('.topiclist').find('li.header dd').not('.mark').each(function() {
headers.push($(this).text());
headersLength ++;
});
if (!headersLength) {
return;
}
// Parse each row
list.find('dl').each(function() {
var $this = $(this),
block = $this.find('dt .responsive-show:last-child'),
first = true;
// Create block that is visible only on mobile devices
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);
}
// Copy contents of each column
$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();
}
// Prepend contents of matching header before contents of column
if (i < headersLength) {
html = headers[i] + ': <strong>' + html + '</strong>';
}
block.append((first ? '' : '<br />') + html);
first = false;
});
});
});
/**
* Responsive tables
*/
container.find('table.table1').not('.not-responsive').each(function() {
var $this = $(this),
th = $this.find('thead > tr > th'),
columns = th.length,
@ -546,7 +751,7 @@ function insert_single_user(formId, user)
i, headersLength;
// Find each header
th.each(function() {
th.each(function(column) {
var cell = $(this),
colspan = parseInt(cell.attr('colspan')),
dfn = cell.attr('data-dfn'),
@ -558,6 +763,10 @@ function insert_single_user(formId, user)
headers.push(text);
}
totalHeaders ++;
if (dfn && !column) {
$this.addClass('show-header');
}
});
headersLength = headers.length;
@ -602,15 +811,29 @@ function insert_single_user(formId, user)
});
});
// Responsive link lists
$('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
/**
* 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');
}
});
/**
* Responsive link lists
*/
container.find('.linklist:not(.navlinks, [data-skip-responsive]), .postbody ul.profile-icons:not([data-skip-responsive])').each(function() {
var $this = $(this),
$body = $('body'),
links = $this.children().not('.skip-responsive'),
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
// List of items that should be hidden last
filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
filtered = links.filter(filterString);
filterSkip = '.breadcrumbs, [data-skip-responsive]',
filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
allLinks = $this.children(),
links = allLinks.not(filterSkip),
html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><div class="dropdown" style="display:none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>',
filterLastList = links.filter(filterLast);
if (links.is('.rightside'))
{
@ -621,9 +844,8 @@ function insert_single_user(formId, user)
$this.append(html);
}
var toggle = $this.children('.responsive-menu'),
toggleLink = toggle.find('a.responsive-menu-link'),
menu = toggle.find('ul.responsive-popup'),
var item = $this.children('.responsive-menu'),
menu = item.find('.dropdown-contents'),
lastWidth = false,
compact = false,
responsive = false,
@ -640,7 +862,7 @@ function insert_single_user(formId, user)
responsive = false;
$this.removeClass('responsive');
links.css('display', '');
toggle.css('display', 'none');
item.css('display', 'none');
}
if (compact) {
@ -650,7 +872,7 @@ function insert_single_user(formId, user)
// Find tallest element
var maxHeight = 0;
links.each(function() {
allLinks.each(function() {
if (!$(this).height()) return;
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
});
@ -661,8 +883,6 @@ function insert_single_user(formId, user)
// Nothing to resize if block's height is not bigger than tallest element's height
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
return;
}
@ -671,14 +891,12 @@ function insert_single_user(formId, user)
$this.addClass('compact');
var compactMaxHeight = 0;
links.each(function() {
allLinks.each(function() {
if (!$(this).height()) return;
compactMaxHeight = Math.max(compactMaxHeight, $(this).outerHeight(true));
});
if ($this.height() <= maxHeight) {
toggle.removeClass('visible');
menu.hide();
return;
}
@ -688,9 +906,6 @@ function insert_single_user(formId, user)
responsive = true;
if (!copied) {
if (menu.parents().is('.rightside')) {
menu.addClass('responsive-rightside');
}
menu.append(links.clone(true));
menu.find('li.leftside, li.rightside').removeClass('leftside rightside');
menu.find('.inputbox').parents('li:first').css('white-space', 'normal');
@ -700,21 +915,21 @@ function insert_single_user(formId, user)
menu.children().css('display', '');
}
toggle.css('display', '');
item.css('display', '');
$this.addClass('responsive');
// Try to not hide filtered items
if (filtered.length) {
links.not(filterString).css('display', 'none');
if (filterLastList.length) {
links.not(filterLast).css('display', 'none');
maxHeight = 0;
filtered.each(function() {
filterLastList.each(function() {
if (!$(this).height()) return;
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
});
if ($this.height() <= maxHeight) {
menu.children().filter(filterString).css('display', 'none');
menu.children().filter(filterLast).css('display', 'none');
return;
}
}
@ -722,36 +937,30 @@ function insert_single_user(formId, user)
links.css('display', 'none');
}
toggleLink.click(function() {
if (!responsive) return;
if (!toggle.hasClass('visible')) {
// Hide other popups
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
}
toggle.toggleClass('visible');
menu.toggle();
});
register_dropdown(item.find('a.responsive-menu-link'), item.find('.dropdown'));
check();
$(window).resize(check);
});
// Responsive tabs
$('#tabs, #minitabs').not('.skip-responsive').each(function() {
/**
* Responsive tabs
*/
container.find('#tabs, #minitabs').not('[data-skip-responsive]').each(function() {
var $this = $(this),
$body = $('body'),
ul = $this.children(),
tabs = ul.children().not('.skip-responsive'),
tabs = ul.children().not('[data-skip-responsive]'),
links = tabs.children('a'),
toggle = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><ul class="responsive-tabs" style="display:none;" /></li>').find('li.responsive-tab'),
toggleLink = toggle.find('a.responsive-tab-link'),
menu = toggle.find('ul.responsive-tabs'),
item = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</span></a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').find('li.responsive-tab'),
menu = item.find('.dropdown-contents'),
maxHeight = 0,
lastWidth = false,
responsive = false;
links.each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
var link = $(this);
maxHeight = Math.max(maxHeight, Math.max(link.outerHeight(true), link.parent().outerHeight(true)));
})
function check() {
@ -763,18 +972,21 @@ function insert_single_user(formId, user)
}
tabs.show();
toggle.hide();
item.hide();
lastWidth = width;
height = $this.height();
if (height <= maxHeight) {
responsive = false;
if (item.hasClass('dropdown-visible')) {
toggle_dropdown.call(item.find('a.responsive-tab-link').get(0));
}
return;
}
responsive = true;
toggle.show();
menu.hide().html('');
item.show();
menu.html('');
var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'),
total = availableTabs.length,
@ -792,42 +1004,46 @@ function insert_single_user(formId, user)
menu.find('a').click(function() { check(true); });
}
toggleLink.click(function() {
if (!responsive) return;
menu.toggle();
});
register_dropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab'});
check(true);
$(window).resize(check);
});
// Hide responsive menu and tabs
$('#phpbb').click(function(e) {
var parents = $(e.target).parents();
if (!parents.is('.responsive-menu.visible')) {
$('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide();
}
if (!parents.is('.responsive-tab')) {
$('.responsive-tabs').hide();
}
});
// Hide *CP navigation if there is only 1 item
$('#navigation').each(function() {
/**
* Hide UCP/MCP navigation if there is only 1 item
*/
container.find('#navigation').each(function() {
var items = $(this).children('ol, ul').children('li');
if (items.length == 1)
{
$(this).addClass('responsive-hide');
}
});
}
// Hide empty responsive tables
$('table.responsive > tbody').each(function() {
var items = $(this).children('tr');
if (items.length == 0)
{
$(this).parent('table:first').addClass('responsive-hide');
/**
* Run onload functions
*/
(function($) {
$(document).ready(function() {
// Swap .nojs and .hasjs
$('#phpbb.nojs').toggleClass('nojs hasjs');
// Focus forms
$('form[data-focus]:first').each(function() {
$('#' + this.getAttribute('data-focus')).focus();
});
// Hide active dropdowns when click event happens outside
$('#phpbb').click(function(e) {
var parents = $(e.target).parents();
if (!parents.is('.dropdown-container.dropdown-visible')) {
$('.dropdown-container.dropdown-visible .dropdown-toggle').each(toggle_dropdown);
}
});
parse_document($('body'));
});
})(jQuery);

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

8
phpBB/styles/prosilver/template/index_body.html
View file

@ -1,7 +1,7 @@
<!-- INCLUDE overall_header.html -->
<p class="{S_CONTENT_FLOW_END} responsive-center<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
<!-- IF U_MCP --><p class="responsive-center">{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->
<!-- IF U_MCP --><p class="responsive-center">{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p class="responsive-center">{CURRENT_TIME}</p><!-- ENDIF -->
<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<ul class="linklist bulletin">
@ -25,10 +25,10 @@
<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
<fieldset class="quick-login">
<label for="username">{L_USERNAME}{L_COLON}</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
<label for="password">{L_PASSWORD}{L_COLON}</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
<label for="username"><span>{L_USERNAME}{L_COLON}</span> <input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" /></label>
<label for="password"><span>{L_PASSWORD}{L_COLON}</span> <input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" /></label>
<!-- IF S_AUTOLOGIN_ENABLED -->
| <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
<span class="responsive-hide">|</span> <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
<!-- ENDIF -->
<input type="submit" name="login" value="{L_LOGIN}" class="button2" />
{S_LOGIN_REDIRECT}

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

10
phpBB/styles/prosilver/template/overall_footer.html
View file

@ -5,7 +5,7 @@
<div class="navbar">
<div class="inner">
<ul class="linklist leftside bulletin">
<ul class="linklist bulletin">
<li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><span class="crumb"><a href="{U_SITE_HOME}">{L_SITE_HOME}</a> <strong>&#8249;</strong></span> <!-- ENDIF --><span class="crumb"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></span>
<!-- EVENT overall_footer_breadcrumb_append -->
</li>
@ -15,11 +15,9 @@
<!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}" data-ajax="alt_text" data-alt-text="{S_BOOKMARK_TOGGLE}">{S_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}" data-ajax="true">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
<!-- ENDIF -->
</ul>
<ul class="linklist rightside bulletin">
<!-- IF U_TEAM --><li><a href="{U_TEAM}">{L_THE_TEAM}</a><!-- ENDIF -->
<!-- IF not S_IS_BOT --><li><a href="{U_DELETE_COOKIES}" data-ajax="true" data-refresh="true">{L_DELETE_COOKIES}</a></li><!-- ENDIF -->
<li>{S_TIMEZONE}</li>
<li class="rightside">{S_TIMEZONE}</li>
<!-- IF not S_IS_BOT --><li class="rightside"><a href="{U_DELETE_COOKIES}" data-ajax="true" data-refresh="true">{L_DELETE_COOKIES}</a></li><!-- ENDIF -->
<!-- IF U_TEAM --><li class="rightside"><a href="{U_TEAM}">{L_THE_TEAM}</a><!-- ENDIF -->
</ul>
</div>

22
phpBB/styles/prosilver/template/overall_header.html
View file

@ -29,7 +29,7 @@
<!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />
@ -97,13 +97,14 @@
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH --><li class="responsive-search rightside" style="display: none;"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li><!-- ENDIF -->
</ul>
<ul class="linklist bulletin">
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside bulletin">
<!-- IF S_NOTIFICATIONS_DISPLAY -->
<li class="icon-notification skip-responsive">
<li class="icon-notification" data-skip-responsive="true">
<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button"><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></a>
<div id="notification_list" class="notification_list">
<div class="pointer"><div class="pointer_inner"></div></div>
<div id="notification_list" class="dropdown notification_list">
<div class="pointer"><div class="pointer-inner"></div></div>
<div class="dropdown-contents">
<div class="header">
{L_NOTIFICATIONS}
<span class="header_settings"><a href="{U_NOTIFICATION_SETTINGS}">{L_SETTINGS}</a></span>
@ -136,6 +137,7 @@
<a href="{U_VIEW_ALL_NOTIFICATIONS}"><span>{L_SEE_ALL}</span></a>
</div>
</div>
</div>
</li>
<!-- ENDIF -->
<!-- IF S_DISPLAY_PM -->
@ -152,17 +154,15 @@
<!-- IF U_RESTORE_PERMISSIONS -->
<li class="icon-restore-permissions"><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
<!-- ENDIF -->
</ul>
<!-- ENDIF -->
<ul class="linklist rightside<!-- IF S_IS_BOT or not S_USER_LOGGED_IN --> fullwidth<!-- ENDIF -->">
<!-- EVENT overall_header_navigation_prepend -->
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
<li class="icon-logout rightside no-bulletin"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register rightside no-bulletin"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members rightside no-bulletin"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- ENDIF -->
<li class="icon-faq rightside no-bulletin"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- EVENT overall_header_navigation_append -->
</ul>

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

@ -12,7 +12,7 @@
<!-- IF S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open+Sans:600&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" /><!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="{T_THEME_PATH}/responsive.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only screen and (max-device-width: 700px)" />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" />

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>

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

@ -193,7 +193,7 @@
<!-- ENDIF -->
<!-- ENDIF -->
<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF -->{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; {postrow.POST_DATE} </p>
<p class="author"><!-- IF S_IS_BOT -->{postrow.MINI_POST_IMG}<!-- ELSE --><a href="{postrow.U_MINI_POST}">{postrow.MINI_POST_IMG}</a><!-- ENDIF --><span class="responsive-hide">{L_POST_BY_AUTHOR} <strong>{postrow.POST_AUTHOR_FULL}</strong> &raquo; </span>{postrow.POST_DATE} </p>
<!-- IF postrow.S_POST_UNAPPROVED -->
<form method="post" class="mcp_approve" action="{postrow.U_APPROVE_ACTION}">

16
phpBB/styles/prosilver/theme/buttons.css
View file

@ -103,6 +103,12 @@ ul.linklist.bulletin li.icon-bookmark:before, ul.linklist.bulletin li.icon-bump:
display: none;
}
.icon-home > span:first-child > a, .icon-notification > a, .icon-pm > a {
display: inline-block;
margin-left: -17px;
padding-left: 17px;
}
/* Poster profile icons
----------------------------------------*/
ul.profile-icons {
@ -170,10 +176,16 @@ ul.profile-icons.responsive a.responsive-menu-link:before {
border-top: 0.375em double transparent;
}
.postbody ul.profile-icons.responsive .responsive-popup {
.postbody ul.profile-icons.responsive .popup-pointer {
left: auto;
right: 7px;
top: 19px;
top: 20px;
}
.postbody ul.profile-icons.responsive .responsive-popup {
left: auto;
right: -4px;
top: 30px;
}
.postbody ul.profile-icons.responsive .responsive-popup li, .postbody ul.profile-icons.responsive .responsive-popup li a {

45
phpBB/styles/prosilver/theme/colours.css
View file

@ -844,7 +844,7 @@ ul.cplist {
background-color: #F9F9F9;
}
#minitabs li.activetab a, #minitabs li.activetab a:hover {
#minitabs li.activetab a span, #minitabs li.activetab a:hover span {
color: #333333;
}
@ -889,6 +889,13 @@ ul.cplist {
color: #D31141;
}
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
#navigation a, .rtl #navigation a {
background-image: none;
}
}
/* Preferences pane layout
----------------------------------------*/
#cp-main h2 {
@ -1097,11 +1104,6 @@ input.disabled {
background-color: #000000;
}
#notification_list {
background-color: #FFFFFF;
border-color: #B9B9B9;
}
#notification_list ul li {
border-bottom-color: #B9B9B9;
}
@ -1111,12 +1113,12 @@ input.disabled {
color: #000000;
}
#notification_list > .header, .notification_list > .footer {
#notification_list .header, .notification_list .footer {
border-color: #B9B9B9;
color: #000000;
}
#notification_list > .header {
#notification_list .header {
background: #F1F8FF;
background: -moz-linear-gradient(top, #F1F8FF 0%, #CADCEB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F1F8FF), color-stop(100%, #CADCEB));
@ -1126,33 +1128,36 @@ input.disabled {
background: linear-gradient(to bottom, #F1F8FF 0%, #CADCEB 100%);
}
.notification_list .pointer {
border-bottom-color: #B9B9B9;
.dropdown .pointer {
border-color: #B9B9B9 transparent;
}
.notification_list .pointer_inner {
border-bottom-color: #F1F8FF;
.dropdown .pointer-inner {
border-color: #FFF transparent;
}
#notification_list .pointer-inner, #minitabs .pointer-inner {
border-color: #F1F8FF transparent;
}
ul.linklist li.responsive-menu a.responsive-menu-link:before {
border-color: #105289;
}
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before {
ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist li.responsive-menu.visible a.responsive-menu-link:before {
border-color: #D31141;
}
ul.responsive-popup {
.dropdown .dropdown-contents {
background: #fff;
border-color: #b9b9b9;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}
.navbar ul.responsive-popup {
background-color: #CADCEB;
.dropdown-up .dropdown-contents {
box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
}
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
background: #ddedfb;
border-color: #c0c9d5;
box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4);
#minitabs .dropdown-contents {
background-color: #F1F8FF;
}

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

@ -361,12 +361,14 @@ ul.rightside {
text-align: right;
}
ul.linklist.responsive {
ul.linklist li.responsive-menu {
position: relative;
margin: 0 5px;
}
ul.linklist li.responsive-menu a.responsive-menu-link {
display: inline-block;
margin: 0 5px;
font-size: 16px;
position: relative;
width: 16px;
@ -393,6 +395,24 @@ ul.linklist li.responsive-menu a.responsive-menu-link:before {
max-width: none;
}
li.responsive-menu.dropdown-right .dropdown {
left: -9px;
}
li.responsive-menu.dropdown-left .dropdown {
right: -6px;
}
li.responsive-menu .dropdown .dropdown-contents {
padding: 0 5px;
}
ul.linklist .dropdown li {
clear: both;
}
/* Bulletin icons for list items
----------------------------------------*/
ul.linklist.bulletin li:before {
@ -415,57 +435,123 @@ ul.linklist.bulletin li.no-bulletin:before {
display: none !important;
}
/* Responsive popup
/* Dropdown menu
----------------------------------------*/
ul.responsive-popup {
.dropdown {
position: absolute;
left: 0;
top: 24px;
top: 22px;
z-index: 2;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
padding: 9px 0 0;
}
ul.responsive-popup.responsive-rightside {
.dropdown-up .dropdown {
top: auto;
bottom: 18px;
padding: 0 0 9px;
}
.dropdown-left .dropdown {
left: auto;
right: 0;
}
ul.responsive-popup li {
.dropdown .pointer, .dropdown .pointer-inner {
position: absolute;
width: 0;
height: 0;
border-top-width: 0;
border-bottom: 10px solid transparent;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
display: block;
}
.dropdown-up .pointer, .dropdown-up .pointer-inner {
border-bottom-width: 0;
border-top: 10px solid transparent;
}
.dropdown .pointer {
right: auto;
left: 10px;
top: 0;
z-index: 3;
}
.dropdown-up .pointer {
bottom: 0;
top: auto;
}
.dropdown-left .dropdown .pointer {
left: auto;
right: 10px;
}
.dropdown .pointer-inner {
top: auto;
bottom: -11px;
left: -10px;
}
.dropdown-up .pointer-inner {
bottom: auto;
top: -11px;
}
.dropdown .dropdown-contents {
z-index: 2;
overflow: hidden;
border: 1px solid transparent;
border-radius: 5px;
padding: 5px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown li {
float: none;
margin: 0;
white-space: nowrap;
text-align: left;
}
.wrap ul.responsive-popup li {
.wrap .dropdown li, .dropdown.wrap li {
white-space: normal;
}
ul.responsive-popup li:before, ul.responsive-popup li:after {
.dropdown li:before, .dropdown li:after {
display: none !important;
}
/* Responsive breadcrumbs
----------------------------------------*/
.breadcrumbs .crumb {
.breadcrumbs .crumb a {
display: inline-block;
vertical-align: bottom;
}
.breadcrumbs.wrapped .crumb {
letter-spacing: -.5px;
}
.breadcrumbs.wrapped .crumb a { letter-spacing: -.3px; }
.breadcrumbs.wrapped .crumb.wrapped-medium a { letter-spacing: -.4px; }
.breadcrumbs.wrapped .crumb.wrapped-tiny a { letter-spacing: -.5px; }
.breadcrumbs .crumb.wrapped {
.breadcrumbs .crumb.wrapped a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.breadcrumbs .crumb.wrapped-wide { max-width: 120px; }
.breadcrumbs .crumb.wrapped-medium { max-width: 80px; }
.breadcrumbs .crumb.wrapped-small { max-width: 30px; }
.breadcrumbs .crumb.wrapped-max a { max-width: 120px; }
.breadcrumbs .crumb.wrapped-wide a { max-width: 100px; }
.breadcrumbs .crumb.wrapped-medium a { max-width: 80px; }
.breadcrumbs .crumb.wrapped-small a { max-width: 60px; }
.breadcrumbs .crumb.wrapped-tiny a { max-width: 40px; }
/* Table styles
----------------------------------------*/
@ -643,7 +729,7 @@ li.pagination ul {
line-height: normal;
}
.pagination li a, .pagnation li span, li .pagination li a, li .pagnation li span, .pagination li.active span, .pagination li.ellipsis span {
.pagination li a, .pagnation li span, li .pagination li a, li .pagination li span, .pagination li.active span, .pagination li.ellipsis span {
font-weight: normal;
text-decoration: none;
padding: 0 2px;
@ -670,13 +756,22 @@ li.pagination ul {
position: fixed;
display: none;
top: 150px;
left: 25%;
width: 50%;
left: 0;
right: 0;
max-width: 640px;
margin: 0 auto;
z-index: 50;
padding: 25px;
padding: 0 25px 20px 25px;
}
@media only screen and (max-height: 500px), only screen and (max-device-width: 500px)
{
.phpbb_alert {
top: 25px;
}
}
.phpbb_alert .alert_close {
display: block;
float: right;
@ -823,10 +918,7 @@ form > p.post-notice strong {
left: 0;
width: 330px;
z-index: 1;
border: 1px solid;
box-shadow: 3px 3px 5px darkgray;
border-radius: 5px;
top: 32px;
top: 22px;
}
#notification_list ul {
@ -850,7 +942,11 @@ form > p.post-notice strong {
display: none;
}
#notification_list > .header {
#notification_list .dropdown-contents {
padding: 0;
}
#notification_list .header {
padding: 0 10px;
font-family: Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
@ -862,18 +958,18 @@ form > p.post-notice strong {
border-radius: 5px 5px 0 0;
}
#notification_list > .header > .header_settings {
#notification_list .header .header_settings {
float: right;
font-weight: normal;
text-transform: none;
}
#notification_list > .footer {
#notification_list .footer {
text-align: center;
font-size: 1.2em;
}
#notification_list ul li a, .notification_list dt > a, #notification_list > .footer > a {
#notification_list ul li a, .notification_list dt > a, #notification_list .footer > a {
display: block;
text-decoration: none;
}
@ -890,30 +986,6 @@ form > p.post-notice strong {
margin: 0;
}
.notification_list .pointer, .notification_list .pointer_inner {
position: absolute;
width: 0;
height: 0;
border-top-width: 0;
border-bottom: 10px solid;
border-left: 10px dashed transparent;
border-right: 10px dashed transparent;
-webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */
display: block;
}
.notification_list .pointer {
right: auto;
left: 10px;
top: -11px;
}
.notification_list .pointer_inner {
top: auto;
bottom: -11px;
left: -10px;
}
.notification_list div.notifications {
padding: 5px;
}

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

@ -516,6 +516,7 @@ blockquote .codebox {
padding: 6px;
border: 1px dashed transparent;
clear: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@ -711,6 +712,11 @@ fieldset.polls dd div {
margin-bottom: 3px;
}
.postprofile .avatar img {
max-width: 90%;
height: auto !important;
}
.online {
background-image: none;
background-position: 100% 0;

89
phpBB/styles/prosilver/theme/cp.css
View file

@ -105,6 +105,7 @@ ul.cplist {
.tabs-container #minitabs {
float: right;
margin-top: 19px;
max-width: 50%;
}
.tabs-container:after {
@ -218,6 +219,10 @@ ul.cplist {
/* Responsive tabs
----------------------------------------*/
.responsive-tab {
position: relative;
}
.responsive-tab .responsive-tab-link span {
display: inline-block;
font-size: 16px;
@ -251,29 +256,39 @@ ul.cplist {
position: relative;
}
#tabs ul.responsive-tabs, #minitabs ul.responsive-tabs {
position: absolute;
right: 0;
top: 26px;
z-index: 2;
border: 1px solid transparent;
border-radius: 5px;
#tabs .dropdown, #minitabs .dropdown {
top: 29px;
margin-right: -1px;
}
#minitabs ul.responsive-tabs {
top: 23px;
#minitabs .dropdown {
top: 18px;
}
.tabs-container #minitabs ul.responsive-tabs {
right: auto;
left: 0;
#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
bottom: -5px;
top: auto;
}
#tabs .responsive-tabs li, #minitabs .responsive-tabs li {
#minitabs .dropdown-up .dropdown {
bottom: 18px;
}
#tabs .dropdown-right .dropdown, #minitabs .dropdown-right .dropdown {
margin-left: -41px;
}
#tabs .dropdown li, #minitabs .dropdown li {
display: block !important;
background: transparent none;
padding: 0;
}
#tabs .responsive-tabs a, #tabs .responsive-tabs a span, #minitabs .responsive-tabs a, #minitabs .responsive-tabs a span {
.tabs-container #minitabs .dropdown a span {
display: block;
}
#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
background: transparent;
float: none;
margin: 0;
@ -281,14 +296,16 @@ ul.cplist {
text-align: right;
}
.tabs-container #minitabs .responsive-tabs a span {
.tabs-container #minitabs .dropdown a span {
text-align: left;
}
#tabs .responsive-tabs a span, #minitabs .responsive-tabs a span {
padding: 5px;
#tabs .dropdown a span, #minitabs .dropdown a span {
padding: 5px 8px;
color: inherit !important;
}
/* UCP navigation menu
----------------------------------------*/
/* Container for sub-navigation list */
@ -417,3 +434,41 @@ ol.def-rules li {
border: 1px solid transparent;
text-align: center;
}
/* Responsive *CP navigation
----------------------------------------*/
@media only screen and (max-width: 900px), only screen and (max-device-width: 900px)
{
.nojs #tabs a span, .nojs #minitabs a span {
max-width: 40px;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.5px;
}
#cp-menu, #navigation, #cp-main {
float: none;
width: auto;
margin: 0;
}
#navigation {
padding: 0;
margin: 0 auto;
max-width: 320px;
}
#navigation a {
background-image: none;
}
#navigation li:first-child a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#navigation li:last-child a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
}

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

@ -206,7 +206,11 @@ fieldset.forum-selection2 {
fieldset.jumpbox {
text-align: right;
margin-top: 15px;
height: 2.5em;
min-height: 2.5em;
}
fieldset.jumpbox select {
max-width: 50%;
}
fieldset.quickmod {

BIN
phpBB/styles/prosilver/theme/images/icon_post_menu.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

120
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,19 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
}
}
li.row .responsive-show strong {
font-weight: bold;
color: inherit;
}
ul.topiclist li.row dt a.subforum {
display: inline-block;
vertical-align: bottom;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
}
/* Notifications list
----------------------------------------*/
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px)
@ -211,39 +201,10 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
margin: 5px 0;
}
/* *CP navigation
----------------------------------------*/
.nojs #tabs a span, .nojs #minitabs a span {
max-width: 40px;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.5px;
}
#cp-menu, #navigation, #cp-main {
float: none;
width: auto;
margin: 0;
}
#navigation {
padding: 0;
margin: 0 auto;
max-width: 320px;
}
#navigation a {
background-image: none;
}
#navigation li:first-child a {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#navigation li:last-child a {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
.pagination li a, .pagination li span {
min-width: 10px;
display: inline-block;
text-align: center;
}
/* Responsive tables
@ -262,6 +223,10 @@ table.responsive.show-header thead, table.responsive.show-header th:first-child
text-align: left !important;
}
table.responsive.show-header th:first-child span.rank-img {
display: none;
}
table.responsive tr {
margin: 2px 0;
}
@ -355,6 +320,30 @@ dl.pmlist dd:first-of-type {
display: inline-block !important;
}
fieldset.quick-login label {
display: block;
margin-bottom: 5px;
white-space: normal;
}
fieldset.quick-login label > span {
display: inline-block;
min-width: 100px;
}
fieldset.quick-login input.inputbox {
width: 85%;
max-width: 300px;
margin-left: 20px;
}
fieldset.quick-login label[for="autologin"] {
display: inline-block;
text-align: right;
min-width: 50%;
}
/* User profile
----------------------------------------*/
.column1, .column2, .left-box.profile-details {
@ -438,6 +427,14 @@ fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent {
max-height: 32px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.5dppx)
{
/* Scale online image for HD displays */
.online {
background-size: 40px;
}
}
/* Misc stuff
----------------------------------------*/
h2 {
@ -468,6 +465,12 @@ fieldset.quickmod {
text-align: center;
}
fieldset.display-options label {
display: block;
clear: both;
margin-bottom: 5px;
}
dl.mini dd.pm-legend {
float: left;
min-width: 200px;
@ -482,6 +485,11 @@ fieldset.display-actions {
white-space: normal;
}
.phpbb_alert {
max-width: none;
margin: 0 25px;
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
{
p.responsive-center {