diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 64b7e6522e..861fc617c5 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -310,12 +310,10 @@ li { ----------------------------------------*/ #tabs { line-height: normal; - margin: 0 0 -6px 7px; + margin: 0 7px; min-width: 600px; -} - -.rtl #tabs { - margin: 0 7px -6px 0; + position: relative; + z-index: 2; } #tabs ul { @@ -324,14 +322,27 @@ li { list-style: none; } +#tabs ul:after { + content: ''; + display: block; + clear: both; +} + #tabs li { - display: inline; + display: block; + float: left; margin: 0; padding: 0; font-size: 0.85em; font-weight: bold; } +#tabs li:after { + content: ''; + display: block; + clear: both; +} + #tabs a { float: left; background:url("../images/bg_tabs1.gif") no-repeat 0% -34px; @@ -350,6 +361,7 @@ li { display: block; background: url("../images/bg_tabs2.gif") no-repeat 100% -34px; padding: 7px 10px 4px 4px; + min-height: 14px; color: #767676; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; @@ -369,12 +381,12 @@ li { color: #BC2A4D; } -#tabs #activetab a { +#tabs .activetab a { background-position: 0 0; border-bottom: 1px solid #DCDEE2; } -#tabs #activetab a span { +#tabs .activetab a span { background-position: 100% 0; padding-bottom: 5px; color: #23649F; @@ -388,15 +400,91 @@ li { background-position: 100% -69px; } -#tabs #activetab a:hover span { +#tabs .activetab a:hover span { color: #115098; } +.responsive-tab { + position: relative; +} + +.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 #767676; + border-top: 0.375em double #767676; +} + +.responsive-tab .responsive-tab-link:hover span:before { + border-color: #BC2A4D; +} + +.responsive-tab.activetab .responsive-tab-link span:before { + border-color: #23649F; +} + +.responsive-tab.activetab .responsive-tab-link:hover span:before { + border-color: #115098; +} + +#tabs .dropdown { + top: 18px; + margin-right: -1px; +} + +#tabs .dropdown-right .dropdown { + margin-left: -2px; +} + +#tabs .dropdown li { + display: block !important; + float: none; + background: transparent none; + padding: 0; +} + +#tabs .dropdown a, #tabs .dropdown a span { + background: transparent; + display: block; + border-width: 0; + float: none; + margin: 0; + padding: 0; + text-align: right; +} + +#tabs .dropdown a span { + padding: 4px 8px; + color: inherit !important; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #tabs { + min-width: 0; + } +} /* Main Panel ---------------------------------------- */ #acp { - margin: 4px 0; + clear: both; + position: relative; + top: -2px; + margin: 0 0 2px; padding: 3px 1px; min-width: 550px; background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; @@ -436,7 +524,7 @@ li { padding: 0; border-right: 1px solid #CCCFD3; position: relative; - z-index: 2; + z-index: 1; } .rtl #menu { @@ -1300,18 +1388,18 @@ input:focus, textarea:focus { padding-right: 20px; } - dd select, dd input { + select, dd select, dd input { max-width: 300px; } - dd input[type="number"] { + input[type="number"], dd input[type="number"] { max-width: 70px; } } @media only screen and (max-width: 400px), only screen and (max-device-width: 400px) { - dd select, dd input { + select, dd select, dd input { max-width: 240px; } } @@ -1714,7 +1802,7 @@ li.pagination ul { visibility: hidden; }*/ -.clearfix, #tabs, .row, #content, fieldset dl, #page-body { +.clearfix, .row, #content, fieldset dl, #page-body { height: 1%; overflow: hidden; } @@ -2086,6 +2174,116 @@ fieldset.permissions .padding { padding: 0; } +/* Dropdown menu +----------------------------------------*/ +.dropdown { + position: absolute; + left: 0; + top: 22px; + z-index: 2; + border: 1px solid transparent; + border-radius: 5px; + padding: 9px 0 0; +} + +.dropdown-up .dropdown { + top: auto; + bottom: 18px; + padding: 0 0 9px; +} + +.dropdown-left .dropdown { + left: auto; + right: 0; +} + +.dropdown .pointer, .dropdown .pointer-inner { + position: absolute; + width: 0; + height: 0; + border-top-width: 0; + border-bottom: 10px solid transparent; + border-left: 10px dashed transparent; + border-right: 10px dashed transparent; + -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + display: block; +} + +.dropdown-up .pointer, .dropdown-up .pointer-inner { + border-bottom-width: 0; + border-top: 10px solid transparent; +} + +.dropdown .pointer { + right: auto; + left: 10px; + top: 0; + z-index: 3; +} + +.dropdown-up .pointer { + bottom: 0; + top: auto; +} + +.dropdown-left .dropdown .pointer { + left: auto; + right: 10px; +} + +.dropdown .pointer-inner { + top: auto; + bottom: -11px; + left: -10px; +} + +.dropdown-up .pointer-inner { + bottom: auto; + top: -11px; +} + +.dropdown .pointer { + border-color: #B9B9B9 transparent; +} + +.dropdown .pointer-inner { + border-color: #FFF transparent; +} + +.dropdown .dropdown-contents { + z-index: 2; + overflow: hidden; + background: #fff; + border: 1px solid #b9b9b9; + border-radius: 5px; + padding: 5px; + position: relative; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.dropdown-up .dropdown-contents { + box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); +} + +.dropdown li { + float: none; + margin: 0; + white-space: nowrap; + text-align: left; +} + +.wrap .dropdown li, .dropdown.wrap li { + white-space: normal; +} + +.dropdown li:before, .dropdown li:after { + display: none !important; +} + + /* Classes for additional tasks ---------------------------------------- */ diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js index 45cec5f716..f34002c568 100644 --- a/phpBB/adm/style/admin.js +++ b/phpBB/adm/style/admin.js @@ -149,6 +149,73 @@ function parse_document(container) } }); + + /** + * Responsive tabs + */ + container.find('#tabs').not('[data-skip-responsive]').each(function() { + var $this = $(this), + $body = $('body'), + ul = $this.children(), + tabs = ul.children().not('[data-skip-responsive]'), + links = tabs.children('a'), + item = ul.append('').find('li.responsive-tab'), + menu = item.find('.dropdown-contents'), + maxHeight = 0, + lastWidth = false, + responsive = false; + + links.each(function() { + var link = $(this); + maxHeight = Math.max(maxHeight, Math.max(link.outerHeight(true), link.parent().outerHeight(true))); + }) + + function check() { + var width = $body.width(), + height = $this.height(); + + if (arguments.length == 0 && (!responsive || width <= lastWidth) && height <= maxHeight) { + return; + } + + tabs.show(); + item.hide(); + + lastWidth = width; + height = $this.height(); + if (height <= maxHeight) { + responsive = false; + if (item.hasClass('dropdown-visible')) { + phpbb.toggleDropdown.call(item.find('a.responsive-tab-link').get(0)); + } + return; + } + + responsive = true; + item.show(); + menu.html(''); + + var availableTabs = tabs.filter(':not(.activetab, .responsive-tab)'), + total = availableTabs.length, + i, tab; + + for (i = total - 1; i >= 0; i --) { + tab = availableTabs.eq(i); + menu.prepend(tab.clone(true)); + tab.hide(); + if ($this.height() <= maxHeight) { + menu.find('a').click(function() { check(true); }); + return; + } + } + menu.find('a').click(function() { check(true); }); + } + + phpbb.registerDropdown(item.find('a.responsive-tab-link'), item.find('.dropdown'), {visibleClass: 'activetab', verticalDirection: 'down'}); + + check(true); + $(window).resize(check); + }); } /** diff --git a/phpBB/adm/style/install_header.html b/phpBB/adm/style/install_header.html index d2dbf4bea7..d5f8430349 100644 --- a/phpBB/adm/style/install_header.html +++ b/phpBB/adm/style/install_header.html @@ -55,7 +55,7 @@ function dE(n, s, type)
diff --git a/phpBB/adm/style/overall_header.html b/phpBB/adm/style/overall_header.html index eb16c61fd1..455446f8e3 100644 --- a/phpBB/adm/style/overall_header.html +++ b/phpBB/adm/style/overall_header.html @@ -119,7 +119,7 @@ function popup(url, width, height, name)