makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-08 04:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/12648] Fix and modernize ACP header tabs

Browse source 
PHPBB3-12648
This commit is contained in:
PayBas 2014-06-03 11:14:53 +02:00
parent 6f9674228c
commit b83b72b271
6 changed files with 80 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
phpBB/adm/images/bg_tabs1.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
phpBB/adm/images/bg_tabs2.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 541 B

173
phpBB/adm/style/admin.css
View file

@ -320,176 +320,155 @@ li {
/* Tabbed menu /* Tabbed menu
Based on: http://www.alistapart.com/articles/slidingdoors2/
----------------------------------------*/ ----------------------------------------*/
#tabs { #tabs {
font-family: Arial, Helvetica, sans-serif;
line-height: normal; line-height: normal;
margin: 0 7px; margin: 0 7px;
min-width: 600px;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
#tabs ul { #tabs > ul {
margin:0;
padding: 0;
list-style: none; list-style: none;
}
#tabs ul:after {
content: '';
display: block;
clear: both;
}
#tabs li {
display: block;
float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0.85em;
font-weight: bold;
} }
#tabs li:after { #tabs > ul:after {
content: ''; content: '';
display: block; display: block;
clear: both; clear: both;
} }
#tabs a { #tabs .tab {
display: inline-block;
float: left; float: left;
background:url("../images/bg_tabs1.gif") no-repeat 0% -34px; font-size: 0.85em;
margin: 0 1px 0 0;
padding: 0 0 0 7px;
text-decoration: none;
position: relative;
}
.rtl #tabs li {
float: right;
}
#tabs a span {
float: left;
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;
text-transform: uppercase;
font-weight: bold; font-weight: bold;
line-height: 14px;
} }
.rtl #tabs a span { .rtl #tabs .tab {
float: right; float: right;
} }
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs .tab > a {
#tabs a span, .rtl #tabs a span { float:none;} background: #D4D6DA;
/* End hack */ background: -moz-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CACBCF), color-stop(100%, #D4D6DA));
background: -webkit-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
background: -o-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
background: -ms-linear-gradient(top, #CACBCF 0%, #D4D6DA 100%);
background: linear-gradient(to bottom, #CACBCF 0%, #D4D6DA 100%);
border: 1px solid #BBB;
border-bottom-width: 0;
border-radius: 5px 5px 0 0;
color: #767676;
display: block;
font-weight: bold;
margin: 1px 1px 2px 0;
padding: 6px 9px 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
}
#tabs a:hover span { #tabs .tab > a:hover {
background: #F1F1EE;
border-color: #C0BFBB;
color: #BC2A4D; color: #BC2A4D;
} }
#tabs a:hover { #tabs .activetab > a,
background-position: 0 -69px; #tabs .activetab > a:hover {
} background: #DCDEE2;
background: -moz-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
#tabs a:hover span { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #DCDEE2));
background-position: 100% -69px; background: -webkit-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
} background: -o-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
background: -ms-linear-gradient(top, #F2F2F2 0%, #DCDEE2 100%);
#tabs .activetab a { background: linear-gradient(to bottom, #F2F2F2 0%, #DCDEE2 100%);
background-position: 0 0; border-color: #999;
border-bottom: 1px solid #DCDEE2; box-shadow: 0 1px 1px #FFF inset;
}
#tabs .activetab a span {
background-position: 100% 0;
padding-bottom: 5px;
color: #23649F; color: #23649F;
margin: 0 1px 0 0;
padding: 7px 10px 6px;
} }
#tabs .activetab a:hover span { #tabs .activetab > a:hover {
color: #115098; color: #115098;
} }
/* Responsive tabs
----------------------------------------*/
.responsive-tab { .responsive-tab {
position: relative; position: relative;
} }
.responsive-tab .responsive-tab-link span { .responsive-tab > a.responsive-tab-link {
display: inline-block; display: block;
font-size: 16px; font-size: 16px;
position: relative; position: relative;
width: 16px; width: 16px;
line-height: 14px; line-height: 14px;
text-decoration: none; text-decoration: none;
padding-left: 9px !important;
padding-right: 9px !important;
} }
.responsive-tab .responsive-tab-link span:before { .responsive-tab .responsive-tab-link:before {
content: ''; content: '';
position: absolute; position: absolute;
left: 5px; left: 10px;
top: 8px; top: 7px;
height: .125em; height: .125em;
width: 14px; width: 14px;
border-bottom: 0.125em solid #767676; border-bottom: 0.125em solid #767676;
border-top: 0.375em double #767676; border-top: 0.375em double #767676;
} }
.responsive-tab .responsive-tab-link:hover span:before { .responsive-tab .responsive-tab-link:hover:before {
border-color: #BC2A4D; border-color: #BC2A4D;
} }
.responsive-tab.activetab .responsive-tab-link span:before { .responsive-tab.activetab .responsive-tab-link:before {
border-color: #23649F; border-color: #23649F;
} }
.responsive-tab.activetab .responsive-tab-link:hover span:before { .responsive-tab.activetab .responsive-tab-link:hover:before {
border-color: #115098; border-color: #115098;
} }
#tabs .dropdown { #tabs .dropdown, #minitabs .dropdown {
top: 18px; top: 20px;
margin-right: -1px; margin-right: -2px;
font-weight: normal;
} }
#tabs .dropdown-right .dropdown { #tabs .dropdown-right .dropdown {
margin-left: -2px; margin-left: -2px;
} }
#tabs .dropdown li { #tabs .dropdown-contents {
display: block !important; list-style: none;
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; margin: 0;
padding: 0;
text-align: right;
} }
#tabs .dropdown a span { #tabs .dropdown li {
border-bottom: 1px dotted #DCDCDC;
}
#tabs .dropdown li:last-child {
border-bottom: none;
}
#tabs .dropdown a {
display: block;
padding: 4px 8px; padding: 4px 8px;
color: inherit !important; text-align: right;
}
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
#tabs {
min-width: 0;
}
} }
/* Main Panel /* Main Panel

4
phpBB/adm/style/admin.js
View file

@ -169,7 +169,7 @@ function parse_document(container)
ul = $this.children(), ul = $this.children(),
tabs = ul.children().not('[data-skip-responsive]'), tabs = ul.children().not('[data-skip-responsive]'),
links = tabs.children('a'), links = tabs.children('a'),
item = ul.append('<li class="responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"><span>&nbsp;</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'), item = ul.append('<li class="tab responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link">&nbsp;</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'), menu = item.find('.dropdown-contents'),
maxHeight = 0, maxHeight = 0,
lastWidth = false, lastWidth = false,
@ -211,7 +211,7 @@ function parse_document(container)
for (i = total - 1; i >= 0; i --) { for (i = total - 1; i >= 0; i --) {
tab = availableTabs.eq(i); tab = availableTabs.eq(i);
menu.prepend(tab.clone(true)); menu.prepend(tab.clone(true).removeClass('tab'));
tab.hide(); tab.hide();
if ($this.height() <= maxHeight) { if ($this.height() <= maxHeight) {
menu.find('a').click(function() { check(true); }); menu.find('a').click(function() { check(true); });

2
phpBB/adm/style/install_header.html
View file

@ -29,7 +29,7 @@
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN t_block1 --> <!-- BEGIN t_block1 -->
<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li> <li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
<!-- END t_block1 --> <!-- END t_block1 -->
</ul> </ul>
</div> </div>

2
phpBB/adm/style/overall_header.html
View file

@ -106,7 +106,7 @@ function popup(url, width, height, name)
<div id="tabs"> <div id="tabs">
<ul> <ul>
<!-- BEGIN t_block1 --> <!-- BEGIN t_block1 -->
<li<!-- IF t_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{t_block1.U_TITLE}"><span>{t_block1.L_TITLE}</span></a></li> <li class="tab<!-- IF t_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{t_block1.U_TITLE}">{t_block1.L_TITLE}</a></li>
<!-- END t_block1 --> <!-- END t_block1 -->
</ul> </ul>
</div> </div>