mirror of
https://github.com/phpbb/phpbb.git
synced 2025-06-28 14:18:52 +00:00
[ticket/11957] Responsive layout and menu
PHPBB3-11957
This commit is contained in:
Vjacheslav Trushkin
parent
64e26e8c71
commit
5779c300e4
3 changed files with 106 additions and 9 deletions
|
|
@ -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
|
||||
---------------------------------------- */
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -72,5 +73,6 @@ function dE(n, s, type)
|
|||
<!-- END l_block2 -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main" class="install-body">
|
||||
|
|
|
|||
|
|
@ -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> [ <a href="{U_LOGOUT}">{L_LOGOUT}</a> ][ <a href="{U_ADM_LOGOUT}">{L_ADM_LOGOUT}</a> ] </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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue