Settings: Widen time/day input fields on General Settings page, and move the preview onto the next line.

melchoyce · melchoyce · commit e6908acb8216 · 2017-10-13T18:38:03.000Z
Props desrosj, afercia. Fixes #41603. git-svn-id: https://develop.svn.wordpress.org/trunk@41857 602fd350-edb4-49c9-b593-d223f7449a82
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
@@ -1340,7 +1340,7 @@ table.form-table td .updated p {
 	}
 
 	.options-general-php input[type="text"].small-text {
-		max-width: 60px;
+		max-width: 6.25em;
 		margin: 0;
 	}
 }
diff --git a/src/wp-admin/options-general.php b/src/wp-admin/options-general.php
@@ -307,8 +307,9 @@
 	echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom date format in the following field' ) . '</span></span></label>' .
 		'<label for="date_format_custom" class="screen-reader-text">' . __( 'Custom date format:' ) . '</label>' .
 		'<input type="text" name="date_format_custom" id="date_format_custom" value="' . esc_attr( get_option( 'date_format' ) ) . '" class="small-text" />' .
-		'<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'date_format' ) ) . '</span>' .
-		"<span class='spinner'></span>\n";
+		'<br />' .
+		'<p><strong>' . __( 'Preview:' ) . '</strong> <span class="example">' . date_i18n( get_option( 'date_format' ) ) . '</span>' .
+		"<span class='spinner'></span>\n" . '</p>';
 ?>
 	</fieldset>
 </td>
@@ -343,8 +344,9 @@
 	echo '/> <span class="date-time-text date-time-custom-text">' . __( 'Custom:' ) . '<span class="screen-reader-text"> ' . __( 'enter a custom time format in the following field' ) . '</span></span></label>' .
 		'<label for="time_format_custom" class="screen-reader-text">' . __( 'Custom time format:' ) . '</label>' .
 		'<input type="text" name="time_format_custom" id="time_format_custom" value="' . esc_attr( get_option( 'time_format' ) ) . '" class="small-text" />' .
-		'<span class="screen-reader-text">' . __( 'example:' ) . ' </span> <span class="example">' . date_i18n( get_option( 'time_format' ) ) . '</span>' .
-		"<span class='spinner'></span>\n";
+		'<br />' .
+		'<p><strong>' . __( 'Preview:' ) . '</strong> <span class="example">' . date_i18n( get_option( 'time_format' ) ) . '</span>' .
+		"<span class='spinner'></span>\n" . '</p>';
 
 	echo "\t<p class='date-time-doc'>" . __('<a href="https://codex.wordpress.org/Formatting_Date_and_Time">Documentation on date and time formatting</a>.') . "</p>\n";
 ?>

Original file line number	Diff line number	Diff line change
`@@ -1340,7 +1340,7 @@ table.form-table td .updated p {`
`1340`	`1340`	`}`
`1341`	`1341`
`1342`	`1342`	`.options-general-php input[type="text"].small-text {`
`1343`		`- max-width: 60px;`
	`1343`	`+ max-width: 6.25em;`
`1344`	`1344`	`margin: 0;`
`1345`	`1345`	`}`
`1346`	`1346`	`}`