aboutsummaryrefslogtreecommitdiffstats
path: root/phpBB/adm/style
diff options
context:
space:
mode:
authorVjacheslav Trushkin <cyberalien@gmail.com>2013-10-26 21:04:44 +0300
committerVjacheslav Trushkin <cyberalien@gmail.com>2013-10-26 22:00:25 +0300
commite9c0c9d5d2fa808476c52a6dce13df6da56394a6 (patch)
tree06adfc71b77c2c66380d54330a47016e00ed04be /phpBB/adm/style
parentb79cfa9f4afe2d131d5ad1e50e919656ff6a857d (diff)
downloadforums-e9c0c9d5d2fa808476c52a6dce13df6da56394a6.tar
forums-e9c0c9d5d2fa808476c52a6dce13df6da56394a6.tar.gz
forums-e9c0c9d5d2fa808476c52a6dce13df6da56394a6.tar.bz2
forums-e9c0c9d5d2fa808476c52a6dce13df6da56394a6.tar.xz
forums-e9c0c9d5d2fa808476c52a6dce13df6da56394a6.zip
[ticket/11957] Responsive ACP tabs
PHPBB3-11957
Diffstat (limited to 'phpBB/adm/style')
-rw-r--r--phpBB/adm/style/admin.css228
-rw-r--r--phpBB/adm/style/admin.js67
-rw-r--r--phpBB/adm/style/install_header.html2
-rw-r--r--phpBB/adm/style/overall_header.html2
4 files changed, 282 insertions, 17 deletions
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('<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'),
+ 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)
<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>
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)
<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>
generated by cgit v1.2.1 (git 2.21.0) at 2025-08-08 22:05:50 +0000