diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-22 11:16:25 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-24 18:36:16 +0300 |
| commit | 5e67c41629c2234820b9355b06a9846d7698e313 (patch) | |
| tree | 4c6b3fa1273cc6043cf54fcfc7b4c05551ae8537 /phpBB/styles | |
| parent | 85b9867edb3bc387fb5a58ee42fcf0f43f1d5ef0 (diff) | |
| download | forums-5e67c41629c2234820b9355b06a9846d7698e313.tar forums-5e67c41629c2234820b9355b06a9846d7698e313.tar.gz forums-5e67c41629c2234820b9355b06a9846d7698e313.tar.bz2 forums-5e67c41629c2234820b9355b06a9846d7698e313.tar.xz forums-5e67c41629c2234820b9355b06a9846d7698e313.zip | |
[ticket/11956] Better responsive breadcrumbs
PHPBB3-11956
Diffstat (limited to 'phpBB/styles')
| -rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 20 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 18 |
2 files changed, 20 insertions, 18 deletions
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index cb8ee2f9df..8cd4880914 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -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; } } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 19077bbc86..fc0fff8fea 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -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 ----------------------------------------*/ |