diff options
| author | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-25 18:22:39 +0300 |
|---|---|---|
| committer | Vjacheslav Trushkin <cyberalien@gmail.com> | 2013-10-26 22:00:23 +0300 |
| commit | 5779c300e47cec9533d95ad8691f362032d6f485 (patch) | |
| tree | a2f6ff27d065c74b373575e0be4b7270bd92635a /phpBB | |
| parent | 64e26e8c71c4f5d59e421c293f1bd6a17d13e341 (diff) | |
| download | forums-5779c300e47cec9533d95ad8691f362032d6f485.tar forums-5779c300e47cec9533d95ad8691f362032d6f485.tar.gz forums-5779c300e47cec9533d95ad8691f362032d6f485.tar.bz2 forums-5779c300e47cec9533d95ad8691f362032d6f485.tar.xz forums-5779c300e47cec9533d95ad8691f362032d6f485.zip | |
[ticket/11957] Responsive layout and menu
PHPBB3-11957
Diffstat (limited to 'phpBB')
| -rw-r--r-- | phpBB/adm/style/admin.css | 102 | ||||
| -rw-r--r-- | phpBB/adm/style/install_header.html | 2 | ||||
| -rw-r--r-- | phpBB/adm/style/overall_header.html | 11 |
3 files changed, 106 insertions, 9 deletions
diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 87f430c077..b70b98c9a5 100644 --- a/phpBB/adm/style/admin.css +++ b/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 ---------------------------------------- */ diff --git a/phpBB/adm/style/install_header.html b/phpBB/adm/style/install_header.html index 8b2f006508..13f4a6dbf4 100644 --- a/phpBB/adm/style/install_header.html +++ b/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"> diff --git a/phpBB/adm/style/overall_header.html b/phpBB/adm/style/overall_header.html index 0636f9bb26..80e254227b 100644 --- a/phpBB/adm/style/overall_header.html +++ b/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> [ <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> |