mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-07 20:08:53 +00:00
[ticket/11957] Responsive ACP tabs
PHPBB3-11957
This commit is contained in:
Vjacheslav Trushkin
parent
b79cfa9f4a
commit
e9c0c9d5d2
4 changed files with 282 additions and 17 deletions
|
|
@ -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
|
||||
---------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -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('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span> </span></a><div class="dropdown tab-dropdown" style="display: none;"><div class="pointer"><div class="pointer-inner" /></div><ul class="dropdown-contents" /></div></li>').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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ function dE(n, s, type)
|
|||
<div id="tabs">
|
||||
<ul>
|
||||
<!-- BEGIN t_block1 -->
|
||||
<li<!-- IF t_block1.S_SELECTED --> id="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
|
||||
<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
|
||||
<!-- END t_block1 -->
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ function popup(url, width, height, name)
|
|||
<div id="tabs">
|
||||
<ul>
|
||||
<!-- BEGIN t_block1 -->
|
||||
<li<!-- IF t_block1.S_SELECTED --> id="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
|
||||
<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li>
|
||||
<!-- END t_block1 -->
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue