Media: Ensure Crop Image is always visible.

Previously, the crop button in the media modal after uploading header images or similar was hidden and the task could not be completed.

Props karinedo, sagarprajapati, Cybr, mayurk.
Fixes #40152.

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


git-svn-id: http://core.svn.wordpress.org/trunk@40326 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/buttons-rtl.css

@@ -411,6 +411,11 @@ TABLE OF CONTENTS:
 		vertical-align: inherit;
 	}
 
+	.media-modal-content .media-toolbar-primary .media-button {
+		margin-top: 10px;
+		margin-right: 5px;
+	}
+
 	/* Reset responsive styles on Log in button on iframed login form */
 
 	.interim-login .button.button-large {

wp-includes/css/buttons.css

@@ -411,6 +411,11 @@ TABLE OF CONTENTS:
 		vertical-align: inherit;
 	}
 
+	.media-modal-content .media-toolbar-primary .media-button {
+		margin-top: 10px;
+		margin-left: 5px;
+	}
+
 	/* Reset responsive styles on Log in button on iframed login form */
 
 	.interim-login .button.button-large {

wp-includes/css/media-views-rtl.css

@@ -242,14 +242,6 @@
 	width: calc(48% - 12px);
 }
 
-.media-modal-content .attachments-browser .media-toolbar-secondary {
-	width: 66%;
-}
-
-.media-modal-content .media-toolbar-primary.search-form {
-	width: 33%;
-}
-
 .media-modal-content .media-toolbar-primary .media-button {
 	float: left;
 }
@@ -279,6 +271,20 @@
 	overflow: hidden;
 }
 
+.media-frame-toolbar .media-toolbar {
+	top: initial;
+	bottom: -45px;
+	height: auto;
+	overflow: initial;
+	border-top: 1px solid #ddd;
+}
+
+@media screen and (max-width: 782px) {
+	.media-frame-toolbar .media-toolbar {
+		bottom: -48px;
+	}
+}
+
 .media-toolbar-primary {
 	float: left;
 	height: 100%;
@@ -686,7 +692,6 @@
 	overflow: auto;
 	background: #fff;
 	border-top: 1px solid #ddd;
-	border-bottom: 1px solid #ddd;
 }
 
 .media-frame-toolbar {
@@ -696,6 +701,8 @@
 	bottom: 0;
 	height: 60px;
 	z-index: 100;
+	bottom: 60px;
+	height: auto;
 }
 
 .media-frame.hide-menu .media-frame-title,

wp-includes/css/media-views.css

@@ -242,14 +242,6 @@
 	width: calc(48% - 12px);
 }
 
-.media-modal-content .attachments-browser .media-toolbar-secondary {
-	width: 66%;
-}
-
-.media-modal-content .media-toolbar-primary.search-form {
-	width: 33%;
-}
-
 .media-modal-content .media-toolbar-primary .media-button {
 	float: right;
 }
@@ -279,6 +271,20 @@
 	overflow: hidden;
 }
 
+.media-frame-toolbar .media-toolbar {
+	top: initial;
+	bottom: -45px;
+	height: auto;
+	overflow: initial;
+	border-top: 1px solid #ddd;
+}
+
+@media screen and (max-width: 782px) {
+	.media-frame-toolbar .media-toolbar {
+		bottom: -48px;
+	}
+}
+
 .media-toolbar-primary {
 	float: right;
 	height: 100%;
@@ -686,7 +692,6 @@
 	overflow: auto;
 	background: #fff;
 	border-top: 1px solid #ddd;
-	border-bottom: 1px solid #ddd;
 }
 
 .media-frame-toolbar {
@@ -696,6 +701,8 @@
 	bottom: 0;
 	height: 60px;
 	z-index: 100;
+	bottom: 60px;
+	height: auto;
 }
 
 .media-frame.hide-menu .media-frame-title,

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-40424';
+$wp_version = '4.8-alpha-40428';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.