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.



git-svn-id: https://develop.svn.wordpress.org/trunk@26298 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Matt Thomas 2013-11-21 00:20:13 +00:00
parent c8e93a3e16
commit 9e59f73a0b
7 changed files with 106 additions and 41 deletions

View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WordPress &#8250; ReadMe</title> <title>WordPress &#8250; ReadMe</title>
<link rel="stylesheet" href="wp-admin/css/install.css?ver=20100228" type="text/css" /> <link rel="stylesheet" href="wp-admin/css/install.css?ver=20100228" type="text/css" />

View File

@ -1,36 +1,38 @@
html { html {
background: #f9f9f9; background: #eee;
margin: 0 20px;
} }
body { body {
background: #fff; background: #fff;
color: #333; color: #555;
font-family: sans-serif; font-family: "Open Sans", sans-serif;
margin: 2em auto; margin: 140px auto 25px;
padding: 1em 2em; padding: 20px 20px 10px 20px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #dfdfdf;
max-width: 700px; 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 { a {
color: #21759b; color: #0074a2;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: #d54e21; color: #2ea2cc;
} }
h1 { h1 {
border-bottom: 1px solid #dadada; border-bottom: 1px solid #dedede;
clear: both; clear: both;
color: #666; color: #666;
font: 24px Georgia, "Times New Roman", Times, serif; font-size: 24px;
margin: 30px 0 0 0; margin: 30px 0;
padding: 0; padding: 0;
padding-bottom: 7px; padding-bottom: 7px;
font-weight: normal;
} }
h2 { h2 {
@ -44,7 +46,7 @@ p, li, dd, dt {
} }
code, .code { code, .code {
font-size: 14px; font-family: Consolas, Monaco, monospace;
} }
ul, ol, dl { ul, ol, dl {
@ -64,25 +66,24 @@ abbr {
text-align:center text-align:center
} }
#logo a { #logo a {
background-image: url('../images/wordpress-logo.png?ver=20120216'); background-image: url('../images/wordpress-logo.svg?ver=20131107');
background-size: 274px 63px; background-size: 80px 80px;
background-position: top center; background-position: center top;
background-repeat: no-repeat; 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; text-indent: -9999px;
outline: none; outline: none;
overflow: hidden; overflow: hidden;
display: block; 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 { .step {
margin: 20px 0 15px; margin: 20px 0 15px;
} }
@ -95,10 +96,12 @@ abbr {
} }
textarea { textarea {
border: 1px solid #dfdfdf; border: 1px solid #dfdfdf;
-webkit-border-radius: 3px; font-family: "Open Sans", sans-serif;
border-radius: 3px; width: 100%;
font-family: sans-serif; -moz-box-sizing: border-box;
width: 695px; -webkit-box-sizing: border-box;
-ms-box-sizing: border-box; /* ie8 only */
box-sizing: border-box;
} }
.form-table { .form-table {
@ -119,7 +122,6 @@ textarea {
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
padding: 16px 20px 10px 0; padding: 16px 20px 10px 0;
border-bottom: 8px solid #fff;
width: 140px; width: 140px;
vertical-align: top; vertical-align: top;
} }
@ -137,11 +139,14 @@ textarea {
.form-table input { .form-table input {
line-height: 20px; line-height: 20px;
font-size: 15px; font-size: 15px;
padding: 2px; padding: 3px 5px;
border: 1px #dfdfdf solid; border: 1px solid #ddd;
-webkit-border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
border-radius: 3px; }
font-family: sans-serif;
input,
submit {
font-family: "Open Sans", sans-serif;
} }
.form-table input[type=text], .form-table input[type=text],
@ -216,8 +221,6 @@ textarea {
.message { .message {
border: 1px solid #c00; border: 1px solid #c00;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 0.5em 0.7em; padding: 0.5em 0.7em;
margin: 5px 0 15px; margin: 5px 0 15px;
background-color: #ffebe8; background-color: #ffebe8;
@ -235,3 +238,57 @@ textarea {
#pass2 { #pass2 {
direction: ltr; 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;
}
}

View File

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

View File

@ -14,6 +14,7 @@ header( 'Content-Type: text/html; charset=utf-8' );
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head> <head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title> <title><?php _e( 'WordPress &rsaquo; Database Repair' ); ?></title>
<?php <?php
@ -26,7 +27,7 @@ header( 'Content-Type: text/html; charset=utf-8' );
<?php <?php
if ( ! defined( 'WP_ALLOW_REPAIR' ) ) { 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'] ) ) { } elseif ( isset( $_GET['repair'] ) ) {
$optimize = 2 == $_GET['repair']; $optimize = 2 == $_GET['repair'];
$okay = true; $okay = true;
@ -103,7 +104,7 @@ if ( ! defined( 'WP_ALLOW_REPAIR' ) ) {
$problem_output .= "$table: $problem\n"; $problem_output .= "$table: $problem\n";
echo '<p><textarea name="errors" id="errors" rows="20" cols="60">' . esc_textarea( $problem_output ) . '</textarea></p>'; echo '<p><textarea name="errors" id="errors" rows="20" cols="60">' . esc_textarea( $problem_output ) . '</textarea></p>';
} else { } 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 { } else {
if ( isset( $_GET['referrer'] ) && 'is_blog_installed' == $_GET['referrer'] ) if ( isset( $_GET['referrer'] ) && 'is_blog_installed' == $_GET['referrer'] )

View File

@ -65,6 +65,7 @@ if ( isset( $_GET['action'] ) ) {
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head> <head>
<meta name="viewport" content="width=device-width" />
<title><?php _e( 'WordPress &rsaquo; Confirm your action' ); ?></title> <title><?php _e( 'WordPress &rsaquo; Confirm your action' ); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

View File

@ -99,6 +99,7 @@ function setup_config_display_header() {
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"<?php if ( is_rtl() ) echo ' dir="rtl"'; ?>> <html xmlns="http://www.w3.org/1999/xhtml"<?php if ( is_rtl() ) echo ' dir="rtl"'; ?>>
<head> <head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php _e( 'WordPress &rsaquo; Setup Configuration File' ); ?></title> <title><?php _e( 'WordPress &rsaquo; Setup Configuration File' ); ?></title>
<link rel="stylesheet" href="css/install.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" /> <link rel="stylesheet" href="css/install.css?ver=<?php echo preg_replace( '/[^0-9a-z\.-]/i', '', $wp_version ); ?>" type="text/css" />

View File

@ -50,6 +50,7 @@ else
<!DOCTYPE html> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head> <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' ); ?>" /> <meta http-equiv="Content-Type" content="<?php bloginfo( 'html_type' ); ?>; charset=<?php echo get_option( 'blog_charset' ); ?>" />
<title><?php _e( 'WordPress &rsaquo; Update' ); ?></title> <title><?php _e( 'WordPress &rsaquo; Update' ); ?></title>
<?php <?php