Changeset 26298

Timestamp:

11/21/2013 12:20:13 AM (13 years ago)

Author:

iammattthomas

Message:

Bring the install/update screens in line with the new admin design. This affects:

• Creating a wp-config.php file
• Installation
• Database upgrade
• Database repair
• Readme.html
• Network sites actions

What's changed:

• Bring background/text/link/border colours in line with mp6
• Bring fonts in line with mp6 (see note below)
• Switch to device-width for the viewport and tweak margins etc so the layout works nicely on all device sizes
• Switch to the new vector WordPress logo in the header to match the log in screen
• Force table cells into rows in the <782px media query

Fixes #25951, props johnbillion.

Location:

trunk/src

Files:

• readme.html (modified) (1 diff)
• wp-admin/css/install.css (modified) (9 diffs)
• wp-admin/install.php (modified) (2 diffs)
• wp-admin/maint/repair.php (modified) (3 diffs)
• wp-admin/network/sites.php (modified) (1 diff)
• wp-admin/setup-config.php (modified) (1 diff)
• wp-admin/upgrade.php (modified) (1 diff)

trunk/src/readme.html

@@ -2 +2 @@
 <html>
 <head>
+        <meta name="viewport" content="width=device-width" />
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title>WordPress &#8250; ReadMe</title>

trunk/src/wp-admin/css/install.css

@@ -1 +1 @@
 html {
-        background: #f9f9f9;
+        background: #eee;
+        margin: 0 20px;
 }
 
 body {
         background: #fff;
-        color: #333;
-        font-family: sans-serif;
-        margin: 2em auto;
-        padding: 1em 2em;
-        -webkit-border-radius: 3px;
-        border-radius: 3px;
-        border: 1px solid #dfdfdf;
+        color: #555;
+        font-family: "Open Sans", sans-serif;
+        margin: 140px auto 25px;
+        padding: 20px 20px 10px 20px;
         max-width: 700px;
+        -webkit-font-smoothing: subpixel-antialiased;
+        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.13);
+        box-shadow: 0 1px 3px rgba(0,0,0,0.13);
 }
 
 a {
-        color: #21759b;
+        color: #0074a2;
         text-decoration: none;
 }
 
 a:hover {
-        color: #d54e21;
+        color: #2ea2cc;
 }
 
 h1 {
-        border-bottom: 1px solid #dadada;
+        border-bottom: 1px solid #dedede;
         clear: both;
         color: #666;
-        font: 24px Georgia, "Times New Roman", Times, serif;
-        margin: 30px 0 0 0;
+        font-size: 24px;
+        margin: 30px 0;
         padding: 0;
         padding-bottom: 7px;
+        font-weight: normal;
 }
 
@@ -45 +47 @@
 
 code, .code {
-        font-size: 14px;
+        font-family: Consolas, Monaco, monospace;
 }
 
@@ -65 +67 @@
 }
 #logo a {
-        background-image: url('../images/wordpress-logo.png?ver=20120216');
-        background-size: 274px 63px;
-        background-position: top center;
+        background-image: url('../images/wordpress-logo.svg?ver=20131107');
+        background-size: 80px 80px;
+        background-position: center top;
         background-repeat: no-repeat;
-        height: 67px;
+        color: #999;
+        height: 80px;
+        font-size: 20px;
+        font-weight: normal;
+        line-height: 1.3em;
+        margin: -130px auto 25px;
+        padding: 0;
+        text-decoration: none;
+        width: 80px;
         text-indent: -9999px;
         outline: none;
@@ -75 +85 @@
         display: block;
 }
-@media print,
-  (-o-min-device-pixel-ratio: 5/4),
-  (-webkit-min-device-pixel-ratio: 1.25),
-  (min-resolution: 120dpi) {
-        #logo a {
-                background-image: url('../images/wordpress-logo-2x.png?ver=20120412');
-                background-size: 274px 63px;
-        }
-}
 .step {
         margin: 20px 0 15px;
@@ -96 +97 @@
 textarea {
         border: 1px solid #dfdfdf;
-        -webkit-border-radius: 3px;
-        border-radius: 3px;
-        font-family: sans-serif;
-        width:  695px;
+        font-family: "Open Sans", sans-serif;
+        width: 100%;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -ms-box-sizing: border-box; /* ie8 only */
+        box-sizing: border-box;
 }
 
@@ -120 +123 @@
         text-align: left;
         padding: 16px 20px 10px 0;
-        border-bottom: 8px solid #fff;
         width: 140px;
         vertical-align: top;
@@ -138 +140 @@
         line-height: 20px;
         font-size: 15px;
-        padding: 2px;
-        border: 1px #dfdfdf solid;
-        -webkit-border-radius: 3px;
-        border-radius: 3px;
-        font-family: sans-serif;
+        padding: 3px 5px;
+        border: 1px solid #ddd;
+        box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
+}
+
+input,
+submit {
+        font-family: "Open Sans", sans-serif;
 }
 
