From 58f312f95ef5315645a0b633c9e9db5104cf7bc5 Mon Sep 17 00:00:00 2001 From: Matt Thomas Date: Wed, 13 Nov 2013 17:59:32 +0000 Subject: [PATCH] Bring in the responsive component of MP6. See #25858. * Makes the admin fully responsive down to 320px wide. * Adds a touch-optimized main menu that can be opened and closed from the toolbar. * Size and positioning adjustments to icons, buttons, and text elements for better touch usability. A few changes since MP6: * Removed jQuery mobile. This script was used to add swipe controls to open/close the sidebar menu. This feature was apparently buggy and due to the pending demise of jQuery mobile, it was removed. * Removed use of Backbone.js. Adding Backbone.js to this script would add a dependency of Backbone.js for all of the admin. Additionally, it was used to add a menu item. Instead of doing that, it was added via the admin menu API. This also fixes a bad delay in the item showing in the menu. * CSS layout is standardized. Comments have also been cleaned up. * Jetpack and Akismet code is removed. * RTL CSS is removed. * JS passes hinting other than one small issue that will likely be removed when parts of the code are reviewed. A number of areas for improvement remain; we're tracking these issues in the comments of #25858. Props to tollmanz, tillkruess, helen, dd32, and apeatling. git-svn-id: https://develop.svn.wordpress.org/trunk@26134 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/admin-header.php | 1 + src/wp-admin/css/wp-admin.css | 1791 +++++++++++++++++++++++- src/wp-admin/js/common.js | 169 +++ src/wp-includes/admin-bar.php | 20 + src/wp-includes/class-wp-admin-bar.php | 1 + 5 files changed, 1978 insertions(+), 4 deletions(-) diff --git a/src/wp-admin/admin-header.php b/src/wp-admin/admin-header.php index 6df3ad2f72..ea446cabf9 100644 --- a/src/wp-admin/admin-header.php +++ b/src/wp-admin/admin-header.php @@ -67,6 +67,7 @@ var ajaxurl = '', decimalPoint = 'number_format['decimal_point'] ); ?>', isRtl = ; + li > a { + padding: 10px 10px 10px 20px; + } + + /* Restore the menu names */ + .auto-fold #adminmenu .wp-menu-name { + display: block; + margin-left: 35px; + } + + /* Switch the arrow side */ + .auto-fold ul#adminmenu a.wp-has-current-submenu:after, + .auto-fold ul#adminmenu > li.current > a.current:after { + border-width: 8px; + margin-top: -8px; + } + + .auto-fold ul#adminmenu li.wp-has-submenu.wp-not-current-submenu:hover:after { + display: none; + } + + /* Make the submenus appear correctly when tapped. */ + #adminmenu .wp-submenu { + position: relative; + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu, + .auto-fold #adminmenu .wp-menu-open .wp-submenu { + position: relative; + display: block; + top: 0; + left: -1px; + -webkit-box-shadow: none; + box-shadow: none; + } + + .auto-fold #adminmenu .selected .wp-submenu:after, + .auto-fold #adminmenu .wp-menu-open .wp-submenu:after { + display: none; + } + + .auto-fold #adminmenu .opensub .wp-submenu { + display: none; + } + + .auto-fold #adminmenu .selected .wp-submenu { + display: block; + } + + .auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after { + display: block; + } + + /* Remove submenu headers and adjust sub meu*/ + #adminmenu .wp-submenu .wp-submenu-head { + display: none; + } + + /* Sidebar Toggle */ + #moby6-toggle { + position: fixed; + top: 5px; + left: 4px; + padding-right: 10px; + z-index: 99999; + border: none; + box-sizing: border-box; + -moz-box-sizing: border-box; + } + + .wrap .icon32 + h2 { + margin-top: -2px; + } + + #wpadminbar #wp-admin-bar-toggle-button a { + display: block; + padding: 0; + overflow: hidden; + outline: none; + text-decoration: none; + border: 1px solid transparent; + background: none; + height: 44px; + margin-left: -1px; + } + + li#wp-admin-bar-toggle-button { + display: block; + } + + #wpadminbar #wp-admin-bar-toggle-button a:hover { + border: 1px solid transparent; + } + + #wpadminbar #wp-admin-bar-toggle-button .ab-icon:before { + color: #888; + content: '\f228'; + display: inline-block; + float: left; + font: normal 40px/45px 'Dashicons'; + vertical-align: middle; + outline: none; + margin: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + height: 44px; + width: 50px; + padding: 0; + border: none; + text-align: center; + text-decoration: none; + box-sizing: border-box; + -moz-box-sizing: border-box; + } + + .moby6-open #wpadminbar #wp-admin-bar-toggle-button a { + background: #000; + } + + .moby6-open #wpbody { + right: -190px; + } + + .auto-fold .moby6-open #adminmenuback, + .auto-fold .moby6-open #adminmenuwrap { + left: 0; + } + + /* General New Post Form */ + #post-body-content { + min-width: 0; + } + + #titlediv #title { + padding: 8px; + } + + #titlediv #title-prompt-text, + #wp-fullscreen-title-prompt-text { + padding: 10px 10px; + } + + .post-format-options { + padding-right: 0; + } + + .post-format-options a { + margin-right: 5px; + margin-bottom: 5px; + min-width: 52px; + } + + .post-format-options .post-format-title { + font-size: 11px; + } + + .post-format-options a div { + height: 28px; + width: 28px; + } + + .post-format-options a div:before { + font-size: 26px !important; + } + + /* General Metabox */ + .postbox { + font-size: 14px; + } + + #poststuff h3, + .metabox-holder h3 { + padding: 12px; + } + + .postbox .handlediv { + margin-top: 3px; + } + + /* Publish Metabox Options */ + #post-visibility-select { + line-height: 280%; + } + + .wp-core-ui .save-post-status.button { + top: 16px; + position: relative; + margin: 0 10px; + } + + .wp-core-ui .save-post-visibility, + .wp-core-ui .save-timestamp { + vertical-align: middle; + margin-right: 15px; + } + + .timestamp-wrap select#mm { + display: block; + width: 100%; + margin-bottom: 10px; + } + + .timestamp-wrap #jj, + .timestamp-wrap #aa, + .timestamp-wrap #hh, + .timestamp-wrap #mn { + padding: 12px 3px; + font-size: 14px; + margin-bottom: 5px; + width: auto; + text-align: center; + } + + /* Categories Metabox */ + ul.category-tabs { + margin: 30px 0 15px; + } + + ul.category-tabs li.tabs { + padding: 15px; + } + + ul#categorychecklist li { + margin-bottom: 15px; + } + + ul#categorychecklist ul { + margin-top: 15px; + } + + .category-add input[type=text], + .category-add select { + max-width: none; + margin-bottom: 15px; + } + + /* Tags Metabox */ + .tagsdiv .newtag { + width: 100%; + padding: 25px 10px; + margin-bottom: 15px; + } + + .tagchecklist { + margin: 25px 10px; + } + + .tagchecklist span { + font-size: 16px; + line-height: 120%; + } + + /* Revisions */ + #diff-next-revision, + #diff-previous-revision { + margin-top: -1em; + } + + table.diff { + -ms-word-break: break-all; + word-break: break-all; + word-wrap: break-word; + } + + /* TinyMCE Adjustments */ + .mceToolbar * { + white-space: normal !important; + } + + .mceToolbar tr, + .mceToolbar td { + float: left !important; + } + + .wp_themeSkin a.mceButton { + width: 30px; + height: 30px; + } + + .wp_themeSkin .mceButton .mceIcon { + margin-top: 5px; + margin-left: 5px; + } + + .wp_themeSkin .mceSplitButton { + margin-top: 1px; + } + + .wp_themeSkin .mceSplitButton td a.mceAction { + padding-top: 6px; + padding-bottom: 6px; + padding-left: 6px; + padding-right: 3px; + } + + .wp_themeSkin .mceSplitButton td a.mceOpen, + .wp_themeSkin .mceSplitButtonEnabled:hover td a.mceOpen { + padding-top: 6px; + padding-bottom: 6px; + background-position: 1px 6px; + } + + .wp_themeSkin table.mceListBox { + margin: 5px; + } + + div.quicktags-toolbar input { + padding: 10px 20px; + } + + #wp-content-editor-tools { + padding-top: 20px; + padding-right: 15px; + overflow: hidden; + } + + a.wp-switch-editor { + font-size: 16px; + line-height: 1em; + margin: 3px 0 0 7px; + padding: 12px 15px !important; + } + + #wp-content-media-buttons a { + font-size: 16px; + line-height: 37px; + height: 39px; + padding: 0 20px 0 15px; + } + + .wp-media-buttons span.wp-media-buttons-icon, + .wp-media-buttons span.jetpack-contact-form-icon { + width: 22px !important; + margin-top: -3px !important; + margin-left: -5px !important; + } + + .wp-media-buttons .add_media span.wp-media-buttons-icon:before, + .wp-media-buttons #insert-jetpack-contact-form span.jetpack-contact-form-icon:before { + font-size: 20px !important; + } + + #content_wp_fullscreen { + display: none; + } + + .misc-pub-section { + padding: 20px 10px 20px; + } + + .misc-pub-section > a { + float: right; + font-size: 16px; + } + + #delete-action, + #publishing-action { + line-height: 47px; + } + + /* Subsubsub Nav */ + .subsubsub { + font-size: 16px; + text-align: center; + margin-bottom: 15px; + } + + /* WP List Table Options & Filters */ + .tablenav { + height: auto; + } + + .tablenav.top { + margin: 0; + } + + .tablenav.bottom { + position: relative; + margin-top: 15px; + } + + .tablenav br { + display: none; + } + + .tablenav br.clear { + display: block; + } + + p.search-box { + float: none; + clear: both; + margin-top: 35px; + } + + p.search-box input[name="s"] { + height: auto; + float: none; + width: 100%; + margin-bottom: 10px; + -webkit-appearance: none; + } + + .tablenav.top .actions, .view-switch { + display: none; + } + + /* Pagination */ + .tablenav.top .displaying-num { + display: none; + } + + .tablenav.bottom .displaying-num { + position: absolute; + right: 0; + top: 10px; + font-size: 14px; + } + + .tablenav-pages { + width: 100%; + text-align: center; + margin: 0 0 25px; + } + + .tablenav.bottom .tablenav-pages { + margin-top: 25px; + } + + .tablenav.top .tablenav-pages.one-page { + display: none; + } + + .tablenav.bottom .tablenav-pages.one-page { + margin: 15px 0 0 0; + height: 0; + } + + .tablenav-pages .pagination-links .paging-input { + font-size: 18px; + } + + .tablenav-pages .pagination-links a { + padding: 8px 20px 11px; + font-size: 18px; + background: rgba(0, 0, 0, 0.05); + } + + .tablenav-pages .pagination-links .current-page { + padding: 10px; + font-size: 14px; + } + + /* WP List Table Adjustments: General */ + .form-wrap > p { + display: none; + } + + .comment-count { + font-size: 14px; + } + + /* Posts */ + .column-title { + width: 85%; + } + + .fixed .column-comments, .widefat .check-column { + width: 35px + } + + .fixed .column-date, .fixed .column-author, + .column-categories, .column-tags { + display: none; + } + + .widefat thead .check-column, .widefat tfoot .check-column { + padding: 10px 0 10px; + } + + .widefat * { + word-wrap: normal; + } + + /* Categories */ + .fixed .column-description { + display: none; + } + + .fixed .column-posts { + width: 50px; + } + + .fixed .column-slug { + width: 30%; + } + + /* Comments */ + .fixed .column-response { + width: 35%; + } + + /* Media */ + .fixed .column-parent { + display: none; + } + + /* Comments */ + .fixed .column-email, .fixed .column-name { + display: none; + } + + .fixed .column-role { + width: 35%; + } + + /* Plugins */ + .plugins .column-description { + width: 70%; + } + + #wpbody-content .plugins .plugin-title { + white-space: normal; + width: 30%; + } + + /* Updates */ + #wpbody-content #update-themes-table .plugin-title { + width: auto; + } + + /* Form Tables */ + .form-table { + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + .form-table th, + .form-table td { + display: block; + width: auto; + vertical-align: middle; + } + + .form-table .color-palette td { + display: table-cell; + width: 15px; + } + + .form-table table.color-palette { + margin-right: 10px; + } + + textarea, + input { + font-size: 16px; + } + + .form-table td input[type="text"], + .form-table td input[type="password"], + .form-table td select, + .form-table td textarea, + .form-table span.description, + #profile-page .form-table textarea { + width: 100%; + font-size: 16px; + line-height: 1.5; + padding: 7px 10px; + display: block; + max-width: none; + box-sizing: border-box; + -mox-box-sizing: border-box; + } + + input[type=text].small-text, + input[type=search].small-text, + input[type=password].small-text, + input[type=number].small-text, + input[type="number"].small-text, + .form-table input[type=text].small-text { + width: auto; + max-width: 55px; + display: inline; + padding: 3px 6px; + margin: 0 3px; + } + + #pass-strength-result { + width: 100%; + box-sizing: border-box; + -mox-box-sizing: border-box; + padding: 8px; + } + + .form-table span.description { + padding: 4px 0 0; + line-height: 1.4em; + } + + .form-table th { + padding-top: 10px; + padding-bottom: 0; + border-bottom: 0; + } + + .form-table td { + padding-top: 8px; + padding-left: 0; + } + + .form-table input.regular-text { + width: 100%; + } + + .form-table label { + font-size: 14px; + } + + .form-table fieldset label { + display: block; + } + + #utc-time { + margin-top: 10px; + } + + #utc-time, + #local-time { + display: block; + float: none; + padding: 0; + line-height: 2; + } + + /* Add/Edit Media */ + .wp_attachment_details label[for="content"] { + font-size: 14px; + line-height: 1.5em; + } + + #media-items { + width: 100%; + } + + .media-modal { + width: auto; + } + + .media-frame { + overflow: auto; + } + + .media-frame-menu { + position: relative; + width: auto; + } + + .media-menu { + border-right: none; + position: relative; + border-bottom: 1px solid #dddddd; + overflow: hidden; + } + + .media-menu .separator { + display: none; + } + + .media-menu a { + float: left; + width: 40%; + } + + .media-frame-router, .media-frame-content, .media-frame-toolbar { + left: auto; + right: auto; + top: auto; + bottom: auto; + position: relative; + } + + .media-frame-title { + top: auto; + left: auto; + right: 0; + height: auto; + } + + .media-frame-router { + margin-top: 10px; + } + + .media-frame-title h1 { + line-height: 3; + font-size: 18px; + } + + .media-router { + bottom: -2px; + } + + .media-frame-content { + min-height: 300px; + max-height: 500px; + overflow: auto; + } + + .media-toolbar-primary, .media-toolbar-secondary { + height: auto; + } + + .uploader-inline h3 { + margin: 0 0 .8em 0; + } + + .uploader-inline-content { + top: auto; + } + + .uploader-inline-content .upload-ui { + margin: 0; + } + + .attachments-browser .attachments, .attachments-browser .uploader-inline { + position: relative; + margin-right: 180px; + } + + /* Links */ + .link-manager-php #posts-filter { + margin-top: 25px; + } + + .link-manager-php .tablenav.bottom { + overflow: hidden; + } + + .links-table #link_rel { + max-width: none; + } + + .links-table th, + .links-table td { + padding: 10px 0; + } + + /** + * Nav Menus + * ---------------------------------------------------------------------------- + */ + body.nav-menus-php { + min-width: 0 !important; + } + + #nav-menus-frame { + margin-left: 0; + float: none; + width: 100%; + } + + #wpbody-content #menu-settings-column { + display: block; + width: 100%; + float: none; + margin-left: 0; + } + + #side-sortables .add-menu-item-tabs { + margin: 15px 0; + } + + ul.add-menu-item-tabs li.tabs { + padding: 15px; + } + + .nav-menus-php .item-controls .item-type { + margin-top: 2px; + } + + .nav-menus-php .customlinkdiv .howto input { + width: 65%; + } + + .nav-menus-php .quick-search { + width: 85%; + } + + #menu-management-liquid { + margin-top: 25px; + } + + .nav-menus-php .menu-name-label.howto span { + margin-top: 13px + } + + .menu-name-label #menu-name { + margin-top: 4px; + } + + .nav-menus-php .major-publishing-actions .publishing-action { + margin-top: 6px; + } + + .nav-menus-php .delete-action { + font-size: 14px; + line-height: 50px; + margin-top: 12px; + } + + .menu-item-bar .menu-item-handle, + .menu-item-settings, + .description-wide { + width: auto; + } + + .menu-item-settings { + padding: 10px; + } + + .menu-item-settings .description-thin, + .menu-item-settings .description-wide { + width: 100%; + height: auto; + } + + .menu-item-settings input { + width: 100%; + } + + /* Theme Management Page */ + #current-theme.has-screenshot { + padding: 0; + clear: both; + } + + #current-theme img { + float: none; + margin-left: 0; + margin-bottom: 15px; + } + + #current-theme.has-screenshot img.hide-if-no-customize { + display: block; + } + + .available-theme .action-links .delete-theme { + float: none; + margin: 0; + padding: 0; + clear: both; + } + + .available-theme .action-links .delete-theme a { + padding: 0; + } + + /* Widget Management Page (Needs UX work on mobile) */ + #templateside { + float: none; + width: auto; + } + + #templateside li { + margin: 0; + } + + #templateside li a { + display: block; + padding: 5px; + } + + #templateside .highlight { + padding: 5px; + margin-left: -5px; + margin-top: -5px; + } + + #template div { + float: none; + margin: 0; + width: auto; + } + + #template textarea { + width: 100%; + } + + .fileedit-sub .alignright { + margin-top: 15px; + } + + /* Plugin/Theme Management Page */ + .wp-list-table.plugins { + position: relative; + margin-top: 35px; + margin-bottom: 50px; + } + + .wp-list-table.plugins thead .column-description, + #wpbody-content .wp-list-table.plugins tfoot .column-description, + .wp-list-table.plugins th#description { + display: none; + } + + #wpbody-content .wp-list-table.plugins, + #wpbody-content .wp-list-table.plugins thead, + #wpbody-content .wp-list-table.plugins tbody, + #wpbody-content .wp-list-table.plugins tr, + #wpbody-content .wp-list-table.plugins .column-description, + #wpbody-content .wp-list-table.plugins .plugin-title, + #wpbody-content .wp-list-table.plugins .theme-title, + #wpbody-content .wp-list-table.plugins .plugin-update, + #wpbody-content .wp-list-table.plugins .manage-column.column-name { + display: block; + width: auto; + } + + .wp-list-table.plugins thead, + .wp-list-table.plugins tfoot { + position: absolute; + top: -35px; + left: 0; + right: 0; + width: auto; + height: 35px; + } + + .wp-list-table.plugins tfoot { + bottom: -35px; + top: auto; + } + + .active, .inactive { + padding-top: 0; + } + + .wp-list-table.plugins .plugin-title, + .wp-list-table.plugins .theme-title { + padding-top: 13px; + padding-bottom: 4px; + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td, + .wp-list-table.plugins .plugin-title, + .wp-list-table.plugins .theme-title, + .wp-list-table.plugins tbody th { + box-shadow: none; + -webkit-box-shadow: none; + } + + .plugins tbody { + padding: 1px 0 0; + } + + /* Set drop shadow again per original mp6 plugin settings at line 1265 of colors-mp6.css in r687296, remove when original styles have been corrected */ + .plugins tr.active + tr.inactive td.column-description { + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + -ms-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + -o-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); + } + + .plugins tr.active + tr.inactive th.check-column, + .plugins tr.active + tr.inactive td { + border-top: none; + } + + .wp-list-table.plugins .column-description { + padding-top: 0; + } + + .wp-list-table.plugins .manage-column.column-name, + .wp-list-table.plugins .column-description, + .wp-list-table.plugins .plugin-title, + .wp-list-table.plugins .theme-title { + padding-right: 12px; + padding-left: 46px; + } + + .wp-list-table.plugins tr { + position: relative; + } + + .wp-list-table.plugins th.check-column, + .wp-list-table.plugins tr.update th.check-column { + position: absolute; + height: auto; + top: 0; + bottom: 0; + left: 0; + padding-left: 2px; + padding-top: 18px; + } + + .wp-list-table.plugins thead th.check-column, + .wp-list-table.plugins tfoot th.check-column { + padding-left: 3px; + padding-top: 11px; + background: none; + } + + .widefat tbody th.check-column input[type="checkbox"] { + margin-top: -3px; + margin-left: 9px; + } + + .wp-list-table.plugins .active .check-column input, + .wp-list-table.plugins .update .check-column input { + margin-left: 6px; + } + + .wp-list-table.plugins thead .check-column input, + .wp-list-table.plugins tfoot .check-column input { + margin-top: -6px; + } + + .wp-list-table.plugins .active th.check-column { + background: none; + } + + .wp-list-table.plugins .plugin-title strong, + .wp-list-table.plugins .theme-title strong { + font-size: 1.4em; + line-height: 1.6em; + } + + /* Dashboard */ + #dashboard_recent_comments #the-comment-list .comment-item .avatar { + height: 30px; + width: 30px; + margin: 4px 10px 5px 0; + } + + /* About Page */ + .about-wrap .feature-section.two-col div { + width: 100%; + margin: 0; + float: none; + } + + .about-wrap .three-col.about-updates .col-1, + /*.about-wrap .three-col.about-updates .col-2,*/ + .about-wrap .three-col.about-updates .col-3 { + padding: 0; + } + + .about-wrap .three-col.about-updates .col-1 { + width: 100%; + padding-right: 210px; + } + + .about-wrap .three-col.about-updates .col-2 { + position: relative; + float: right; + width: 180px; + margin-left: -100%; + } + + .about-wrap .three-col.about-updates .col-3 { + width: 100%; + } + + .about-wrap .about-password-meter input, + .about-wrap .about-password-meter #pass-strength-result { + width: 99%; + } + + /* Moderate Comment */ + .comment-ays { + border-bottom: none; + } + + #wpfooter { + display: none; + } + + #comments-form .checkforspam { + display: none; + } +} + +/* Tiny screens [ = smaller than 400 wide, 600 tall] */ +@media screen and (max-width: 400px), screen and (max-height: 600px) { + /* Align Add Media + Visual + Text tabs */ + #wp-content-media-buttons a { + font-size: 14px; + padding: 0 10px 0 10px; + } + + .media-modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + .media-modal-backdrop { + position: fixed; + } + + .attachments-browser .attachment, + .attachments-browser .attachment-preview { + max-width: 100%; + } + + .attachments-browser .media-toolbar-primary input.search { + max-width: 150px; + } + + .uploader-inline-content { + position: relative; + } + + .media-sidebar .setting input[type="checkbox"], + .media-sidebar .field input[type="checkbox"] { + width: 25px; + } + + /* Don't bother with title for phone-size */ + .media-frame-title { + display: none; + } + + .media-frame-toolbar { + position: absolute; + bottom: 0px; + left: 0; + right: 0; + background: #FFF; + border-top: 1px solid #DEDEDE; + } + + .media-toolbar { + position: relative; + } + + .media-frame { + overflow: hidden; + } + + .media-frame .attachments-browser { + padding-bottom: 300px; + } + + .attachments-browser .attachments { + top: 0; + } + + .attachment-details h3 { + margin-top: 45px; + } + + /* Image From Link */ + .embed-link-settings, + .embed-image-settings { + padding-bottom: 52px; + } + + /* Gallery */ + .media-frame.hide-router .media-frame-content { + top: 0; + border-top: none; + } + + .gallery-settings h3 { + margin-top: 45px; + } +} + +@media only screen and (max-width: 500px) { + .about-wrap { + margin-right: 20px; + margin-left: 10px; + } + + .about-wrap h1, + .about-text { + margin-right: 0; + } + + .about-text { + margin-bottom: 0.25em; + } + + .about-wrap .wp-badge { + position: relative; + margin-bottom: 1.5em; + width: 100%; + } + + .about-wrap .feature-section.three-col div { + width: 100%; + float: none; + } + + .about-wrap .three-col.about-updates .col-1 { + padding: 0; + float: none; + } + + .about-wrap .three-col.about-updates .col-2 { + margin: 0 0 20px; + width: 100%; + float: none; + } + + .about-wrap .about-passwords { + margin: 20px -20px; + } + +} + +@media screen and ( max-width: 782px ) { + /* Toolbar Touchification*/ + html.wp-toolbar { + padding-top: 46px; + } + + html #wpadminbar { + left: 0 !important; + z-index: 500 !important; + height: 46px; + min-width: 300px; + + -webkit-transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + -webkit-transition: 0; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + transition: 0; + } + + #wpadminbar * { + font: normal 14px/32px "Open Sans", sans-serif; + } + + #wpadminbar .quicklinks li > a { + padding: 0; + height: 46px; + line-height: 46px; + width: auto; + } + + #wpadminbar .ab-icon { + font: 40px/1 dashicons !important; + margin: 0; + padding: 0; + width: 50px; + height: 46px; + } + + #wpadminbar .ab-icon:before { + text-align: center; + } + + #wpadminbar .ab-submenu { + padding: 0; + } + + #wpadminbar .ab-label { + display: none; + } + + #wpadminbar .menupop li:hover > .ab-sub-wrapper, + #wpadminbar .menupop li.hover > .ab-sub-wrapper { + margin-top: -46px; + } + + #wpadminbar .ab-top-menu .menupop .ab-sub-wrapper .menupop > .ab-item { + padding-right: 30px; + } + + #wpadminbar .menupop .menupop > .ab-item:before { + top: 10px; + right: 6px; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper .ab-item { + font-size: 16px; + padding: 6px 15px 12px; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper a:empty { + display: none; + } + + /* WP logo */ + #wpadminbar #wp-admin-bar-wp-logo > .ab-item { + padding: 0; + } + + #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { + padding: 0; + width: 50px; + height: 46px; + text-align: center; + vertical-align: top; + } + + #wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before { + font: 28px/1 'dashicons' !important; + top: -3px; + } + + #wpadminbar .ab-icon, + #wpadminbar .ab-item::before { + padding: 0; + } + + /* My Sites and "Site Title" menu */ + #wpadminbar #wp-admin-bar-my-sites > .ab-item, + #wpadminbar #wp-admin-bar-site-name > .ab-item { + text-indent: 100%; + text-overflow: clip !important; + width: 50px; + padding: 0; + color: #999; + position: relative; + } + + #wpadminbar #wp-admin-bar-my-sites > .ab-item:before, + #wpadminbar #wp-admin-bar-site-name > .ab-item:before { + display: block; + text-indent: 0; + font: normal 35px/1 'dashicons' !important; + speak: none; + top: 5px; + width: 50px; + text-align: center; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + #wpadminbar #wp-admin-bar-site-name > .ab-item:before { + content: '\f102'; + padding: 0; + } + + #wpadminbar #wp-admin-bar-my-sites > .ab-item:before { + content: '\f112'; + font-size: 28px !important; + padding-top: 8px; + padding-left: 12px; + } + + #wpadminbar #wp-admin-bar-appearance { + margin-top: 0; + } + + #wpadminbar .quicklinks li .blavatar:before { + display: none; + } + + /* Search */ + #wpadminbar #wp-admin-bar-search { + display: none; + } + + /* New Content */ + #wpadminbar #wp-admin-bar-new-content .ab-icon:before { + top: 0; + line-height: 53px; + height: 46px !important; + text-align: center; + width: 50px; + display: block; + } + + /* Updates */ + #wpadminbar #wp-admin-bar-updates { + text-align: center; + } + + #wpadminbar #wp-admin-bar-updates .ab-icon:before { + top: 3px; + } + + /* Comments */ + #wpadminbar #wp-admin-bar-comments .ab-icon { + margin: 0; + } + + #wpadminbar #wp-admin-bar-comments .ab-icon:before { + display: block; + font-size: 34px; + height: 46px; + line-height: 47px; + top: 0; + } + + /* My Account */ + #wpadminbar #wp-admin-bar-my-account > a { + position: relative; + white-space: nowrap; + text-indent: 100%; + width: 28px; + padding: 0 10px; + } + + #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img { + position: absolute; + top: 13px; + right: 10px; + width: 26px; + height: 26px; + } + + #wpadminbar #wp-admin-bar-user-actions.ab-submenu { + padding: 0; + } + + #wpadminbar #wp-admin-bar-user-actions.ab-submenu img.avatar { + display: none; + } + + #wpadminbar #wp-admin-bar-my-account.with-avatar #wp-admin-bar-user-actions > li { + margin: 0; + } + + #wpadminbar #wp-admin-bar-user-info .display-name { + height: auto; + font-size: 16px; + line-height: 24px; + color: #eee; + } + + #wpadminbar #wp-admin-bar-user-info a { + padding-top: 4px; + } + + #wpadminbar #wp-admin-bar-user-info .username { + line-height: 0.8 !important; + margin-bottom: -2px; + } + + /* Hide all third party items */ + #wp-admin-bar-top-secondary > li { + display: none; + } + + #wp-admin-bar-root-default li#wp-admin-bar-wp-logo, + #wp-admin-bar-root-default li#wp-admin-bar-my-sites, + #wp-admin-bar-root-default li#wp-admin-bar-site-name, + #wp-admin-bar-root-default li#wp-admin-bar-new-content, + #wp-admin-bar-root-default li#wp-admin-bar-comments, + #wp-admin-bar-root-default li#wp-admin-bar-new-content, + #wp-admin-bar-top-secondary li#wp-admin-bar-my-account { + display: block; + } + + #wpadminbar ul#wp-admin-bar-root-default > li { + margin-right: 0; + } + + /* Experimental fix for touch toolbar dropdown positioning */ + #wpadminbar .ab-top-menu, + #wpadminbar .ab-top-secondary, + #wpadminbar #wp-admin-bar-wp-logo, + #wpadminbar #wp-admin-bar-my-sites, + #wpadminbar #wp-admin-bar-site-name, + #wpadminbar #wp-admin-bar-updates, + #wpadminbar #wp-admin-bar-comments, + #wpadminbar #wp-admin-bar-new-content, + #wpadminbar #wp-admin-bar-my-account { + position: static; + } + + #wpadminbar #wp-admin-bar-comments, + #wpadminbar #wp-admin-bar-new-content, + #wpadminbar #wp-admin-bar-my-account { + float: right; + } + + #wpadminbar #wp-admin-bar-comments .ab-sub-wrapper, + #wpadminbar #wp-admin-bar-new-content .ab-sub-wrapper, + #wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper { + right: 0; + left: auto; + } + + #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-comments { + margin-right: 100px; + } + + #wpadminbar ul#wp-admin-bar-root-default > li#wp-admin-bar-new-content { + margin-right: -100px; + } + + #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { + margin-right: -150px; + } + + .network-admin #wpadminbar ul#wp-admin-bar-top-secondary > li#wp-admin-bar-my-account { + margin-right: 0; + } +} + +/* Horizontal */ +@media screen and (max-width: 480px) and (orientation: landscape) { + #wpadminbar { + position: absolute; + } +} + +/* Smartphone */ +@media screen and (max-width: 480px) { + #moby6-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 400; + } + + #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { + position: fixed; + width: 100%; + left: 0; + } + + #wpadminbar .menupop .menupop > .ab-item:before { + display: none; + } + + #wpadminbar #wp-admin-bar-wp-logo.menupop .ab-sub-wrapper { + margin-left: 0; + } + + #wpadminbar #wp-admin-bar-updates, + #wpadminbar #wp-admin-bar-view, + #wpadminbar #wp-admin-bar-edit { + display: none; + } +} + +@media screen and (max-width: 350px) { + #wpadminbar #wp-admin-bar-wp-logo { + display: none; + } +} \ No newline at end of file diff --git a/src/wp-admin/js/common.js b/src/wp-admin/js/common.js index dc6093eb95..6ef92d5761 100644 --- a/src/wp-admin/js/common.js +++ b/src/wp-admin/js/common.js @@ -530,6 +530,175 @@ stickyMenu = { stickyMenu.init(); +var moby6 = { + + init: function() { + // cached selectors + this.$html = $( document.documentElement ); + this.$body = $( document.body ); + this.$wpwrap = $( '#wpwrap' ); + this.$wpbody = $( '#wpbody' ); + this.$adminmenu = $( '#adminmenu' ); + this.$overlay = $( '#moby6-overlay' ); + this.$toolbar = $( '#wp-toolbar' ); + this.$toolbarPopups = this.$toolbar.find( 'a[aria-haspopup="true"]' ); + + // Modify functionality based on custom activate/deactivate event + this.$html + .on( 'activate.moby6', function() { moby6.activate(); } ) + .on( 'deactivate.moby6', function() { moby6.deactivate(); } ); + + // Toggle sidebar when toggle is clicked + $( '#wp-admin-bar-toggle-button' ).on( 'click', function(evt) { + evt.preventDefault(); + moby6.$wpwrap.toggleClass( 'moby6-open' ); + } ); + + // Trigger custom events based on active media query. + this.matchMedia(); + $( window ).on( 'resize', $.proxy( this.matchMedia, this ) ); + }, + + activate: function() { + + window.stickymenu && window.stickymenu.disable(); + + if ( ! moby6.$body.hasClass( 'auto-fold' ) ) + moby6.$body.addClass( 'auto-fold' ); + + this.modifySidebarEvents(); + this.disableDraggables(); + this.movePostSearch(); + + }, + + deactivate: function() { + + window.stickymenu && window.stickymenu.enable(); + + this.enableDraggables(); + this.removeHamburgerButton(); + this.restorePostSearch(); + + }, + + matchMedia: function() { + clearTimeout( this.resizeTimeout ); + this.resizeTimeout = setTimeout( function() { + + if ( ! window.matchMedia ) + return; + + if ( window.matchMedia( '(max-width: 782px)' ).matches ) { + if ( moby6.$html.hasClass( 'touch' ) ) + return; + moby6.$html.addClass( 'touch' ).trigger( 'activate.moby6' ); + } else { + if ( ! moby6.$html.hasClass( 'touch' ) ) + return; + moby6.$html.removeClass( 'touch' ).trigger( 'deactivate.moby6' ); + } + + if ( window.matchMedia( '(max-width: 480px)' ).matches ) { + moby6.enableOverlay(); + } else { + moby6.disableOverlay(); + } + + }, 150 ); + }, + + enableOverlay: function() { + if ( this.$overlay.length === 0 ) { + this.$overlay = $( '
' ) + .insertAfter( '#wpcontent' ) + .hide() + .on( 'click.moby6', function() { + moby6.$toolbar.find( '.menupop.hover' ).removeClass( 'hover' ); + $( this ).hide(); + }); + } + this.$toolbarPopups.on( 'click.moby6', function() { + moby6.$overlay.show(); + }); + }, + + disableOverlay: function() { + this.$toolbarPopups.off( 'click.moby6' ); + this.$overlay.hide(); + }, + + modifySidebarEvents: function() { + this.$body.off( '.wp-mobile-hover' ); + this.$adminmenu.find( 'a.wp-has-submenu' ).off( '.wp-mobile-hover' ); + + var scrollStart = 0; + this.$adminmenu.on( 'touchstart.moby6', 'li.wp-has-submenu > a', function() { + scrollStart = $( window ).scrollTop(); + }); + + this.$adminmenu.on( 'touchend.moby6', 'li.wp-has-submenu > a', function( e ) { + e.preventDefault(); + + if ( $( window ).scrollTop() !== scrollStart ) + return false; + + $( this ).find( 'li.wp-has-submenu' ).removeClass( 'selected' ); + $( this ).parent( 'li' ).addClass( 'selected' ); + }); + }, + + disableDraggables: function() { + this.$wpbody + .find( '.hndle' ) + .removeClass( 'hndle' ) + .addClass( 'hndle-disabled' ); + }, + + enableDraggables: function() { + this.$wpbody + .find( '.hndle-disabled' ) + .removeClass( 'hndle-disabled' ) + .addClass( 'hndle' ); + }, + + removeHamburgerButton: function() { + if ( this.hamburgerButtonView !== undefined ) + this.hamburgerButtonView.destroy(); + }, + + movePostSearch: function() { + this.searchBox = this.$wpbody.find( 'p.search-box' ); + if ( this.searchBox.length ) { + this.searchBox.hide(); + if ( this.searchBoxClone === undefined ) { + this.searchBoxClone = this.searchBox.first().clone().insertAfter( 'div.tablenav.bottom' ); + } + this.searchBoxClone.show(); + } + }, + + restorePostSearch: function() { + if ( this.searchBox !== undefined ) { + this.searchBox.show(); + if ( this.searchBoxClone !== undefined ) + this.searchBoxClone.hide(); + } + } +}; + +// Fire moby6.init when document is ready +$( document ).ready( $.proxy( moby6.init, moby6 ) ); + +// make Windows 8 devices playing along nicely +if ( '-ms-user-select' in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/) ) { + var msViewportStyle = document.createElement( 'style' ); + msViewportStyle.appendChild( + document.createTextNode( '@-ms-viewport{width:auto!important}' ) + ); + document.getElementsByTagName( 'head' )[0].appendChild( msViewportStyle ); +} + // internal use $(document).bind( 'wp_CloseOnEscape', function( e, data ) { if ( typeof(data.cb) != 'function' ) diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php index 9498381c1e..9f624dc9c5 100644 --- a/src/wp-includes/admin-bar.php +++ b/src/wp-includes/admin-bar.php @@ -155,6 +155,26 @@ function wp_admin_bar_wp_menu( $wp_admin_bar ) { ) ); } +/** + * Add the sidebar toggle button. + * + * @since 3.8.0 + * + * @param WP_Admin_Bar $wp_admin_bar + */ +function wp_admin_bar_sidebar_toggle( $wp_admin_bar ) { + if ( is_admin() ) { + $wp_admin_bar->add_menu( array( + 'id' => 'toggle-button', + 'title' => '', + 'href' => '#', + 'meta' => array( + 'title' => __( 'Menu' ), + ), + ) ); + } +} + /** * Add the "My Account" item. * diff --git a/src/wp-includes/class-wp-admin-bar.php b/src/wp-includes/class-wp-admin-bar.php index d35886d471..915478e935 100644 --- a/src/wp-includes/class-wp-admin-bar.php +++ b/src/wp-includes/class-wp-admin-bar.php @@ -482,6 +482,7 @@ class WP_Admin_Bar { add_action( 'admin_bar_menu', 'wp_admin_bar_my_account_item', 7 ); // Site related. + add_action( 'admin_bar_menu', 'wp_admin_bar_sidebar_toggle', 0 ); add_action( 'admin_bar_menu', 'wp_admin_bar_wp_menu', 10 ); add_action( 'admin_bar_menu', 'wp_admin_bar_my_sites_menu', 20 ); add_action( 'admin_bar_menu', 'wp_admin_bar_site_menu', 30 );