From fbfcb87b9d92651a1a9721a7d44938920e191dce Mon Sep 17 00:00:00 2001 From: Konstantin Obenland Date: Wed, 29 Jul 2015 19:57:00 +0000 Subject: [PATCH] About: Second pass at 4.3 about page. Adds images and videos for major and minor features. Restores a mangled placeholder in Formatting Shortcuts description. Assets still need to be moved to the .org CDN once deemed final. Props ryelle, melchoyce, helen. See #32929. git-svn-id: https://develop.svn.wordpress.org/trunk@33498 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/about.php | 49 ++++++++++++++++++++++++++++---------- src/wp-admin/css/about.css | 28 +++++++++++++++------- 2 files changed, 57 insertions(+), 20 deletions(-) diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php index 267407c7c0..b689d4425b 100644 --- a/src/wp-admin/about.php +++ b/src/wp-admin/about.php @@ -24,24 +24,28 @@ include( ABSPATH . 'wp-admin/admin-header.php' ); $major_features = array( array( - 'src' => '', + 'src' => array( + 'mp4' => 'https://cldup.com/2k26HVNP6P.mp4', + 'ogv' => '', + '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$.', '*', '#' ), + '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' => '', + 'src' => 'https://cldup.com/k23oK-g_v1.jpg', 'heading' => 'Menus in the Customizer', 'description' => 'Create your menu, update it, and preview it in the customizer, before sharing it with the world. With every release, it becomes easier and faster to build your site from the front-end. And a streamlined customizer design mean a mobile-first, accessibility ready interface.', ), array( - 'src' => '', + 'src' => 'https://cldup.com/t1HCztI0PR.jpg', '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, WordPress will automatically generate a secure password.', ), array( - 'src' => '', + 'src' => 'https://cldup.com/8LxuMwmsvE.jpg', '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.', ), @@ -50,17 +54,17 @@ shuffle( $major_features ); $minor_features = array( array( - 'src' => '', + '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' => '', + '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' => '', + '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 button in the toolbar to swiftly make changes to your site.', ), @@ -87,7 +91,7 @@ $tech_features = array(

-
+

@@ -105,7 +109,26 @@ $tech_features = array(
- +
+ $feature['src']['mp4'], + 'ogv' => $feature['src']['ogv'], + 'webm' => $feature['src']['webm'], + 'loop' => true, + 'autoplay' => true, + 'width' => 500, + 'height' => 284 + ) ); + + // Image. + else: + ?> + + +

@@ -115,7 +138,9 @@ $tech_features = array(
- +
+ +

@@ -128,7 +153,7 @@ $tech_features = array(
-

+

diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css index cabe9ae163..0039baec1a 100644 --- a/src/wp-admin/css/about.css +++ b/src/wp-admin/css/about.css @@ -236,6 +236,21 @@ max-width: 95%; } +.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 .feature-section .svg-container img { + max-width: 150px; +} + .about-wrap .feature-section:not(.under-the-hood) .col { margin-top: 40px; } @@ -367,10 +382,6 @@ border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - .about-wrap .two-col .col h3 { - margin-top: 0; - } - .about-wrap .three-col img { display: block; margin: 0 auto; @@ -423,15 +434,16 @@ border-bottom: 1px solid #ccc; } + .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; float: none !important; } - - .about-wrap .dfw p { - max-width: 90%; - } } @media only screen and (max-width: 400px) {