mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-27 13:48:55 +00:00
[ticket/12648] Improve UCP/MCP/Posting tabs
PHPBB3-12648
This commit is contained in:
PayBas
parent
8332671813
commit
eda3c36b1c
7 changed files with 82 additions and 140 deletions
|
|
@ -805,7 +805,7 @@ function parse_document(container)
|
|||
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'),
|
||||
item = ul.append('<li class="tab responsive-tab" style="display:none;"><a href="javascript:void(0);" class="responsive-tab-link"> </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,
|
||||
|
|
@ -847,7 +847,7 @@ function parse_document(container)
|
|||
|
||||
for (i = total - 1; i >= 0; i --) {
|
||||
tab = availableTabs.eq(i);
|
||||
menu.prepend(tab.clone(true));
|
||||
menu.prepend(tab.clone(true).removeClass('tab'));
|
||||
tab.hide();
|
||||
if ($this.height() <= maxHeight) {
|
||||
menu.find('a').click(function() { check(true); });
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<div id="tabs">
|
||||
<ul>
|
||||
<!-- BEGIN l_block1 -->
|
||||
<li<!-- IF l_block1.S_SELECTED --> class="activetab"<!-- ENDIF -->><a href="{l_block1.U_TITLE}"><span>{l_block1.L_TITLE}</span></a></li>
|
||||
<li class="tab<!-- IF l_block1.S_SELECTED --> activetab<!-- ENDIF -->"><a href="{l_block1.U_TITLE}">{l_block1.L_TITLE}</a></li>
|
||||
<!-- END l_block1 -->
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
|
||||
<div id="minitabs" class="sub-panels" data-show-panel="{$SHOW_PANEL}">
|
||||
<ul>
|
||||
<li id="display-panel-tab"<!-- IF not S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
|
||||
<a href="#minitabs" data-subpanel="display-panel"><span>{L_DISPLAY_OPTIONS}</span></a>
|
||||
<li id="display-panel-tab" class="tab<!-- IF not S_MERGE_VIEW --> activetab<!-- ENDIF -->">
|
||||
<a href="#minitabs" data-subpanel="display-panel">{L_DISPLAY_OPTIONS}</a>
|
||||
</li>
|
||||
<li id="split-panel-tab">
|
||||
<a href="#minitabs" data-subpanel="split-panel"><span>{L_SPLIT_TOPIC}</span></a>
|
||||
<li id="split-panel-tab" class="tab">
|
||||
<a href="#minitabs" data-subpanel="split-panel">{L_SPLIT_TOPIC}</a>
|
||||
</li>
|
||||
<li id="merge-panel-tab"<!-- IF S_MERGE_VIEW --> class="activetab"<!-- ENDIF -->>
|
||||
<a href="#minitabs" data-subpanel="merge-panel"><span>{L_MERGE_POSTS}</span></a>
|
||||
<li id="merge-panel-tab" class="tab<!-- IF S_MERGE_VIEW --> activetab<!-- ENDIF -->">
|
||||
<a href="#minitabs" data-subpanel="merge-panel">{L_MERGE_POSTS}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -101,13 +101,11 @@
|
|||
<!-- IF not S_PRIVMSGS and not S_SHOW_DRAFTS and not $SIG_EDIT eq 1 -->
|
||||
<div id="tabs" class="sub-panels" data-show-panel="<!-- IF SHOW_PANEL -->{SHOW_PANEL}<!-- ELSE -->options-panel<!-- ENDIF -->">
|
||||
<ul>
|
||||
<li id="options-panel-tab" class="activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
|
||||
<li id="options-panel-tab" class="tab activetab"><a href="#tabs" data-subpanel="options-panel"><span>{L_OPTIONS}</span></a></li>
|
||||
<!-- IF S_SHOW_ATTACH_BOX -->
|
||||
<li id="attach-panel-tab">
|
||||
<li id="attach-panel-tab" class="tab">
|
||||
<a href="#tabs" data-subpanel="attach-panel">
|
||||
<span>
|
||||
{L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong>
|
||||
</span>
|
||||
{L_ATTACHMENTS} <strong id="file-total-progress"><strong id="file-total-progress-bar"></strong></strong>
|
||||
</a>
|
||||
</li>
|
||||
<!-- ENDIF -->
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div id="tabs">
|
||||
<ul>
|
||||
<!-- 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 -->
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -807,52 +807,53 @@ ul.cplist {
|
|||
|
||||
/* CP tabbed menu
|
||||
----------------------------------------*/
|
||||
#tabs a {
|
||||
background-image: url("./images/bg_tabs1.gif");
|
||||
}
|
||||
|
||||
#tabs a span {
|
||||
background-image: url("./images/bg_tabs2.gif");
|
||||
#tabs .tab > a {
|
||||
background: #BACCD9;
|
||||
color: #536482;
|
||||
}
|
||||
|
||||
#tabs a:hover span {
|
||||
#tabs .tab > a:hover {
|
||||
background: #DDEDFB;
|
||||
color: #BC2A4D;
|
||||
}
|
||||
|
||||
#tabs .activetab a {
|
||||
border-bottom-color: #CADCEB;
|
||||
}
|
||||
|
||||
#tabs .activetab a span {
|
||||
#tabs .activetab > a,
|
||||
#tabs .activetab > a:hover {
|
||||
background: #E2F2FF;
|
||||
background: -moz-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #E2F2FF), color-stop(100%, #CADCEB));
|
||||
background: -webkit-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
|
||||
background: -o-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
|
||||
background: -ms-linear-gradient(top, #E2F2FF 0%, #CADCEB 100%);
|
||||
background: linear-gradient(to bottom, #E2F2FF 0%, #CADCEB 100%);
|
||||
border-color: #CADCEB;
|
||||
box-shadow: 0 1px 1px #F2F9FF inset;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
#tabs .activetab a:hover span {
|
||||
#tabs .activetab > a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* Mini tabbed menu used in MCP
|
||||
----------------------------------------*/
|
||||
#minitabs li {
|
||||
#minitabs .tab > a {
|
||||
background-color: #E1EBF2;
|
||||
}
|
||||
|
||||
#minitabs li.activetab {
|
||||
#minitabs .activetab > a,
|
||||
#minitabs .activetab > a:hover {
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
#minitabs li.activetab a span, #minitabs li.activetab a:hover span {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Responsive tabs
|
||||
----------------------------------------*/
|
||||
.responsive-tab .responsive-tab-link span:before {
|
||||
.responsive-tab .responsive-tab-link:before {
|
||||
border-color: #536482;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link:hover span:before {
|
||||
.responsive-tab .responsive-tab-link:hover:before {
|
||||
border-color: #BC2A4D;
|
||||
}
|
||||
|
||||
|
|
@ -1144,7 +1145,7 @@ input.disabled {
|
|||
border-color: #FFF transparent;
|
||||
}
|
||||
|
||||
.dropdown-extended .pointer-inner, #minitabs .pointer-inner {
|
||||
.dropdown-extended .pointer-inner {
|
||||
border-color: #F1F8FF transparent;
|
||||
}
|
||||
|
||||
|
|
@ -1170,10 +1171,6 @@ ul.linklist li.responsive-menu a.responsive-menu-link:hover:before, ul.linklist
|
|||
border-color: #DCDCDC;
|
||||
}
|
||||
|
||||
#minitabs .dropdown-contents {
|
||||
background-color: #F1F8FF;
|
||||
}
|
||||
|
||||
/* Notifications
|
||||
---------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -106,74 +106,49 @@ ul.cplist {
|
|||
----------------------------------------*/
|
||||
#tabs {
|
||||
line-height: normal;
|
||||
margin: 20px 0 -1px 7px;
|
||||
*overflow: hidden;
|
||||
margin: 20px 0 0 7px;
|
||||
/**overflow: hidden;*/
|
||||
}
|
||||
|
||||
#tabs ul {
|
||||
#tabs > ul {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tabs ul:after {
|
||||
#tabs > ul:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
#tabs .tab {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
#tabs a {
|
||||
float: left;
|
||||
#tabs .tab > a {
|
||||
background: none no-repeat 0% -35px;
|
||||
margin: 0 1px 0 0;
|
||||
padding: 0 0 0 5px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px 4px 0 0;
|
||||
display: block;
|
||||
margin: 1px 1px 0 0;
|
||||
padding: 5px 9px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tabs a span {
|
||||
float: left;
|
||||
display: block;
|
||||
background: none no-repeat 100% -35px;
|
||||
padding: 6px 10px 6px 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#tabs .activetab a {
|
||||
background-position: 0 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
#tabs .activetab a span {
|
||||
background-position: 100% 0;
|
||||
#tabs .activetab > a {
|
||||
margin-top: 0;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
#tabs a:hover {
|
||||
background-position: 0 -70px;
|
||||
}
|
||||
|
||||
#tabs a:hover span {
|
||||
background-position:100% -70px;
|
||||
}
|
||||
|
||||
#tabs .activetab a:hover {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#tabs .activetab a:hover span {
|
||||
background-position: 100% 0;
|
||||
}
|
||||
|
||||
/* Mini tabbed menu used in MCP
|
||||
----------------------------------------*/
|
||||
#minitabs {
|
||||
|
|
@ -183,31 +158,34 @@ ul.cplist {
|
|||
|
||||
.tabs-container #minitabs {
|
||||
float: right;
|
||||
margin-top: 19px;
|
||||
margin-top: 15px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
#minitabs ul {
|
||||
#minitabs > ul {
|
||||
list-style: none;
|
||||
margin:0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#minitabs li {
|
||||
display: block;
|
||||
#minitabs .tab {
|
||||
display: inline;
|
||||
float: right;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
padding: 5px 10px 4px 10px;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
#minitabs .tab > a {
|
||||
border-radius: 5px 5px 0 0;
|
||||
display: block;
|
||||
margin-left: 2px;
|
||||
padding: 5px 9px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#minitabs a {
|
||||
}
|
||||
|
||||
#minitabs a:hover {
|
||||
#minitabs .tab > a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -217,7 +195,7 @@ ul.cplist {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link span {
|
||||
.responsive-tab > a.responsive-tab-link {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
|
|
@ -226,45 +204,34 @@ ul.cplist {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
#minitabs .responsive-tab .responsive-tab-link span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.responsive-tab .responsive-tab-link span:before {
|
||||
.responsive-tab .responsive-tab-link:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
top: 7px;
|
||||
height: .125em;
|
||||
width: 14px;
|
||||
border-bottom: 0.125em solid transparent;
|
||||
border-top: 0.375em double transparent;
|
||||
}
|
||||
|
||||
#minitabs .responsive-tab .responsive-tab-link span:before {
|
||||
left: 0;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#tabs ul, #minitabs ul {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tabs .dropdown, #minitabs .dropdown {
|
||||
top: 29px;
|
||||
margin-right: -1px;
|
||||
top: 20px;
|
||||
margin-right: -2px;
|
||||
font-size: 1.1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#minitabs .dropdown {
|
||||
top: 18px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
#tabs .dropdown-up .dropdown, #minitabs .dropdown-up .dropdown {
|
||||
bottom: -5px;
|
||||
bottom: 20px;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
#minitabs .dropdown-up .dropdown {
|
||||
#minitabs .dropdown-up .dropdown {
|
||||
bottom: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -272,34 +239,14 @@ ul.cplist {
|
|||
margin-left: -41px;
|
||||
}
|
||||
|
||||
#tabs .dropdown li, #minitabs .dropdown li {
|
||||
display: block !important;
|
||||
background: transparent none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs .dropdown a span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#tabs .dropdown a, #tabs .dropdown a span, #minitabs .dropdown a, #minitabs .dropdown a span {
|
||||
background: transparent;
|
||||
float: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
#tabs .dropdown li {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.tabs-container #minitabs .dropdown a span {
|
||||
#minitabs .dropdown li {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#tabs .dropdown a span, #minitabs .dropdown a span {
|
||||
padding: 5px 8px;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
/* UCP navigation menu
|
||||
----------------------------------------*/
|
||||
/* Container for sub-navigation list */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue