diff options
Diffstat (limited to 'phpBB')
20 files changed, 1068 insertions, 279 deletions
diff --git a/phpBB/adm/images/corners_left.gif b/phpBB/adm/images/corners_left.gif Binary files differdeleted file mode 100644 index bacd276495..0000000000 --- a/phpBB/adm/images/corners_left.gif +++ /dev/null diff --git a/phpBB/adm/images/corners_left2.gif b/phpBB/adm/images/corners_left2.gif Binary files differdeleted file mode 100644 index 206e50368d..0000000000 --- a/phpBB/adm/images/corners_left2.gif +++ /dev/null diff --git a/phpBB/adm/images/corners_right.gif b/phpBB/adm/images/corners_right.gif Binary files differdeleted file mode 100644 index bcb5bd7d14..0000000000 --- a/phpBB/adm/images/corners_right.gif +++ /dev/null diff --git a/phpBB/adm/images/corners_right2.gif b/phpBB/adm/images/corners_right2.gif Binary files differdeleted file mode 100644 index 0ba66d50b2..0000000000 --- a/phpBB/adm/images/corners_right2.gif +++ /dev/null diff --git a/phpBB/adm/images/toggle.gif b/phpBB/adm/images/toggle.gif Binary files differdeleted file mode 100644 index 8af6861bd1..0000000000 --- a/phpBB/adm/images/toggle.gif +++ /dev/null diff --git a/phpBB/adm/style/acp_avatar_options_local.html b/phpBB/adm/style/acp_avatar_options_local.html index 148efd051b..0cdb3644d7 100644 --- a/phpBB/adm/style/acp_avatar_options_local.html +++ b/phpBB/adm/style/acp_avatar_options_local.html @@ -8,18 +8,14 @@ </select> <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 --> diff --git a/phpBB/adm/style/acp_forums.html b/phpBB/adm/style/acp_forums.html index 7b1466cfbd..3fd2f18d67 100644 --- a/phpBB/adm/style/acp_forums.html +++ b/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> diff --git a/phpBB/adm/style/acp_groups_position.html b/phpBB/adm/style/acp_groups_position.html index cf1a7be427..7aa894945a 100644 --- a/phpBB/adm/style/acp_groups_position.html +++ b/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> diff --git a/phpBB/adm/style/acp_main.html b/phpBB/adm/style/acp_main.html index d9e7fb7eeb..b6d520130a 100644 --- a/phpBB/adm/style/acp_main.html +++ b/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> diff --git a/phpBB/adm/style/acp_permission_roles.html b/phpBB/adm/style/acp_permission_roles.html index d654c320ca..d4f7bbdf36 100644 --- a/phpBB/adm/style/acp_permission_roles.html +++ b/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> diff --git a/phpBB/adm/style/acp_permissions.html b/phpBB/adm/style/acp_permissions.html index 88a82532a1..6dc9dca2e7 100644 --- a/phpBB/adm/style/acp_permissions.html +++ b/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> diff --git a/phpBB/adm/style/acp_styles.html b/phpBB/adm/style/acp_styles.html index 3dc4c2d616..55904253a9 100644 --- a/phpBB/adm/style/acp_styles.html +++ b/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 --> diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index ca15338133..c411d2d0a2 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,23 @@ hr { display: none; } +@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) +{ + body { + margin: 5px 5px 0; + } +} + +@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 +154,7 @@ li { list-style-type: inherit; } + /* Main blocks ---------------------------------------- */ #wrap { @@ -174,7 +193,7 @@ li { #page-body { clear: both; - min-width: 700px; + min-width: 650px; } #page-footer { @@ -195,19 +214,23 @@ li { } #main { - float: left; - width: 76%; - margin: 0 0 0 3%; - min-height: 350px; + float: right; + width: 100%; + margin: 0 0 0 -210px; } .rtl #main { float: right; - margin: 0 3% 0 0; + margin: 0 -210px 0 0; +} + +.main { + margin-left: 210px; } -* html #main { - height: 350px; +.rtl .main { + margin-left: 0; + margin-right: 210px; } #page-body.simple-page-body { @@ -216,17 +239,81 @@ 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; + } + + #page-header fieldset { + margin-top: 5px; + } + + #main, .rtl #main, .main, .rtl .main { + float: none; + width: auto; + margin: 0; + } + + #content { + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + padding: 5px; + } + + #page-footer { + padding: 0 5px 5px; + } +} + +@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) +{ + #page-header { + background-size: 76px 26.5px; + padding-left: 80px; + min-height: 30px; + } + + .rtl #page-header { + padding-right: 80px; + } + + #page-header h1 { + padding-top: 0; + font-size: 1.1em; + } +} + + /* Tabbed menu Based on: http://www.alistapart.com/articles/slidingdoors2/ ----------------------------------------*/ #tabs { line-height: normal; - margin: 0 0 -6px 7px; + margin: 0 7px; min-width: 600px; -} - -.rtl #tabs { - margin: 0 7px -6px 0; + position: relative; + z-index: 2; } #tabs ul { @@ -235,14 +322,27 @@ li { list-style: none; } +#tabs ul:after { + content: ''; + display: block; + clear: both; +} + #tabs li { - display: inline; + display: block; + float: left; margin: 0; padding: 0; font-size: 0.85em; font-weight: bold; } +#tabs li:after { + content: ''; + display: block; + clear: both; +} + #tabs a { float: left; background:url("../images/bg_tabs1.gif") no-repeat 0% -34px; @@ -261,6 +361,7 @@ li { display: block; background: url("../images/bg_tabs2.gif") no-repeat 100% -34px; padding: 7px 10px 4px 4px; + min-height: 14px; color: #767676; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; @@ -280,12 +381,12 @@ li { color: #BC2A4D; } -#tabs #activetab a { +#tabs .activetab a { background-position: 0 0; border-bottom: 1px solid #DCDEE2; } -#tabs #activetab a span { +#tabs .activetab a span { background-position: 100% 0; padding-bottom: 5px; color: #23649F; @@ -299,103 +400,135 @@ li { background-position: 100% -69px; } -#tabs #activetab a:hover span { +#tabs .activetab a:hover span { color: #115098; } +.responsive-tab { + position: relative; +} -/* Main Panel ----------------------------------------- */ -#acp { - margin: 4px 0; - padding: 3px 1px; - min-width: 550px; - background-color: #FFFFFF; - border: 1px #999999 solid; +.responsive-tab .responsive-tab-link span { + display: inline-block; + font-size: 16px; + position: relative; + width: 16px; + line-height: 14px; + text-decoration: none; } -.panel { - background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; - padding: 0; +.responsive-tab .responsive-tab-link span:before { + content: ''; + position: absolute; + left: 5px; + top: 8px; + height: .125em; + width: 14px; + border-bottom: 0.125em solid #767676; + border-top: 0.375em double #767676; } -span.corners-top, span.corners-bottom, -span.corners-top span, span.corners-bottom span { - font-size: 1px; - line-height: 1px; - display: block; - height: 5px; - background-repeat: no-repeat; +.responsive-tab .responsive-tab-link:hover span:before { + border-color: #BC2A4D; } -span.corners-top { - background-image: url("../images/corners_left.gif"); - background-position: 0 0; - margin: -4px -2px 0; +.responsive-tab.activetab .responsive-tab-link span:before { + border-color: #23649F; } -span.corners-top span { - background-image: url("../images/corners_right.gif"); - background-position: 100% 0; +.responsive-tab.activetab .responsive-tab-link:hover span:before { + border-color: #115098; } -span.corners-bottom { - background-image: url("../images/corners_left.gif"); - background-position: 0 100%; - margin: 0 -2px -4px; - clear: both; +#tabs .dropdown { + top: 18px; + margin-right: -1px; } -span.corners-bottom span { - background-image: url("../images/corners_right.gif"); - background-position: 100% 100%; +#tabs .dropdown-right .dropdown { + margin-left: -2px; } -/* WinIE tweaks \*/ -* html span.corners-top, * html span.corners-bottom { background-image: url("../images/corners_left.gif"); } -* html span.corners-top span, * html span.corners-bottom span { background-image: url("../images/corners_right.gif"); } -/* End tweaks */ +#tabs .dropdown li { + display: block !important; + float: none; + background: transparent none; + padding: 0; +} -/* Sub-navigation Menu ----------------------------------------- */ +#tabs .dropdown a, #tabs .dropdown a span { + background: transparent; + display: block; + border-width: 0; + float: none; + margin: 0; + padding: 0; + text-align: right; +} -/* Toggle */ -#toggle { - padding: 5px; - width: 5%; - height: 100px; - position: absolute; - left: 15%; - top: 28px; - margin-left: 2px; +#tabs .dropdown a span { + padding: 4px 8px; + color: inherit !important; } -.rtl #toggle { - left: 75%; - margin-right: 0; - margin-left: 6px; +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #tabs { + min-width: 0; + } } -#toggle-handle { - display: block; - width: 18px; - height: 19px; - float: right; - background-image: url(../images/toggle.gif); +/* Main Panel +---------------------------------------- */ +#acp { + clear: both; + position: relative; + top: -2px; + margin: 0 0 2px; + padding: 3px 1px; + min-width: 550px; + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + border: 1px #999999 solid; + border-radius: 5px; + box-shadow: #FFF 0 0 0 1px inset; +} + +#acp:first-child { + top: 0; +} + +.panel { + background: #F3F3F3 url("../images/innerbox_bg.gif") repeat-x top; + padding: 5px 0; + border-radius: 5px; + overflow: hidden; } -.rtl #toggle-handle { - background-image: url(../images/toggle.gif); - background-position: 100% 50%; +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #acp { + min-width: 0; + min-height: 0; + border-radius: 0; + border-width: 1px 0; + background: #fff; + padding: 1px 0; + box-shadow: none; + } } +/* Sub-navigation Menu +---------------------------------------- */ + /* Menu */ #menu { float: left; - width: 20%; + width: 200px; font-size: 1.00em; padding: 0; border-right: 1px solid #CCCFD3; + position: relative; + z-index: 1; } .rtl #menu { @@ -412,15 +545,16 @@ span.corners-bottom span { list-style: none; margin: 0; padding: 0; + word-wrap: normal; } /* 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 */ @@ -437,6 +571,12 @@ span.corners-bottom span { padding: 3px 8px 3px 3px; } +#menu li span, #menu .header { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + #menu li a:hover, #menu li a:hover span { text-decoration: none; background-color: #FFFFFF; @@ -485,7 +625,7 @@ span.corners-bottom span { 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; @@ -495,8 +635,71 @@ span.corners-bottom span { margin-top: 15px; text-transform: uppercase; font-size: 0.75em; + text-decoration: none; + cursor: inherit; + outline-style: none; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + #menu, .rtl #menu { + float: none; + width: auto; + border-width: 0; + max-width: 200px; + margin: 0 auto 10px; + } + + #menu p { + text-align: center; + } + + #menu .menu-block.active { + margin: 0 -5px; + padding: 0 5px 3px; + background: rgba(255, 255, 255, .5); + border-radius: 5px; + } + + #menu .menu-block.no-header.active { + padding-top: 3px; + } + + #menu .menu-block .header { + margin-top: 5px; + cursor: pointer; + border-bottom-width: 0; + position: relative; + text-decoration: underline; + } + + #menu .menu-block .header:focus, #menu .menu-block.active .header { + color: #D31141; + text-decoration: none; + } + + #menu .menu-block ul { + display: none; + } + + .nojs #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; + } + + #menu .menu-block:last-child li:last-child, #menu .menu-block.active li:last-child { + border-bottom-width: 0; + } + + #menu .menu-block li a span { + border-radius: 2px; + } +} + + /* Table styles ---------------------------------------- */ @@ -653,6 +856,161 @@ td.name { color: #BC2A4D; } +/* Specific tables */ +table.forums td.folder { + width: 27px; + text-align: center; +} + +table td.actions { + vertical-align: middle; + width: 100px; + text-align: center; + white-space: nowrap; +} + +table.styles td.users, table td.mark { + text-align: center; +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + table.responsive, table.responsive tbody, table.responsive tr, table.responsive td { + display: block; + } + + table.responsive thead, table.responsive th, table.responsive colgroup { + display: none; + } + + table.responsive.show-header thead, table.responsive.show-header th:first-child, table.responsive caption { + display: block; + width: auto !important; + text-align: left !important; + margin: 0; + } + + table.responsive { + background: transparent none; + border-width: 0; + padding: 0; + } + + table.responsive caption { + padding: 3px 4px; + color: #FFFFFF; + background: #70AED3 url("../images/gradient2b.gif") bottom left repeat-x; + border-top: 1px solid #6DACD2; + border-bottom: 1px solid #327AA5; + text-align: left; + font-size: 0.75em; + font-weight: bold; + text-transform: uppercase; + } + + table.responsive.show-header th:first-child span.rank-img, table.responsive.no-caption caption, table.responsive.no-header thead { + display: none; + } + + table.responsive tr { + margin: 2px 0; + border: 1px solid #CCCFD3; + background-color: #FFFFFF; + padding: 1px 1px 0; + overflow: hidden; + } + + table.responsive tr.row1 td { background-color: #F9F9F9; } + table.responsive tr.row2 td { background-color: #DCEBFE; } + table.responsive tr.row3 td { background-color: #DBDFE2; } + table.responsive tr.row4 td { background-color: #E4E8EB; } + table.responsive tr.col1 td { background-color: #DCEBFE; } + table.responsive tr.col2 td { background-color: #F9F9F9; } + table.responsive tr.row1a td { background-color: #F9F9F9; } + table.responsive tr.row1b td { background-color: #F6F6F6; } + table.responsive tr.row2a td { background-color: #E7EEF4; } + table.responsive tr.row2b td { background-color: #E3EBF2; } + + table.responsive td { + width: auto !important; + text-align: left !important; + padding: 4px; + margin-bottom: 1px; + } + + table.responsive td.empty { + display: none !important; + } + + table.responsive td > dfn { + display: inline-block !important; + } + + table.responsive td > dfn:after { + content: ':'; + padding-right: 5px; + } + + table.responsive.two-columns td { + width: 50% !important; + float: left; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + table.responsive.two-columns td:nth-child(2n+1) { + clear: left; + } + + table.responsive span.rank-img { + float: none; + padding-right: 5px; + } + + table.responsive#memberlist td:first-child input[type="checkbox"] { + float: right; + } + + /* Specific tables */ + table.responsive.forums td.folder { + float: left; + width: 27px; + background: transparent; + } + .rtl table.responsive.forums td.folder { + float: right; + } + + table.responsive.forums td.forum-desc { + margin-left: 35px; + min-height: 27px; + background: transparent; + } + + .rtl table.responsive.forums td.forum-desc { + margin-left: 0; + margin-right: 35px; + } + + table.responsive td.actions { + clear: both; + text-align: right !important; + } + + .rtl table.responsive td.actions { + text-align: left !important; + } + + table.responsive.styles tr.responsive-style-row td:first-child { + padding-left: 4px !important; + padding-right: 4px !important; + } + + table.responsive.styles td:first-child > dfn, table.responsive td.actions > dfn { + display: none !important; + } +} + /* General form styles ----------------------------------------*/ fieldset { @@ -664,6 +1022,7 @@ fieldset { border-left: 1px solid #D7D7D7; background-color: #FFFFFF; position: relative; + border-radius: 3px; } .rtl fieldset { @@ -673,10 +1032,6 @@ fieldset { border-left: 1px solid #CCCCCC; } -* html fieldset { - padding: 0 10px 5px 10px; -} - fieldset p { font-size: 0.85em; } @@ -695,23 +1050,10 @@ legend { vertical-align: middle; } -* html legend { - margin: 0 0 -10px -7px; - line-height: 1em; - font-size: .85em; -} - -/* Holly hack, .rtl comes after html */ -* html .rtl legend { - margin: 0; - margin-right: -7px; -} - input, textarea { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 0.90em; font-weight: normal; - cursor: text; vertical-align: middle; padding: 2px; color: #111111; @@ -873,6 +1215,22 @@ select#full_folder_action { width: 95%; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + fieldset { + padding: 5px; + } + + fieldset.quick, p.quick { + float: none !important; + text-align: center; + } + + fieldset.display-options { + clear: both; + } +} + /* Definition list layout for forms Other general def. list properties defined in prosilver_main.css ---------------------------------------- */ @@ -1004,6 +1362,51 @@ input:focus, textarea:focus { outline-style: none; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + fieldset dl { + margin-bottom: 5px; + padding-bottom: 5px; + border-bottom: 1px solid #e8e8e8; + } + + fieldset > dl:last-child, fieldset > form:last-child > dl:last-child { + border-bottom-width: 0; + margin-bottom: 0; + } + + fieldset dt, .rtl fieldset dt, fieldset dd, .rtl fieldset dd { + border-width: 0; + margin-left: 0; + margin-right: 0; + float: none; + width: auto; + } + + .ltr fieldset dd { + padding-left: 20px; + } + + .rtl fieldset dd { + padding-right: 20px; + } + + select, dd select, dd input { + max-width: 300px; + } + + input[type="number"], dd input[type="number"] { + max-width: 70px; + } +} + +@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) +{ + select, dd select, dd input { + max-width: 240px; + } +} + /* Submit button fieldset or paragraph ---------------------------------------- */ fieldset.submit-buttons { @@ -1030,6 +1433,13 @@ fieldset.submit-buttons legend { display: none; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + p.submit-buttons { + margin-top: 0; + } +} + /* Input field styles ---------------------------------------- */ @@ -1045,7 +1455,6 @@ textarea.full { width: 99%; } -* html input.full, * html textarea.full { width: 95%;} input.medium { width: 50%;} input.narrow { width: 25%;} input.tiny { width: 10%;} @@ -1109,8 +1518,10 @@ input.button1:focus, input.button2:focus, input.button3:focus { position: fixed; display: none; top: 150px; - left: 25%; - width: 50%; + left: 0; + right: 0; + max-width: 600px; + margin: 0 auto; z-index: 50; padding: 25px; padding: 0 25px 20px 25px; @@ -1166,6 +1577,21 @@ input.button1:focus, input.button2:focus, input.button3:focus { opacity: 0.5; } +@media only screen and (max-height: 500px), only screen and (max-device-width: 500px) +{ + .phpbb_alert { + top: 25px; + } +} + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .phpbb_alert { + max-width: none; + margin: 0 25px; + } +} + /* Pagination ---------------------------------------- */ .pagination { @@ -1247,6 +1673,20 @@ li.pagination ul { border-color: #B4BAC0; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .pagination, .rtl .pagination { + float: none; + text-align: center; + margin: 5px 0; + } + + .pagination li a, .pagination li span { + display: inline-block; + min-width: 10px; + } +} + /* Action Highlighting ---------------------------------------- */ .successbox, .errorbox { @@ -1272,8 +1712,6 @@ li.pagination ul { background-color: #BC2A4D; } -* html .errorbox, * html .successbox { height: 1%; } /* Pixel shift fix for IE */ - .successbox h3, .errorbox h3 { color: #FFFFFF; margin: 0 0 0.5em; @@ -1367,7 +1805,7 @@ li.pagination ul { visibility: hidden; }*/ -.clearfix, #tabs, .row, #content, fieldset dl, #page-body { +.clearfix, .row, #content, fieldset dl, #page-body { height: 1%; overflow: hidden; } @@ -1422,6 +1860,15 @@ li.pagination ul { /* Permission interface ---------------------------------------- */ +.column1, .column2 { + width: 48%; + float: left; +} + +.ltr .column2, .rtl .column1 { + float: right; +} + fieldset.permissions legend { text-transform: none; } @@ -1619,60 +2066,15 @@ fieldset.permissions .padding { float: left; background-color: #CADCEB; width: 100%; + border-radius: 5px; + overflow: hidden; + padding: 5px 0; } .rtl .permissions-panel { float: right; } -.permissions-panel span.corners-top { - background-image: url("../images/corners_left2.gif"); -} - -.permissions-panel span.corners-top span { - background-image: url("../images/corners_right2.gif"); -} - -.permissions-panel span.corners-bottom { - background-image: url("../images/corners_left2.gif"); -} - -.permissions-panel span.corners-bottom span { - background-image: url("../images/corners_right2.gif"); -} - -.permissions-panel span.corners-top, .permissions-panel span.corners-bottom, -.permissions-panel span.corners-top span, .permissions-panel span.corners-bottom span { - font-size: 1px; - line-height: 1px; - display: block; - height: 5px; - background-repeat: no-repeat; -} - -.permissions-panel span.corners-top { - background-image: url("../images/corners_left2.gif"); - background-position: 0 0; - margin: 0 0; -} - -.permissions-panel span.corners-top span { - background-image: url("../images/corners_right2.gif"); - background-position: 100% 0; -} - -.permissions-panel span.corners-bottom { - background-image: url("../images/corners_left2.gif"); - background-position: 0 100%; - margin: 0 0; - clear: both; -} - -.permissions-panel span.corners-bottom span { - background-image: url("../images/corners_right2.gif"); - background-position: 100% 100%; -} - /* Permission table ---------------------------------------- */ .permissions-panel .tablewrap { @@ -1755,6 +2157,205 @@ fieldset.permissions .padding { padding: 0; } +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .column1, .column2 { + float: none !important; + width: auto; + } + + .permissions-simple { + clear: both; + } + + .permissions-simple td, .permissions-simple dd { + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + .permissions-simple dd { + margin-top: 5px; + } + + .permissions-panel .tablewrap { + margin: 0 5px; + } + + .permissions-category { + min-width: 0; + margin: 0 !important; + } + + .permissions-category a, .permissions-category a span.tabbg { + display: block; + float: none !important; + background: transparent none; + } + + .permissions-category a { + background: #d9e5ee; + margin: 5px 0; + padding: 0 !important; + border-radius: 3px; + text-decoration: underline; + } + + .permissions-category .activetab a { + background-color: #dd6900; + color: #fff; + } + + .permissions-category a span.tabbg { + color: inherit !important; + padding-top: 6px !important; + padding-bottom: 6px !important; + } + + .permissions-category .activetab span.colour { + border-color: #fff; + } +} + +/* Avatars gallery +---------------------------------------- */ +#gallery { + display: block; + margin: 0 -5px; + padding: 0; + overflow: hidden; +} + +#gallery li { + display: block; + float: left; + border: 1px solid #ccc; + border-radius: 2px; + background: #fff; + padding: 5px; + margin: 5px; +} + +#gallery li:hover { + background-color: #eee; +} + +#gallery li label { + display: block; + text-align: center; + padding: 0; +} + +/* Dropdown menu +----------------------------------------*/ +.dropdown { + position: absolute; + left: 0; + top: 22px; + z-index: 2; + border: 1px solid transparent; + border-radius: 5px; + padding: 9px 0 0; +} + +.dropdown-up .dropdown { + top: auto; + bottom: 18px; + padding: 0 0 9px; +} + +.dropdown-left .dropdown { + left: auto; + right: 0; +} + +.dropdown .pointer, .dropdown .pointer-inner { + position: absolute; + width: 0; + height: 0; + border-top-width: 0; + border-bottom: 10px solid transparent; + border-left: 10px dashed transparent; + border-right: 10px dashed transparent; + -webkit-transform: rotate(360deg); /* better anti-aliasing in webkit */ + display: block; +} + +.dropdown-up .pointer, .dropdown-up .pointer-inner { + border-bottom-width: 0; + border-top: 10px solid transparent; +} + +.dropdown .pointer { + right: auto; + left: 10px; + top: 0; + z-index: 3; +} + +.dropdown-up .pointer { + bottom: 0; + top: auto; +} + +.dropdown-left .dropdown .pointer { + left: auto; + right: 10px; +} + +.dropdown .pointer-inner { + top: auto; + bottom: -11px; + left: -10px; +} + +.dropdown-up .pointer-inner { + bottom: auto; + top: -11px; +} + +.dropdown .pointer { + border-color: #B9B9B9 transparent; +} + +.dropdown .pointer-inner { + border-color: #FFF transparent; +} + +.dropdown .dropdown-contents { + z-index: 2; + overflow: hidden; + background: #fff; + border: 1px solid #b9b9b9; + border-radius: 5px; + padding: 5px; + position: relative; + box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.dropdown-up .dropdown-contents { + box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2); +} + +.dropdown li { + float: none; + margin: 0; + white-space: nowrap; + text-align: left; +} + +.wrap .dropdown li, .dropdown.wrap li { + white-space: normal; +} + +.dropdown li:before, .dropdown li:after { + display: none !important; +} + + /* Classes for additional tasks ---------------------------------------- */ @@ -1777,3 +2378,11 @@ fieldset.permissions .padding { color: #FFFFFF; font-size: 1.4em; } + +@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) +{ + .responsive-hide { display: none !important; } + .responsive-show { display: block !important; } + .responsive-show-inline { display: inline !important; } + .responsive-show-inline-block { display: inline-block !important; } +} diff --git a/phpBB/adm/style/admin.js b/phpBB/adm/style/admin.js new file mode 100644 index 0000000000..e9f0f1e512 --- /dev/null +++ b/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() == ' ') { + $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> </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); diff --git a/phpBB/adm/style/install_footer.html b/phpBB/adm/style/install_footer.html index f7d62d7c7e..c5356e7b9d 100644 --- a/phpBB/adm/style/install_footer.html +++ b/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> diff --git a/phpBB/adm/style/install_header.html b/phpBB/adm/style/install_header.html index 5631b83e17..560bf501e9 100644 --- a/phpBB/adm/style/install_header.html +++ b/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"> diff --git a/phpBB/adm/style/install_update_diff.html b/phpBB/adm/style/install_update_diff.html index 1f30fe4d13..c27304a425 100644 --- a/phpBB/adm/style/install_update_diff.html +++ b/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> diff --git a/phpBB/adm/style/overall_footer.html b/phpBB/adm/style/overall_footer.html index 145ad18709..3c291842dc 100644 --- a/phpBB/adm/style/overall_footer.html +++ b/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 --> diff --git a/phpBB/adm/style/overall_header.html b/phpBB/adm/style/overall_header.html index 3a9b6db2a3..455446f8e3 100644 --- a/phpBB/adm/style/overall_header.html +++ b/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> [ <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 --> @@ -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"> diff --git a/phpBB/adm/style/permission_mask.html b/phpBB/adm/style/permission_mask.html index 4d52b901c3..003e8369ca 100644 --- a/phpBB/adm/style/permission_mask.html +++ b/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> |
