makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 14:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/11957] Responsive layout and menu

Browse source 
PHPBB3-11957
This commit is contained in:
Vjacheslav Trushkin 2013-10-25 18:22:39 +03:00
parent 64e26e8c71
commit 5779c300e4
3 changed files with 106 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
phpBB/adm/style/admin.css
View file

@ -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
---------------------------------------- */

2
phpBB/adm/style/install_header.html
View file

@ -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">

11
phpBB/adm/style/overall_header.html
View file

@ -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 -->
<li></li>
<!-- IF $LI_USED -->
</ul>
</div>
<!-- ENDIF -->
</ul>
</div>