Merge pull request #1818 from cyberalien/ticket/11957

Responsive design for ACP

phpBB/adm/style/acp_avatar_options_local.html

@@ -8,18 +8,14 @@
 	</select>&nbsp;<input type="submit" value="{L_GO}" name="avatar_local_go" class="button2" /></dd>
 </dl>
 	<!-- IF AVATAR_LOCAL_SHOW -->
-	<table>
+	<ul id="gallery">
 	<!-- BEGIN avatar_local_row -->
-	<tr>
-		<!-- BEGIN avatar_local_col -->
-			<td class="row1" style="text-align: center;"><img src="{avatar_local_row.avatar_local_col.AVATAR_IMAGE}" alt="{avatar_local_row.avatar_local_col.AVATAR_NAME}" title="{avatar_local_row.avatar_local_col.AVATAR_NAME}"/></td>
-		<!-- END avatar_local_col -->
-	</tr>
-	<tr>
-		<!-- BEGIN avatar_local_option -->
-			<td class="row2" style="text-align: center;"><input type="radio" name="avatar_local_file" id="av-{avatar_local_row.S_ROW_COUNT}-{avatar_local_row.avatar_local_option.S_ROW_COUNT}" value="{avatar_local_row.avatar_local_option.AVATAR_FILE}" /></td>
-		<!-- END avatar_local_option -->
-	</tr>
+	<!-- BEGIN avatar_local_col -->
+		<li>
+			<label for="av-{avatar_local_row.S_ROW_COUNT}-{avatar_local_row.avatar_local_col.S_ROW_COUNT}"><img src="{avatar_local_row.avatar_local_col.AVATAR_IMAGE}" alt="" /><br />
+			<input type="radio" name="avatar_local_file" id="av-{avatar_local_row.S_ROW_COUNT}-{avatar_local_row.avatar_local_col.S_ROW_COUNT}" value="{avatar_local_row.avatar_local_col.AVATAR_FILE}" /></label>
+		</li>
+	<!-- END avatar_local_col -->
 	<!-- END avatar_local_row -->
-	</table>
+	</ul>
 	<!-- ENDIF -->

phpBB/adm/style/acp_forums.html

@@ -440,19 +440,19 @@
 	<p><strong>{NAVIGATION}<!-- IF S_NO_FORUMS --> [<a href="{U_EDIT}">{L_EDIT}</a> | <a href="{U_DELETE}">{L_DELETE}</a><!-- IF not S_LINK --> | <a href="{U_SYNC}">{L_RESYNC}</a><!-- ENDIF -->]<!-- ENDIF --></strong></p>
 
 	<!-- IF .forums -->
-		<table cellspacing="1">
+		<table cellspacing="1" class="forums">
 			<col class="row1" /><col class="row1" /><col class="row2" />
 		<tbody>
 		<!-- BEGIN forums -->
 			<tr data-down="{forums.U_MOVE_DOWN}" data-up="{forums.U_MOVE_UP}">
-				<td style="width: 5%; text-align: center;">{forums.FOLDER_IMAGE}</td>
-				<td>
+				<td class="folder">{forums.FOLDER_IMAGE}</td>
+				<td class="forum-desc">
 					<!-- IF forums.FORUM_IMAGE --><div style="float: {S_CONTENT_FLOW_BEGIN}; margin-right: 5px;">{forums.FORUM_IMAGE}</div><!-- ENDIF -->
 					<strong><!-- IF forums.S_FORUM_LINK -->{forums.FORUM_NAME}<!-- ELSE --><a href="{forums.U_FORUM}">{forums.FORUM_NAME}</a><!-- ENDIF --></strong>
 					<!-- IF forums.FORUM_DESCRIPTION --><br /><span>{forums.FORUM_DESCRIPTION}</span><!-- ENDIF -->
 					<!-- IF forums.S_FORUM_POST --><br /><br /><span>{L_TOPICS}{L_COLON} <strong>{forums.FORUM_TOPICS}</strong> / {L_POSTS}{L_COLON} <strong>{forums.FORUM_POSTS}</strong></span><!-- ENDIF -->
 				</td>
-				<td style="vertical-align: top; width: 100px; text-align: right; white-space: nowrap;">
+				<td class="actions">
 					<!-- IF forums.S_FIRST_ROW && not forums.S_LAST_ROW -->
 						<span class="up">{ICON_MOVE_UP_DISABLED}</span>
 						<span class="down"><a href="{forums.U_MOVE_DOWN}" data-ajax="row_down" data-overlay="false">{ICON_MOVE_DOWN}</a></span>

