diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-17 21:07:41 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-17 21:07:41 +0300 |
| commit | 744a91dc7b7e020bf6eb8bb439756fd075c35dc9 (patch) | |
| tree | 52171b1dcf2c181722047d041b8b8b5b27c166ac | |
| parent | a189c38853ede323a0dc7ef170c788a7f687326c (diff) | |
| download | forums-744a91dc7b7e020bf6eb8bb439756fd075c35dc9.tar forums-744a91dc7b7e020bf6eb8bb439756fd075c35dc9.tar.gz forums-744a91dc7b7e020bf6eb8bb439756fd075c35dc9.tar.bz2 forums-744a91dc7b7e020bf6eb8bb439756fd075c35dc9.tar.xz forums-744a91dc7b7e020bf6eb8bb439756fd075c35dc9.zip | |
[ticket/11552] Responsive breadcrumbs
PHPBB3-11552
| -rw-r--r-- | phpBB/styles/prosilver/template/forum_fn.js | 51 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/overall_header.html | 2 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 17 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/responsive.css | 1 |
4 files changed, 68 insertions, 3 deletions
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index c36b4f5f01..cfb95d9cba 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -441,5 +441,56 @@ function insert_single_user(formId, user) // Fix .linkslist.bulletin lists $('ul.linklist.bulletin li:first-child, ul.linklist.bulletin li.rightside:last-child').addClass('no-bulletin'); } + + // Responsive breadcrumbs + $('.breadcrumbs').each(function() { + var $this = $(this), + $body = $('body'), + links = $this.find('a'), + length = links.length, + classes = ['wrapped-wide', 'wrapped-medium', 'wrapped-small'], + classesLength = classes.length, + maxHeight = 0, + lastWidth = false, + wrapped = false; + + // Test height by setting nowrap + $this.css('white-space', 'nowrap'); + maxHeight = $this.height() + 1; + $this.css('white-space', ''); + + // Funciton that checks breadcrumbs + function check() { + var height = $this.height(), + width = $body.width(), + link, i, j; + + if (height <= maxHeight) { + if (!wrapped || lastWidth === false || lastWidth >= width) { + lastWidth = width; + return; + } + } + lastWidth = width; + + if (wrapped) { + $this.find('a.wrapped').removeClass('wrapped ' + classes.join(' ')); + wrapped = false; + if ($this.height() <= maxHeight) return; + } + + wrapped = true; + for (i = 0; i < classesLength; i ++) { + for (j = length; j >= 0; j --) { + links.eq(j).addClass('wrapped ' + classes[i]); + if ($this.height() <= maxHeight) return; + } + } + } + + // Run function and set event + check(); + $(window).resize(check); + }); }); })(jQuery); diff --git a/phpBB/styles/prosilver/template/overall_header.html b/phpBB/styles/prosilver/template/overall_header.html index ce1317ab11..7bf60ce67c 100644 --- a/phpBB/styles/prosilver/template/overall_header.html +++ b/phpBB/styles/prosilver/template/overall_header.html @@ -84,7 +84,7 @@ <ul class="linklist navlinks"> <!-- DEFINE $MICRODATA = ' itemtype="http://data-vocabulary.org/Breadcrumb" itemscope=""' --> - <li class="icon-home"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>‹</strong> <!-- ENDIF --> + <li class="icon-home breadcrumbs"><!-- IF U_SITE_HOME --><a href="{U_SITE_HOME}"{$MICRODATA}>{L_SITE_HOME}</a> <strong>‹</strong> <!-- ENDIF --> <a href="{U_INDEX}" accesskey="h"{$MICRODATA}>{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}"{$MICRODATA}>{navlinks.FORUM_NAME}</a><!-- END navlinks --> <!-- EVENT overall_header_breadcrumb_append --> diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 4dbcc6f455..6142fe39a7 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -378,6 +378,22 @@ ul.linklist.bulletin li.no-bulletin:before { display: none; } +/* Responsive breadcrumbs +----------------------------------------*/ +.breadcrumbs a { + display: inline-block; +} + +.breadcrumbs a.wrapped { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; +} +.breadcrumbs a.wrapped-wide { max-width: 120px; } +.breadcrumbs a.wrapped-medium { max-width: 80px; } +.breadcrumbs a.wrapped-small { max-width: 30px; } + /* Table styles ----------------------------------------*/ table.table1 { @@ -835,4 +851,3 @@ form > p.post-notice strong { .notification_list p.notifications_time { font-size: 11px; } - diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index f2b2209091..6323abe88c 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -46,4 +46,3 @@ body { #site-description p, #search-box { display: none; } - |