[ticket/11957] Responsive layout and menu

PHPBB3-11957

phpBB/adm/style/admin.css

@@ -18,11 +18,11 @@ body, div, p, th, td, li, dd {
 	font-size: x-small;
 	voice-family: "\"}\"";
 	voice-family: inherit;
-	font-size: small
+	font-size: small;
 }
 
 html>body, html>div, html>p, html>th, html>td, html>li, html>dd {
-	font-size: small
+	font-size: small;
 }
 
 html {
@@ -31,6 +31,7 @@ html {
 	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-ie browsers */
 	height: 100%;
 	margin-bottom: 1px;
+	word-wrap: break-word;
 }
 
 body {
@@ -105,6 +106,16 @@ hr {
 	display: none;
 }
 
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	html, body {
+		height: auto;
+		margin: 0;
+		padding: 0;
+	}
+}
+
+
 /* General links  */
 a:link, a:visited {
 	color: #105289;
@@ -136,6 +147,7 @@ li {
 	list-style-type: inherit;
 }
 
+
 /* Main blocks
 ---------------------------------------- */
 #wrap {
@@ -216,6 +228,41 @@ li {
 	min-width: 0;
 }
 
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	#wrap, #page-body, #page-body.simple-page-body {
+		padding: 0;
+		min-width: 300px;
+	}
+
+	#page-header {
+		margin: 5px;
+		padding-left: 160px;
+		height: auto;
+		min-height: 54px;
+		overflow: hidden;
+	}
+
+	.rtl #page-header {
+		padding-right: 160px;
+		padding-left: 0;
+	}
+
+	#page-header h1 {
+		font-size: 1.2em;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	#main, .rtl #main {
+		float: none;
+		width: auto;
+		margin: 0;
+	}
+}
+
+
 /* Tabbed menu
 	Based on: http://www.alistapart.com/articles/slidingdoors2/
 ----------------------------------------*/
@@ -323,6 +370,15 @@ li {
 	overflow: hidden;
 }
 
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	#acp {
+		min-width: 0;
+		min-height: 0;
+	}
+}
+
+
 /* Sub-navigation Menu
 ---------------------------------------- */
 
@@ -352,12 +408,12 @@ li {
 }
 
 /* Default list state */
-#menu li {
+#menu li, #menu .header {
 	padding: 0;
 	margin: 0;
 	font-size: 0.85em;
 	font-weight: bold;
-	display: inline;
+	display: block;
 }
 
 /* Link styles for the sub-section links */
@@ -422,7 +478,7 @@ li {
 	background: url("../images/arrow_down.gif") 99% 50% no-repeat;
 }
 
-#menu li.header {
+#menu .header {
 	font-family: Tahoma, Helvetica, sans-serif;
 	display: block;
 	font-weight: bold;
@@ -432,8 +488,44 @@ li {
 	margin-top: 15px;
 	text-transform: uppercase;
 	font-size: 0.75em;
+	text-decoration: none;
+	cursor: inherit;
 }
 
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	#menu {
+		float: none;
+		width: auto;
+		border-width: 0;
+		max-width: 200px;
+		margin: 0 auto 10px;
+	}
+
+	#menu .menu-block .header {
+		margin-top: 0;
+		cursor: pointer;
+		border-bottom-width: 0;
+	}
+
+	#menu .menu-block .header:focus {
+		color: #D31141;
+	}
+
+	#menu .menu-block ul {
+		display: none;
+	}
+
+	#menu .menu-block:hover ul, #menu .menu-block.active ul, #menu .menu-block.no-header ul {
+		display: block;
+	}
+
+	#menu .menu-block li:last-child {
+		border-bottom: 1px solid #327AA5;
+	}
+}
+
+
 /* Table styles
 ---------------------------------------- */
 

phpBB/adm/style/install_header.html

@@ -63,6 +63,7 @@ function dE(n, s, type)
 		<div id="acp">
 				<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>
@@ -71,6 +72,7 @@ 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">

phpBB/adm/style/overall_header.html

@@ -128,14 +128,16 @@ function popup(url, width, height, name)
 				<div id="content">
 					<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 -->
 	
@@ -147,8 +149,9 @@ function popup(url, width, height, name)
 						
 							<!-- ENDIF -->
 						<!-- END l_block1 -->
-						<!-- IF not $LI_USED -->
+						<!-- IF $LI_USED -->
-							<li></li>
+								</ul>
+							</div>
 						<!-- ENDIF -->
 						</ul>
 					</div>