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

[ticket/11956] Better responsive breadcrumbs

Browse source 
PHPBB3-11956
This commit is contained in:
Vjacheslav Trushkin 2013-10-22 11:16:25 +03:00
parent 85b9867edb
commit 5e67c41629
2 changed files with 20 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -471,12 +471,12 @@ function parse_document(container)
/** /**
* Makes breadcrumbs responsive * Makes breadcrumbs responsive
*/ */
container.find('.breadcrumbs:not(.skip-responsive, .linklist.leftside .breadcrumbs)').each(function() { container.find('.breadcrumbs:not(.skip-responsive)').each(function() {
var $this = $(this), var $this = $(this),
$body = $('body'), $body = $('body'),
links = $this.find('.crumb'), links = $this.find('.crumb'),
length = links.length, length = links.length,
classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'], classes = ['wrapped-max', 'wrapped-wide', 'wrapped-medium', 'wrapped-small', 'wrapped-tiny'],
classesLength = classes.length, classesLength = classes.length,
maxHeight = 0, maxHeight = 0,
lastWidth = false, lastWidth = false,
@ -726,11 +726,11 @@ function parse_document(container)
container.find('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() { container.find('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
var $this = $(this), var $this = $(this),
$body = $('body'), $body = $('body'),
links = $this.children().not('.skip-responsive'), filterSkip = '.breadcrumbs, .skip-responsive',
filterLast = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .edit-icon, .quote-icon',
links = $this.children().not(filterSkip),
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>', 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 filterLastList = links.filter(filterLast);
filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
filtered = links.filter(filterString);
if (links.is('.rightside')) if (links.is('.rightside'))
{ {
@ -824,17 +824,17 @@ function parse_document(container)
$this.addClass('responsive'); $this.addClass('responsive');
// Try to not hide filtered items // Try to not hide filtered items
if (filtered.length) { if (filterLastList.length) {
links.not(filterString).css('display', 'none'); links.not(filterLast).css('display', 'none');
maxHeight = 0; maxHeight = 0;
filtered.each(function() { filterLastList.each(function() {
if (!$(this).height()) return; if (!$(this).height()) return;
maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); maxHeight = Math.max(maxHeight, $(this).outerHeight(true));
}); });
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
menu.children().filter(filterString).css('display', 'none'); menu.children().filter(filterLast).css('display', 'none');
return; return;
} }
} }

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

@ -449,23 +449,25 @@ ul.responsive-popup li:before, ul.responsive-popup li:after {
/* Responsive breadcrumbs /* Responsive breadcrumbs
----------------------------------------*/ ----------------------------------------*/
.breadcrumbs .crumb { .breadcrumbs .crumb a {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
} }
.breadcrumbs.wrapped .crumb { .breadcrumbs.wrapped .crumb a { letter-spacing: -.3px; }
letter-spacing: -.5px; .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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.breadcrumbs .crumb.wrapped-wide { max-width: 120px; } .breadcrumbs .crumb.wrapped-max a { max-width: 120px; }
.breadcrumbs .crumb.wrapped-medium { max-width: 80px; } .breadcrumbs .crumb.wrapped-wide a { max-width: 100px; }
.breadcrumbs .crumb.wrapped-small { max-width: 30px; } .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 /* Table styles
----------------------------------------*/ ----------------------------------------*/