From 1035906de6aa47e742dba988ebdfdc622a18100c Mon Sep 17 00:00:00 2001 From: Drew Jaynes Date: Fri, 4 Dec 2015 12:23:24 +0000 Subject: [PATCH] First pass of the 4.4 about page. Adds strings (not yet translatable) and screen shots (not CDN). Props wonderboymusic, markjaquith, helen, nacin, liljimmi, mordauk, melchoyce, ryelle, ocean90, DrewAPicture See #34663. git-svn-id: https://develop.svn.wordpress.org/trunk@35763 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 217 +++++++++++++++++------------------- src/wp-admin/css/about.css | 109 ++++++++++++++---- src/wp-admin/css/common.css | 13 +++ 3 files changed, 206 insertions(+), 133 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 2d5bab1ef0..8bda1e58cd 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -16,84 +16,19 @@ wp_localize_script( 'mediaelement', '_wpmejsSettings', array( 'pauseOtherPlayers' => '' ) ); +if ( current_user_can( 'install_plugins' ) ) { + add_thickbox(); + wp_enqueue_script( 'plugin-install' ); +} + + +wp_oembed_add_host_js(); + $title = __( 'About' ); list( $display_version ) = explode( '-', $wp_version ); include( ABSPATH . 'wp-admin/admin-header.php' ); - -$video_url = 'https://videopress.com/embed/T54Iy7Tw'; -$locale = str_replace( '_', '-', get_locale() ); -if ( 'en-AU' !== $locale ) { - list( $locale ) = explode( '-', $locale ); -} -if ( 'en' !== $locale ) { - $video_url = add_query_arg( 'defaultLangCode', $locale, $video_url ); -} - -$major_features = array( - array( - 'src' => array( - 'mp4' => '//s.w.org/images/core/4.3/formatting.mp4', - 'ogv' => '//s.w.org/images/core/4.3/formatting.ogv', - 'webm' => '//s.w.org/images/core/4.3/formatting.webm', - ), - 'heading' => __( 'Formatting Shortcuts' ), - /* Translators: 1: asterisks; 2: number sign; */ - 'description' => sprintf( __( 'Your writing flow just got faster with new formatting shortcuts in WordPress 4.3. Use asterisks to create lists and number signs to make a heading. No more breaking your flow; your text looks great with a %1$s and a %2$s.' ), '*', '#' ), - ), - array( - 'src' => '//s.w.org/images/core/4.3/menu-customizer.png', - 'heading' => __( 'Menus in the Customizer' ), - 'description' => __( 'Create your menu, update it, and assign it, all while live-previewing in the customizer. The streamlined customizer design provides a mobile-friendly and accessible interface. With every release, it becomes easier and faster to make your site just the way you want it.' ), - ), - array( - 'src' => '//s.w.org/images/core/4.3/better-passwords.png', - 'heading' => __( 'Better Passwords' ), - 'description' => __( 'Keep your site more secure with WordPress’ improved approach to passwords. Instead of receiving passwords via email, you’ll get a password reset link. When you add new users to your site or edit a user profile, WordPress will automatically generate a secure password.' ), - ), - array( - 'src' => '//s.w.org/images/core/4.3/site-icon-customizer.png', - 'heading' => __( 'Site Icons' ), - 'description' => __( 'Site icons represent your site in browser tabs, bookmark menus, and on the home screen of mobile devices. Add your unique site icon in the customizer; it will even stay in place when you switch themes. Make your whole site reflect your brand.' ), - ), -); -shuffle( $major_features ); - -$minor_features = array( - array( - 'src' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBmaWxsPSIjMDBhMGQyIiBkPSJNNTAgMjE1aDI0MHYzMEg1MHpNNTAgMjc1aDI0MHYzMEg1MHpNNTAgMTU1aDI0MHYzMEg1MHpNNTAgOTVoMjQwdjMwSDUwek0zMTAuMSA5NWwxOS45IDMwIDIwLjEtMzAiLz48L3N2Zz4=', - 'heading' => __( 'A smoother admin experience' ), - 'description' => __( 'Refinements to the list view across the admin make your WordPress more accessible and easier to work with on any device.' ), - ), - array( - 'src' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTUgMmgxMHEuODIgMCAxLjQxLjU5VDE3IDR2OHEwIC44Mi0uNTkgMS40MVQxNSAxNGgtMmwtNSA1di01SDVxLS44MiAwLTEuNDEtLjU5VDMgMTJWNHEwLS44Mi41OS0xLjQxVDUgMnptOC41IDguNUwxMSA4bDIuNS0yLjUtMS0xTDEwIDcgNy41IDQuNWwtMSAxTDkgOGwtMi41IDIuNSAxIDFMMTAgOWwyLjUgMi41eiIvPjwvc3ZnPg==', - 'heading' => __( 'Comments turned off on pages' ), - 'description' => __( 'All new pages that you create will have comments turned off. Keep discussions to your blog, right where they’re supposed to happen.' ), - ), - array( - 'src' => 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0iIzAwYTBkMiIgZD0iTTI5LjMyOCA1LjcxMnEuMDQ4LS4xNDQuMDk2LS4zODR0LS4wNjQtLjgxNi0uNTI4LS45NzZxLS4zODQtLjM2OC0uODcyLS40NjR0LS43OTIgMGwtLjI4OC4wOHEtMS40NTYuNzItNS44OCAzLjczNnQtNi4zOTIgNS4xNzZxLS43MzYuODMyLTEuNDA4IDIuMzJ0LS44OCAzIC41NDQgMi4zOTJxLjgzMi43MzYgMi4zNDQuNTc2dDMuMDcyLS44MjQgMi4yNDgtMS4zNTJxMi4xNDQtMi4xNDQgNS4xNjgtNi42NTZ0My42MzItNS44MDh6TTIuMjQgMjguMjRxMS4wNTYtLjY4OCAxLjcxMi0xLjUyOHQuOTUyLTEuNjE2LjU0NC0xLjUyLjcyLTEuNDggMS4yNC0xLjI4cTEuMDg4LS44IDIuNTA0LS43MDR0Mi40MjQgMS4xNjhxLjgxNi44OC44MjQgMi42NHQtMS4wOCAyLjg5NnEtMS4yMTYgMS4xMi0yLjkwNCAxLjYyNHQtMy40MjQuNDI0LTMuNTEyLS42MjR6Ii8+PC9zdmc+', - 'heading' => __( 'Customize your site quickly' ), - 'description' => __( 'Wherever you are on the front-end, you can click the customize link in the toolbar to swiftly make changes to your site.' ), - ), -); - -$tech_features = array( - array( - 'heading' => __( 'Taxonomy Roadmap' ), - 'description' => __( 'Terms shared across multiple taxonomies are now split into separate terms.' ), - ), - array( - 'heading' => __( 'Template Hierarchy' ), - /* Translators: 1: singular.php; 2: single.php; 3:page.php */ - 'description' => sprintf( __( 'Added %1$s as a fallback for %2$s and %3$s' ), 'singular.php', 'single.php', 'page.php' ), - ), - array( - 'heading' => 'WP_List_Table', - 'description' => __( 'List tables can and should designate a primary column.' ), - ), -); - ?>

