First pass at switching to radio inputs for the install screen language selector. Needs some more work. See #28577. Props jorbin

Built from https://develop.svn.wordpress.org/trunk@28983


git-svn-id: http://core.svn.wordpress.org/trunk@28772 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
John Blackbourn 2014-07-03 22:53:16 +00:00
parent 01b4fe872a
commit a4a9f52cc9
5 changed files with 67 additions and 16 deletions

View File

@ -316,10 +316,9 @@ body.language-chooser {
max-width: 450px;
}
.language-chooser select {
.language-chooser fieldset {
margin: 1px;
padding: 8px;
width: 100%;
display: block;
border: 1px solid #ddd;
-webkit-border-radius: 0;
@ -334,9 +333,12 @@ body.language-chooser {
font-size: 16px;
font-family: inherit;
font-weight: inherit;
overflow-y: scroll;
height: 250px;
}
.language-chooser select:focus {
/* TODO:add focus style via JS */
.language-chooser fieldset.focus {
border-color: #5b9dd9;
-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
box-shadow: 0 0 2px rgba(30,140,190,0.8);
@ -349,4 +351,25 @@ body.language-chooser {
.language-chooser p {
text-align: left;
}
}
.language-chooser input:checked + label{
color:white;
background: #0074A2;
}
.language-chooser label{
display:block;
}
.screen-reader-input,
.screen-reader-text {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

File diff suppressed because one or more lines are too long

View File

@ -316,10 +316,9 @@ body.language-chooser {
max-width: 450px;
}
.language-chooser select {
.language-chooser fieldset {
margin: 1px;
padding: 8px;
width: 100%;
display: block;
border: 1px solid #ddd;
-webkit-border-radius: 0;
@ -334,9 +333,12 @@ body.language-chooser {
font-size: 16px;
font-family: inherit;
font-weight: inherit;
overflow-y: scroll;
height: 250px;
}
.language-chooser select:focus {
/* TODO:add focus style via JS */
.language-chooser fieldset.focus {
border-color: #5b9dd9;
-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
box-shadow: 0 0 2px rgba(30,140,190,0.8);
@ -349,4 +351,25 @@ body.language-chooser {
.language-chooser p {
text-align: right;
}
}
.language-chooser input:checked + label{
color:white;
background: #0074A2;
}
.language-chooser label{
display:block;
}
.screen-reader-input,
.screen-reader-text {
position: absolute;
margin: -1px;
padding: 0;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

File diff suppressed because one or more lines are too long

View File

@ -203,14 +203,19 @@ switch($step) {
$body = wp_get_available_translations();
if ( $body ) {
display_header( 'language-chooser' );
echo '<form id="setup" method="post" action="install.php?step=1">';
echo '<select name="language" id="language-chooser" size="15">';
echo '<option selected="selected" value="">English (United States)</option>';
echo "<fieldset>\n";
echo "<legend class='screen-reader-text'>Select a default language</legend>\n";
echo '<input type="radio" checked="checked" class="screen-reader-input" name="language" id="language_default" value="">';
echo '<label for="language_default">English (United States)</label>';
echo "\n";
foreach ( $body['languages'] as $language ) {
echo '<option value="' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</option>\n";
echo '<input type="radio" name="language" class="' . esc_attr( $language['language'] ) . ' screen-reader-input" id="language_'. esc_attr( $language['language'] ) .'" value="' . esc_attr( $language['language'] ) . '">';
echo '<label for="language_' . esc_attr( $language['language'] ) . '">' . esc_html( $language['native_name'] ) . "</label>\n";
}
echo "</select>\n";
echo "</fieldset>\n";
echo '<p class="step"><input type="submit" class="button button-primary button-hero" value="&raquo;" /></p>';
echo '</form>';
break;
@ -334,7 +339,7 @@ switch($step) {
}
if ( !wp_is_mobile() ) {
?>
<script type="text/javascript">var t = document.getElementById('weblog_title') || document.getElementById('language-chooser'); 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' ); ?>
</body>