phpBB/adm/style/acp_groups_position.html

@@ -41,7 +41,7 @@
 		<tr data-down="{legend.U_MOVE_DOWN}" data-up="{legend.U_MOVE_UP}">
 			<td><strong<!-- IF legend.GROUP_COLOUR --> style="color: {legend.GROUP_COLOUR}"<!-- ENDIF -->>{legend.GROUP_NAME}</strong></td>
 			<td style="text-align: center;">{legend.GROUP_TYPE}</td>
-			<td style="vertical-align: top; width: 100px; text-align: right; white-space: nowrap;">
+			<td class="actions">
 				<!-- IF legend.S_FIRST_ROW && not legend.S_LAST_ROW -->
 					<span class="up">{ICON_MOVE_UP_DISABLED}</span>
 					<span class="down"><a href="{legend.U_MOVE_DOWN}" data-ajax="row_down" data-overlay="false">{ICON_MOVE_DOWN}</a></span>
@@ -136,7 +136,7 @@
 			</td>
 			<td style="text-align: center;"><!-- IF teampage.GROUP_TYPE -->{teampage.GROUP_TYPE}<!-- ELSE -->-<!-- ENDIF -->
 			</td></td>
-			<td style="vertical-align: top; width: 100px; text-align: right; white-space: nowrap;">
+			<td class="actions">
 				<!-- IF teampage.S_FIRST_ROW && not teampage.S_LAST_ROW -->
 					<span class="up">{ICON_MOVE_UP_DISABLED}</span>
 					<span class="down"><a href="{teampage.U_MOVE_DOWN}" data-ajax="row_down" data-overlay="false">{ICON_MOVE_DOWN}</a></span>

phpBB/adm/style/acp_main.html

@@ -78,7 +78,7 @@
 
 	<!-- EVENT acp_main_notice_after -->
 
-	<table cellspacing="1">
+	<table cellspacing="1" class="two-columns no-header" data-no-responsive-header="true">
 		<caption>{L_FORUM_STATS}</caption>
 		<col class="col1" /><col class="col2" /><col class="col1" /><col class="col2" />
 	<thead>

phpBB/adm/style/acp_permission_roles.html

@@ -90,9 +90,8 @@
 			</div>
 			<!-- BEGIN auth -->
 			<div class="permissions-panel" id="options00{auth.S_ROW_COUNT}"<!-- IF auth.S_FIRST_ROW --><!-- ELSE --> style="display: none;"<!-- ENDIF -->>
-				<span class="corners-top"><span></span></span>
 				<div class="tablewrap">
-					<table id="table00{auth.S_ROW_COUNT}" cellspacing="1">
+					<table id="table00{auth.S_ROW_COUNT}" cellspacing="1" class="not-responsive">
 					<colgroup>
 						<col class="permissions-name" />
 						<col class="permissions-yes" />
@@ -120,7 +119,6 @@
 					</tbody>
 					</table>
 				</div>
-				<span class="corners-bottom"><span></span></span>
 			</div>
 			<!-- END auth -->
 		</div>

phpBB/adm/style/acp_permissions.html

@@ -110,7 +110,7 @@
 
 		<!-- ELSEIF S_SELECT_USERGROUP -->
 
-		<div style="float: {S_CONTENT_FLOW_BEGIN}; width: 48%;">
+		<div class="column1">
 
 		<!-- IF S_CAN_SELECT_USER -->
 
@@ -155,7 +155,7 @@
 
 		</div>
 
-		<div style="float: {S_CONTENT_FLOW_END}; width: 48%">
+		<div class="column2">
 
 		<!-- IF S_CAN_SELECT_GROUP -->
 
@@ -200,7 +200,7 @@
 
 	<!-- ELSEIF S_SELECT_USERGROUP_VIEW -->
 
-		<div style="float: {S_CONTENT_FLOW_BEGIN}; width: 48%;">
+		<div class="column1">
 
 			<h1>{L_USERS}</h1>
 
@@ -241,7 +241,7 @@
 
 		</div>
 
-		<div style="float: {S_CONTENT_FLOW_END}; width: 48%">
+		<div class="column2">
 
 			<h1>{L_USERGROUPS}</h1>
 
@@ -324,7 +324,7 @@
 		</form>
 	<!-- ENDIF -->
 