@@ -107,64 +42,118 @@ $tech_features = array( -
- - +
+

+
+ +
+
+
+

+

+

+
+
+ +
+
+
+
+ +
+
-
+
-
- $feature['src']['mp4'], - 'ogv' => $feature['src']['ogv'], - 'webm' => $feature['src']['webm'], - 'loop' => true, - 'autoplay' => true, - 'width' => 500, - 'height' => 284 - ) ); - - // Image. - else: - ?> - - +
-

-

- -
- -
-
-
- -
-

-

+

+

-
+
+ +
+
+
+ +
+

+

+
+
+
+ +
+

+

+
+
+ +
+

-
- +
-

-

+

+
+

+

WordPress REST API'; + } else { + $plugin_link = 'WordPress REST API'; + } + + /* translators: WordPress REST API plugin link */ + printf( ( 'Infrastructure is the first part of a multi-stage rollout for the REST API, which also targets inclusion of core endpoints in an upcoming release. To get a sneak peek of the core endpoints, and for more on extending the REST API, check out the official %s plugin.' ), + $plugin_link + ); + ?>

+
+
+
+ +
+
+

+

add_term_meta()', + 'get_term_meta()', + 'update_term_meta()' + ); + ?>

+
+
+

+

WP_Comment_Query' ); + ?>

+
+
+

+

WP_Term', + 'WP_Comment', + 'WP_Network' + ); + ?>

