From 975cf5574a7eb7a54ca642372900eadfdf069df1 Mon Sep 17 00:00:00 2001
From: Scott Taylor <wonderboymusic@git.wordpress.org>
Date: Sun, 9 Mar 2014 23:18:06 +0000
Subject: [PATCH] Update the UI styles for Playlist Settings.

Props melchoyce for the design.
See #26631.



git-svn-id: https://develop.svn.wordpress.org/trunk@27487 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/css/media-views.css |  9 +++++++++
 src/wp-includes/media-template.php  | 18 +++++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index c86edcc613..e8360b38cf 100644
--- a/src/wp-includes/css/media-views.css
+++ b/src/wp-includes/css/media-views.css
@@ -1432,6 +1432,15 @@
 	overflow: hidden;
 }
 
+.collection-settings .setting input[type="checkbox"] {
+	float: left;
+	margin-right: 8px;
+}
+
+.collection-settings .setting span {
+	min-width: inherit;
+}
+
 /**
  * Image Editor
  */
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 31d650a759..bdbe4c0989 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -417,11 +417,6 @@ function wp_print_media_templates() {
 	<script type="text/html" id="tmpl-playlist-settings">
 		<h3><?php _e( 'Playlist Settings' ); ?></h3>
 
-		<label class="setting">
-			<span><?php _e( 'Random Order' ); ?></span>
-			<input type="checkbox" data-setting="_orderbyRandom" />
-		</label>
-
 		<label class="setting">
 			<span><?php _e( 'Style' ); ?></span>
 			<select class="style" data-setting="style">
@@ -438,31 +433,36 @@ function wp_print_media_templates() {
 			var playlist = 'playlist-edit' === data.controller.id, emptyModel = _.isEmpty(data.model);
 		#>
 		<label class="setting">
-			<span><?php _e( 'Show Tracklist' ); ?></span>
+			<input type="checkbox" data-setting="_orderbyRandom" />
+			<span><?php _e( 'Random Order' ); ?></span>
+		</label>
+
+		<label class="setting">
 			<input type="checkbox" data-setting="tracklist" <# if ( playlist && emptyModel ) { #>
 				checked="checked"
 			<# } #> />
+			<span><?php _e( 'Show Tracklist' ); ?></span>
 		</label>
 
 		<label class="setting">
-			<span><?php _e( 'Show Track Numbers' ); ?></span>
 			<input type="checkbox" data-setting="tracknumbers" <# if ( playlist && emptyModel ) { #>
 				checked="checked"
 			<# } #> />
+			<span><?php _e( 'Show Track Numbers' ); ?></span>
 		</label>
 
 		<label class="setting">
-			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
 			<input type="checkbox" data-setting="artists" <# if ( playlist && emptyModel ) { #>
 				checked="checked"
 			<# } #> />
+			<span><?php _e( 'Show Artist Name in Tracklist' ); ?></span>
 		</label>
 
 		<label class="setting">
-			<span><?php _e( 'Show Images' ); ?></span>
 			<input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
 				checked="checked"
 			<# } #> />
+			<span><?php _e( 'Show Images' ); ?></span>
 		</label>
 	</script>