-	<br /><br />
+	<br class="responsive-hide" /><br class="responsive-hide" />
 
 	<!-- include tooltip file -->
 	<script type="text/javascript" src="style/tooltip.js"></script>
@@ -340,7 +340,7 @@
 
 	<!-- INCLUDE permission_mask.html -->
 
-	<br /><br />
+	<br class="responsive-hide" /><br class="responsive-hide" />
 
 	<fieldset class="quick" style="float: {S_CONTENT_FLOW_END};">
 		<input class="button1" type="submit" name="action[apply_all_permissions]" value="{L_APPLY_ALL_PERMISSIONS}" />
@@ -348,7 +348,7 @@
 		{S_FORM_TOKEN}
 	</fieldset>
 
-	<br /><br />
+	<br class="responsive-hide" /><br class="responsive-hide" />
 
 	</form>
 

phpBB/adm/style/acp_styles.html

@@ -79,7 +79,7 @@
 <!-- ENDIF -->
 
 <!-- IF .styles_list -->
-	<table cellspacing="1">
+	<table cellspacing="1" class="styles">
 	<thead>
 	<tr>
 		<th>{L_STYLE_NAME}</th>
@@ -97,9 +97,9 @@
 		<!-- ELSE -->
 			<!-- IF $ROW_CLASS == 'row2a' --><!-- DEFINE $ROW_CLASS = 'row2b' --><!-- ELSE --><!-- DEFINE $ROW_CLASS = 'row2a' --><!-- ENDIF -->
 		<!-- ENDIF -->
-		<td class="{$ROW_CLASS}" style="padding-left: {styles_list.PADDING}px;">
+		<td class="{$ROW_CLASS}" style="padding-{S_CONTENT_FLOW_BEGIN}: {styles_list.PADDING}px;">
 			<!-- IF styles_list.STYLE_ID and styles_list.COMMENT == '' and styles_list.STYLE_ACTIVE -->
-				<div class="default-style" style="display: none; float: right;">
+				<div class="default-style" style="display: none; float: {S_CONTENT_FLOW_END};">
 					<input class="radio" type="radio" name="default" value="{styles_list.STYLE_ID}"<!-- IF styles_list.DEFAULT --> checked="checked"<!-- ELSE --><!-- DEFINE $S_DEFAULT = 1 --><!-- ENDIF --> title="{L_STYLE_DEFAULT}" />
 				</div>
 			<!-- ENDIF -->
@@ -117,9 +117,9 @@
 			<!-- ENDIF -->
 		</td>
 		<!-- IF not STYLES_LIST_HIDE_COUNT -->
-			<td class="{$ROW_CLASS}" style="text-align: center;">{styles_list.USERS}</td>
+			<td class="{$ROW_CLASS} users">{styles_list.USERS}</td>
 		<!-- ENDIF -->
-		<td class="{$ROW_CLASS}" style="text-align: center;">
+		<td class="{$ROW_CLASS} actions">
 			<!-- BEGIN actions -->
 				<!-- IF styles_list.actions.S_ROW_COUNT > 0 --> | <!-- ENDIF -->
 				<!-- IF styles_list.actions.U_ACTION -->
@@ -129,7 +129,7 @@
 			<!-- END actions -->
 		</td>
 		{styles_list.EXTRA}
-		<td class="{$ROW_CLASS}" width="20" style="text-align: center;">
+		<td class="{$ROW_CLASS} mark" width="20">
 			<!-- IF styles_list.STYLE_ID -->
 				<input class="checkbox" type="checkbox" name="ids[]" value="{styles_list.STYLE_ID}" />
 			<!-- ELSE -->

phpBB/adm/style/admin.js

