[ticket/11957] Responsive ACP tabs

PHPBB3-11957

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;
-}
+	position: relative;
-
+	z-index: 2;
-.rtl #tabs {
-	margin: 0 7px -6px 0;
 }
 
 #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
 ---------------------------------------- */
 

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);
+	});
 }
 
 /**

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>

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>