@@ -217 +222 @@
 .message {
         border: 1px solid #c00;
-        -webkit-border-radius: 3px;
-        border-radius:         3px;
         padding: 0.5em 0.7em;
         margin: 5px 0 15px;
@@ -236 +239 @@
         direction: ltr;
 }
+
+@media only screen and (max-width: 799px) {
+        body {
+                margin-top: 115px;
+        }
+        #logo a {
+                margin: -125px auto 30px;
+        }
+}
+
+@media screen and ( max-width: 782px ) {
+
+        .form-table {
+                margin-top: 0;
+        }
+
+        .form-table th,
+        .form-table td {
+                display: block;
+                width: auto;
+                vertical-align: middle;
+        }
+
+        .form-table th {
+                padding: 20px 0 0;
+        }
+
+        .form-table td {
+                padding: 5px 0;
+                border: 0;
+                margin: 0;
+        }
+
+        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 {
+                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;
+        }
+
+}

trunk/src/wp-admin/install.php

@@ -57 +57 @@
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+        <meta name="viewport" content="width=device-width" />
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title><?php _e( 'WordPress &rsaquo; Installation' ); ?></title>
@@ -250 +251 @@
                 break;
 }
+if ( !wp_is_mobile() ) {
 ?>
 <script type="text/javascript">var t = document.getElementById('weblog_title'); if (t){ t.focus(); }</script>
+<?php } ?>
 <?php wp_print_scripts( 'user-profile' ); ?>
 </body>

trunk/src/wp-admin/maint/repair.php

@@ -15 +15 @@
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+        <meta name="viewport" content="width=device-width" />
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
@@ -27 +28 @@
 
 if ( ! defined( 'WP_ALLOW_REPAIR' ) ) {
-        echo '<p>' . __( 'To allow use of this page to automatically repair database problems, please add the following line to your <code>wp-config.php</code> file. Once this line is added to your config, reload this page.' ) . "</p><code>define('WP_ALLOW_REPAIR', true);</code>";
+        echo '<p>' . __( 'To allow use of this page to automatically repair database problems, please add the following line to your <code>wp-config.php</code> file. Once this line is added to your config, reload this page.' ) . "</p><p><code>define('WP_ALLOW_REPAIR', true);</code></p>";
 } elseif ( isset( $_GET['repair'] ) ) {
         $optimize = 2 == $_GET['repair'];
@@ -104 +105 @@
                 echo '<p><textarea name="errors" id="errors" rows="20" cols="60">' . esc_textarea( $problem_output ) . '</textarea></p>';
         } else {
-                echo '<p>' . __( 'Repairs complete. Please remove the following line from wp-config.php to prevent this page from being used by unauthorized users.' ) . "</p><code>define('WP_ALLOW_REPAIR', true);</code>";
+                echo '<p>' . __( 'Repairs complete. Please remove the following line from wp-config.php to prevent this page from being used by unauthorized users.' ) . "</p><p><code>define('WP_ALLOW_REPAIR', true);</code></p>";
         }
 } else {

trunk/src/wp-admin/network/sites.php

@@ -66 +66 @@
                 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
                         <head>
+                                <meta name="viewport" content="width=device-width" />
                                 <title><?php _e( 'WordPress &rsaquo; Confirm your action' ); ?></title>
 

trunk/src/wp-admin/setup-config.php

@@ -100 +100 @@
 <html xmlns="http://www.w3.org/1999/xhtml"<?php if ( is_rtl() ) echo ' dir="rtl"'; ?>>
 <head>
+<meta name="viewport" content="width=device-width" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title><?php _e( 'WordPress &rsaquo; Setup Configuration File' ); ?></title>

trunk/src/wp-admin/upgrade.php

@@ -51 +51 @@
 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
 <head>
+        <meta name="viewport" content="width=device-width" />
         <meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php echo get_option( 'blog_charset' ); ?>" />
         <title><?php _e( 'WordPress &rsaquo; Update' ); ?></title>