@@ -0,0 +1,243 @@
+/**
+* phpBB3 ACP functions
+*/
+
+/**
+* Parse document block
+*/
+function parse_document(container) 
+{
+	var test = document.createElement('div'),
+		oldBrowser = (typeof test.style.borderRadius == 'undefined');
+
+	delete test;
+
+	/**
+	* Navigation
+	*/
+	container.find('#menu').each(function() {
+		var menu = $(this),
+			blocks = menu.children('.menu-block');
+
+		if (!blocks.length) {
+			return;
+		}
+
+		// Set onclick event
+		blocks.children('a.header').click(function() {
+			var parent = $(this).parent();
+			if (!parent.hasClass('active')) {
+				parent.siblings().removeClass('active');
+			}
+			parent.toggleClass('active');
+		});
+
+		// Set active menu
+		menu.find('#activemenu').parents('.menu-block').addClass('active');
+
+		// Check if there is active menu
+		if (!blocks.filter('.active').length) {
+			blocks.filter(':first').addClass('active');
+		}
+	});
+
+	/**
+	* Responsive tables
+	*/
+	container.find('table').not('.not-responsive').each(function() {
+		var $this = $(this),
+			th = $this.find('thead > tr > th'),
+			columns = th.length,
+			headers = [],
+			totalHeaders = 0,
+			i, headersLength;
+
+		// Find columns
+		$this.find('colgroup:first').children().each(function(i) {
+			var column = $(this);
+			$this.find('td:nth-child(' + (i + 1) + ')').addClass(column.prop('className'));
+		});
+
+		// Styles table
+		if ($this.hasClass('styles')) {
+			$this.find('td:first-child[style]').each(function() {
+				var style = $(this).attr('style');
+				if (style.length) {
+					$(this).parent('tr').attr('style', style.toLowerCase().replace('padding', 'margin')).addClass('responsive-style-row');
+				}
+			});
+		}
+
+		// Find each header
+		if (!$this.data('no-responsive-header'))
+		{
+			th.each(function(column) {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					dfn = cell.attr('data-dfn'),
+					text = dfn ? dfn : cell.text().trim();
+
+				if (text == ' ') text = '';
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+
+				for (i=0; i<colspan; i++) {
+					headers.push(text);
+				}
+				totalHeaders ++;
+
+				if (dfn && !column) {
+					$this.addClass('show-header');
+				}
+			});
+		}
+		
+		headersLength = headers.length;
+
+		// Add header text to each cell as <dfn>
+		$this.addClass('responsive');
+
+		if (totalHeaders < 2) {
+			$this.addClass('show-header');
+			return;
+		}
+
+		$this.find('tbody > tr').each(function() {
+			var row = $(this),
+				cells = row.children('td'),
+				column = 0;
+
+			if (cells.length == 1) {
+				row.addClass('big-column');
+				return;
+			}
+
+			cells.each(function() {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					text = cell.text().trim();
+
+				if (headersLength <= column) {
+					return;
+				}
+
+				if ((text.length && text !== '-') || cell.children().length) {
+					if (headers[column] != '') {
+						cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>');
+					}
+				}
+				else {
+					cell.addClass('empty');
+				}
+
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+				column += colspan;
+			});
+		});
+	});
+
+	/**
+	* Hide empty responsive tables
+	*/
+	container.find('table.responsive > tbody').each(function() {
+		var items = $(this).children('tr');
+		if (items.length == 0)
+		{
+			$(this).parent('table:first').addClass('responsive-hide');
+		}
+	});
+
+	/**
+	* Fieldsets with empty <span>
+	*/
+	container.find('fieldset dt > span:last-child').each(function() {
+		var $this = $(this);
+		if ($this.html() == '&nbsp;') {
+			$this.addClass('responsive-hide');
+		}
+		
+	});
+
+	/**
+	* 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);
+	});
+}
+
+/**
+* Run onload functions
+*/
+(function($) {
+	$(document).ready(function() {
+		// Swap .nojs and .hasjs
+		$('body.nojs').toggleClass('nojs hasjs');
+
+		// Focus forms
+		$('form[data-focus]:first').each(function() {
+			$('#' + this.getAttribute('data-focus')).focus();
+		});
+
+		parse_document($('body'));
+	});
+})(jQuery);

phpBB/adm/style/install_footer.html

@@ -1,10 +1,7 @@
-
-					</div>
+						</div>
+					</div><!-- /#main -->
 				</div>
-			<span class="corners-bottom"><span></span></span>
-			<div class="clear"></div>
-		</div>
-		</div>
+		</div><!-- /#acp -->
 	</div>
 
 	<div id="page-footer">
@@ -14,6 +11,8 @@
 
 <script type="text/javascript" src="{T_JQUERY_LINK}"></script>
 <!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.js" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
+<!-- INCLUDEJS admin.js -->
+{$SCRIPTS}
 
 </body>
 </html>

phpBB/adm/style/install_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <!-- IF META -->{META}<!-- ENDIF -->
 <title>{PAGE_TITLE}</title>
 
@@ -34,7 +35,7 @@ function dE(n, s, type)
 
 </head>
 
-<body class="{S_CONTENT_DIRECTION}">
+<body class="{S_CONTENT_DIRECTION} nojs">
 <div id="wrap">
 	<div id="page-header">
 		<h1>{L_INSTALL_PANEL}</h1>
@@ -54,16 +55,15 @@ 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>
 
 		<div id="acp">
-		<div class="panel">
-			<span class="corners-top"><span></span></span>
 				<div id="content">
 					<div id="menu">
+						<div class="menu-block no-header">
 						<ul>
 						<!-- BEGIN l_block1 -->
 							<li<!-- IF l_block1.S_SELECTED --> id="activemenu"<!-- ENDIF -->><a href="{l_block1.U_TITLE}"><span>{l_block1.L_TITLE}</span></a></li>
@@ -72,6 +72,8 @@ function dE(n, s, type)
 							<li<!-- IF l_block2.S_SELECTED --> id="activemenu"<!-- ENDIF -->><span<!-- IF l_block2.S_COMPLETE --> class="completed"<!-- ENDIF -->>{l_block2.L_TITLE}</span></li>
 						<!-- END l_block2 -->
 						</ul>
+						</div>
 					</div>
 
 					<div id="main" class="install-body">
+						<div class="main">

phpBB/adm/style/install_update_diff.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <!-- IF META -->{META}<!-- ENDIF -->
 <title>{PAGE_TITLE}</title>
 
@@ -33,7 +34,7 @@ window.onresize = resize_panel;
 <style type="text/css">
 /* <![CDATA[ */
 
-#main {
+#main, .rtl #main {
 	font-size: 1em;
 	line-height: 0.7em;
 	margin: 0;
@@ -43,6 +44,7 @@ window.onresize = resize_panel;
 
 #diff_content {
 	padding: 30px 10px 10px;
+	overflow: hidden;
 }
 
 <!-- IF DIFF_MODE neq 'side_by_side' and DIFF_MODE neq 'raw' -->
