mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-28 14:18:52 +00:00
[ticket/11956] Better responsive breadcrumbs
PHPBB3-11956
This commit is contained in:
parent
85b9867edb
commit
5e67c41629
2 changed files with 20 additions and 18 deletions
|
@ -471,12 +471,12 @@ function parse_document(container)
|
|||
/**
|
||||
* 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),
|
||||
$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,
|
||||
|
@ -726,11 +726,11 @@ function parse_document(container)
|
|||
container.find('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
|
||||
var $this = $(this),
|
||||
$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"> </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);
|
||||
filterLastList = links.filter(filterLast);
|
||||
|
||||
if (links.is('.rightside'))
|
||||
{
|
||||
|
@ -824,17 +824,17 @@ function parse_document(container)
|
|||
$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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -449,23 +449,25 @@ ul.responsive-popup li:before, ul.responsive-popup li:after {
|
|||
|
||||
/* 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
|
||||
----------------------------------------*/
|
||||
|
|
Loading…
Add table
Reference in a new issue