diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js index 29e02af034..ec5e7cc946 100644 --- a/phpBB/styles/prosilver/template/forum_fn.js +++ b/phpBB/styles/prosilver/template/forum_fn.js @@ -516,7 +516,7 @@ function insert_single_user(formId, user) } for (i = 0; i < classesLength; i ++) { - for (j = length; j >= 0; j --) { + for (j = length; j > 0; j --) { links.eq(j).addClass('wrapped ' + classes[i]); if ($this.height() <= maxHeight) { return; @@ -547,7 +547,8 @@ function insert_single_user(formId, user) } var toggle = $this.children('.responsive-menu'), - menu = toggle.find('.responsive-popup'), + toggleLink = toggle.find('a.responsive-menu-link'), + menu = toggle.find('ul.responsive-popup'), lastWidth = false, responsive = false, copied = false; @@ -591,7 +592,7 @@ function insert_single_user(formId, user) $this.addClass('responsive'); } - toggle.click(function() { + toggleLink.click(function() { if (!responsive) return; if (!toggle.hasClass('visible')) { // Hide other popups @@ -610,5 +611,68 @@ function insert_single_user(formId, user) $('.responsive-menu.visible').removeClass('visible').find('.responsive-popup').hide(); } }); + + // Responsive tabs + $('#tabs').not('.skip-responsive').each(function() { + var $this = $(this), + $body = $('body'), + ul = $this.children(), + tabs = ul.children().not('.skip-responsive'), + links = tabs.children('a'), + toggle = ul.append('
').find('li.responsive-tab'), + toggleLink = toggle.find('a.responsive-tab-link'), + menu = toggle.find('ul.responsive-tabs'), + maxHeight = 0, + lastWidth = false, + responsive = false; + + links.each(function() { + maxHeight = Math.max(maxHeight, $(this).outerHeight(true)); + }) + + function check() { + var width = $body.width(), + height = $this.height(); + + if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) { + return; + } + + tabs.show(); + toggle.hide(); + + lastWidth = width; + height = $this.height(); + if (height <= maxHeight) { + responsive = false; + return; + } + + responsive = true; + toggle.show(); + menu.hide().html(''); + + var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'), + total = availableTabs.length, + i, tab; + + for (i = total; i > 0; i --) { + tab = availableTabs.eq(i); + menu.prepend(tab.clone(true)); + tab.hide(); + if ($this.height() <= maxHeight) { + return; + } + } + } + + toggleLink.click(function() { + if (!responsive) return; + menu.toggle(); + }); + + check(true); + $(window).resize(check); + }); }); })(jQuery); diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index cf701dd816..a2a4abbec3 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -857,6 +857,16 @@ ul.cplist { color: #333333; } +/* Responsive tabs +----------------------------------------*/ +.responsive-tab .responsive-tab-link span:before { + border-color: #536482; +} + +.responsive-tab .responsive-tab-link:hover span:before { + border-color: #BC2A4D; +} + /* UCP navigation menu ----------------------------------------*/ @@ -1143,3 +1153,9 @@ ul.responsive-popup { .navbar ul.responsive-popup { background-color: #CADCEB; } + +#tabs ul.responsive-tabs { + background: #CADCEB; + border-color: #c0c9d5; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4); +} diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 7886828fd5..3f53b2a61f 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -600,7 +600,7 @@ dl.details dd { text-overflow: ellipsis; } -.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls { +.clearfix, #minitabs, fieldset dl, ul.topiclist dl, dl.polls { height: 1%; overflow: hidden; } diff --git a/phpBB/styles/prosilver/theme/cp.css b/phpBB/styles/prosilver/theme/cp.css index e32ff8fcb8..5df4a4576c 100644 --- a/phpBB/styles/prosilver/theme/cp.css +++ b/phpBB/styles/prosilver/theme/cp.css @@ -118,7 +118,7 @@ ul.cplist { #tabs { line-height: normal; margin: 20px 0 -1px 7px; - min-width: 570px; + *overflow: hidden; } #tabs ul { @@ -127,6 +127,12 @@ ul.cplist { list-style: none; } +#tabs ul:after { + content: ''; + display: block; + clear: both; +} + #tabs li { display: inline; margin: 0; @@ -210,6 +216,57 @@ ul.cplist { text-decoration: none; } +/* Responsive tabs +----------------------------------------*/ +.responsive-tab .responsive-tab-link span { + display: inline-block; + font-size: 16px; + position: relative; + width: 16px; + line-height: 14px; + text-decoration: none; +} + +.responsive-tab .responsive-tab-link span:before { + content: ''; + position: absolute; + left: 5px; + top: 8px; + height: .125em; + width: 14px; + border-bottom: 0.125em solid transparent; + border-top: 0.375em double transparent; +} + +#tabs ul { + position: relative; +} + +#tabs ul.responsive-tabs { + position: absolute; + right: 0; + top: 26px; + z-index: 2; + border: 1px solid transparent; + border-radius: 5px; +} + +#tabs .responsive-tabs li { + display: block !important; +} + +#tabs .responsive-tabs a, #tabs .responsive-tabs a span { + background: transparent; + float: none; + margin: 0; + padding: 0; + text-align: right; +} + +#tabs .responsive-tabs a span { + padding: 5px; +} + /* UCP navigation menu ----------------------------------------*/ /* Container for sub-navigation list */ diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css index a6e67ffcdf..c62cd7a0b2 100644 --- a/phpBB/styles/prosilver/theme/responsive.css +++ b/phpBB/styles/prosilver/theme/responsive.css @@ -169,4 +169,4 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn { ----------------------------------------*/ .pagination { margin: 5px 0; -} \ No newline at end of file +}