@@ -238,15 +240,13 @@ table.hrdiff caption span {
 
 	<div id="page-body">
 		<div id="acp">
-		<div class="panel" id="codepanel">
-			<span class="corners-top"><span></span></span>
+			<div id="codepanel">
 				<div id="diff_content">
 					<div id="main">
 						{DIFF_CONTENT}
 					</div>
 				</div>
-			<span class="corners-bottom"><span></span></span>
-		</div>
+			</div>
 		</div>
 	</div>
 

phpBB/adm/style/overall_footer.html

@@ -1,10 +1,7 @@
-
-					</div>
+						</div>
+					</div><!-- /#main -->
 				</div>
-			<span class="corners-bottom"><span></span></span>
-			<div class="clear"></div>
-		</div>
-		</div>
+		</div><!-- /#acp -->
 	</div>
 
 	<div id="page-footer">
@@ -38,6 +35,7 @@
 <!-- IF S_ALLOW_CDN --><script type="text/javascript">window.jQuery || document.write(unescape('%3Cscript src="{T_ASSETS_PATH}/javascript/jquery.js?assets_version={T_ASSETS_VERSION}" type="text/javascript"%3E%3C/script%3E'));</script><!-- ENDIF -->
 <script type="text/javascript" src="{T_ASSETS_PATH}/javascript/core.js?assets_version={T_ASSETS_VERSION}"></script>
 <!-- INCLUDEJS ajax.js -->
+<!-- INCLUDEJS admin.js -->
 {$SCRIPTS}
 
 <!-- EVENT acp_overall_footer_after -->

phpBB/adm/style/overall_header.html

@@ -2,6 +2,7 @@
 <html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
 <head>
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width" />
 <!-- IF META -->{META}<!-- ENDIF -->
 <title>{PAGE_TITLE}</title>
 
@@ -14,9 +15,6 @@ var on_page = '{ON_PAGE}';
 var per_page = '{PER_PAGE}';
 var base_url = '{BASE_URL|e('js')}';
 
-var menu_state = 'shown';
-
-
 /**
 * Jump to page
 */
@@ -103,62 +101,12 @@ function popup(url, width, height, name)
 	return false;
 }
 