-
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index b9b8107e35..5275d183e0 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -178,12 +178,12 @@ font-size: 2.2em; font-weight: 300; line-height: 1.3; - text-align: left; + text-align: center; } .about-wrap .headline-feature h3 { - margin-top: 30px; - text-align: center; + margin-top: 0; + text-align: left; } .about-wrap .feature-list h2 { @@ -200,6 +200,19 @@ margin-top: 0.6em; } +.about-wrap .two-col-text { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 40px; + -moz-column-gap: 40px; + column-gap: 40px; +} + +.about-wrap .two-col-text p:first-of-type { + margin-top: 0; +} + /* 2.2 - Structure */ .about-wrap .feature-video { @@ -226,27 +239,50 @@ .about-wrap .feature-section { overflow: hidden; padding: 0 0 40px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); } -.about-wrap .headline-feature .feature-section { +.about-wrap .headline-feature { margin: 0 auto; - max-width: 95%; + max-width: 80%; } .about-wrap .feature-section .media-container { - border: 1px solid #ddd; overflow: hidden; } -.about-wrap .feature-section .svg-container { - padding: 50px 0; - text-align: center; - background-color: #e1e1e3; +.about-wrap .headline-feature .col { + width: 65.2%; } -.about-wrap .feature-section .svg-container img { - max-width: 150px; +.about-wrap .headline-feature .col.feature-image { + width: 30%; +} + +.about-wrap .headline-feature .vertical-screen { + float: right; + margin-left: 40px; + max-width: 100%; +} + +.about-wrap .headline-feature .horizontal-screen { + margin-top: 20px; + max-width: 100%; +} + +.about-wrap .embed-container { + text-align: center; +} + +.about-wrap .embed-cloudup iframe { + height: 299px; +} + +.about-wrap .embed-container iframe { + max-width: 100%; +} + +.about-wrap .wp-embedded-content { + max-width: 100%; } .about-wrap .feature-section:not(.under-the-hood) .col { @@ -378,7 +414,47 @@ width: 100%; margin: 40px 0 0; padding: 0 0 40px; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); + } + + .about-wrap .headline-feature { + position: relative; + } + + .about-wrap .headline-feature .col.feature-image { + position: absolute; + bottom: 0; + right: 0; + width: 40%; + } + + .about-wrap .headline-feature .horizontal-image { + position: relative; + } + + .about-wrap .headline-feature .horizontal-image:before { + display: block; + content: ""; + width: 100%; + padding-top: 80%; + } + + .about-wrap .headline-feature .horizontal-image > .content { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + .about-wrap .headline-feature .horizontal-image img { + position: absolute; + bottom: 0; + } + + .about-wrap .two-col-text { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; } .about-wrap .three-col img { @@ -422,11 +498,6 @@ width: 100%; } - .about-wrap .feature-section .svg-container { - padding-top: 20px; - padding-bottom: 20px; - } - .about-wrap .three-col .col, .about-wrap .headline-feature .feature-section .col { width: 100% !important; diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index ca995a6695..e63b162925 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -2720,6 +2720,7 @@ div.action-links { } /* Thickbox for Plugin Install screen */ +body.about-php #TB_window, body.plugin-install-php #TB_window, body.import-php #TB_window, body.plugins-php #TB_window, @@ -2729,6 +2730,7 @@ body.index-php #TB_window { } /* IE 8 needs a change in the pseudo element content */ +.ie8 body.about-php #TB_window:before, .ie8 body.plugin-install-php #TB_window:before, .ie8 body.import-php #TB_window:before, .ie8 body.plugins-php #TB_window:before, @@ -2738,6 +2740,7 @@ body.index-php #TB_window { background: none; } +body.about-php #TB_window.thickbox-loading:before, body.plugin-install-php #TB_window.thickbox-loading:before, body.import-php #TB_window.thickbox-loading:before, body.plugins-php #TB_window.thickbox-loading:before, @@ -2763,6 +2766,7 @@ body.index-php #TB_window.thickbox-loading:before { (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { + body.about-php #TB_window.thickbox-loading:before, body.plugin-install-php #TB_window.thickbox-loading:before, body.import-php #TB_window.thickbox-loading:before, body.plugins-php #TB_window.thickbox-loading:before, @@ -2772,6 +2776,7 @@ body.index-php #TB_window.thickbox-loading:before { } } +body.about-php #TB_title, body.plugin-install-php #TB_title, body.import-php #TB_title, body.plugins-php #TB_title, @@ -2781,6 +2786,7 @@ body.index-php #TB_title { height: 1px; } +body.about-php #TB_ajaxWindowTitle, body.plugin-install-php #TB_ajaxWindowTitle, body.import-php #TB_ajaxWindowTitle, body.plugins-php #TB_ajaxWindowTitle, @@ -2789,6 +2795,7 @@ body.index-php #TB_ajaxWindowTitle { display: none; } +body.about-php .tb-close-icon, body.plugin-install-php .tb-close-icon, body.import-php .tb-close-icon, body.plugins-php .tb-close-icon, @@ -2801,6 +2808,10 @@ body.index-php .tb-close-icon { transition: color .1s ease-in-out, background .1s ease-in-out; } +body.about-php #TB_closeWindowButton:focus, +body.about-php #TB_closeWindowButton:focus .tb-close-icon, +body.about-php .tb-close-icon:focus, +body.about-php .tb-close-icon:hover, body.plugin-install-php #TB_closeWindowButton:focus, body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon, body.plugin-install-php .tb-close-icon:focus, @@ -2827,6 +2838,7 @@ body.index-php .tb-close-icon:hover { box-shadow: none; } +body.about-php .tb-close-icon:before, body.plugin-install-php .tb-close-icon:before, body.import-php .tb-close-icon:before, body.plugins-php .tb-close-icon:before, @@ -2838,6 +2850,7 @@ body.index-php .tb-close-icon:before { /* move plugin install close icon to top on narrow screens */ @media screen and ( max-width: 830px ) { + body.about-php .tb-close-icon, body.plugin-install-php .tb-close-icon, body.import-php .tb-close-icon, body.plugins-php .tb-close-icon,