-/**
-* Hiding/Showing the side menu
-*/
-function switch_menu()
-{
-	var menu = document.getElementById('menu');
-	var main = document.getElementById('main');
-	var toggle = document.getElementById('toggle');
-	var handle = document.getElementById('toggle-handle');
-
-	switch (menu_state)
-	{
-		// hide
-		case 'shown':
-			main.style.width = '93%';
-			menu_state = 'hidden';
-			menu.style.display = 'none';
-			toggle.style.width = '20px';
-			handle.style.backgroundImage = 'url(images/toggle.gif)';
-			handle.style.backgroundRepeat = 'no-repeat';
-
-			<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
-				handle.style.backgroundPosition = '0% 50%';
-				toggle.style.left = '96%';
-			<!-- ELSE -->
-				handle.style.backgroundPosition = '100% 50%';
-				toggle.style.left = '0';
-			<!-- ENDIF -->
-		break;
-
-		// show
-		case 'hidden':
-			main.style.width = '76%';
-			menu_state = 'shown';
-			menu.style.display = 'block';
-			toggle.style.width = '5%';
-			handle.style.backgroundImage = 'url(images/toggle.gif)';
-			handle.style.backgroundRepeat = 'no-repeat';
-
-			<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
-				handle.style.backgroundPosition = '100% 50%';
-				toggle.style.left = '75%';
-			<!-- ELSE -->
-				handle.style.backgroundPosition = '0% 50%';
-				toggle.style.left = '15%';
-			<!-- ENDIF -->
-		break;
-	}
-}
-
 // ]]>
 </script>
 <!-- EVENT acp_overall_header_head_append -->
 </head>
 
-<body class="{S_CONTENT_DIRECTION}">
+<body class="{S_CONTENT_DIRECTION} nojs">
 
 <div id="wrap">
 	<div id="page-header">
@@ -171,29 +119,25 @@ function switch_menu()
 		<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>
 
 		<div id="acp">
-		<div class="panel">
-			<span class="corners-top"><span></span></span>
 				<div id="content">
-					<!-- IF not S_USER_NOTICE --> 
-					<div id="toggle">
-						<a id="toggle-handle" accesskey="m" title="{L_MENU_TOGGLE}" onclick="switch_menu(); return false;" href="#"></a></div>
-					<!-- ENDIF -->
 					<div id="menu">
 						<p>{L_LOGGED_IN_AS}<br /><strong>{USERNAME}</strong> [&nbsp;<a href="{U_LOGOUT}">{L_LOGOUT}</a>&nbsp;][&nbsp;<a href="{U_ADM_LOGOUT}">{L_ADM_LOGOUT}</a>&nbsp;]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
-						<ul>
 						<!-- DEFINE $LI_USED = 0 -->
 						<!-- BEGIN l_block1 -->
 							<!-- IF l_block1.S_SELECTED -->
 	
 						<!-- BEGIN l_block2 -->
 							<!-- IF .l_block1.l_block2.l_block3 -->
-							<li class="header">{l_block1.l_block2.L_TITLE}</li>
+							<!-- IF $LI_USED --></ul></div><!-- ENDIF -->
+							<div class="menu-block">
+								<a class="header" href="javascript:void(0);">{l_block1.l_block2.L_TITLE}</a>
+								<ul>
 							<!-- DEFINE $LI_USED = 1 -->
 							<!-- ENDIF -->
 	
@@ -205,10 +149,12 @@ function switch_menu()
 						
 							<!-- ENDIF -->
 						<!-- END l_block1 -->
-						<!-- IF not $LI_USED -->
-							<li></li>
+						<!-- IF $LI_USED -->
+								</ul>
+							</div>
 						<!-- ENDIF -->
 						</ul>
 					</div>
 	
 					<div id="main">
+						<div class="main">

phpBB/adm/style/permission_mask.html

@@ -75,9 +75,8 @@
 
 	<!-- BEGIN category -->
 		<div class="permissions-panel" id="options{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}{p_mask.f_mask.category.S_ROW_COUNT}" <!-- IF p_mask.S_FIRST_ROW and p_mask.f_mask.S_FIRST_ROW and p_mask.f_mask.category.S_FIRST_ROW --><!-- ELSE --> style="display: none;"<!-- ENDIF -->>
-			<span class="corners-top"><span></span></span>
 			<div class="tablewrap">
-				<table id="table{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}{p_mask.f_mask.category.S_ROW_COUNT}" cellspacing="1">
+				<table id="table{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}{p_mask.f_mask.category.S_ROW_COUNT}" cellspacing="1" class="not-responsive">
 				<colgroup>
 					<col class="permissions-name" />
 					<col class="permissions-yes" />
@@ -128,7 +127,6 @@
 		
 			<!-- ENDIF -->
 
-			<span class="corners-bottom"><span></span></span>
 		</div>
 	<!-- END category -->
 			<div class="clearfix"></div>