Changeset 29355

Timestamp:

08/02/2014 02:13:06 PM (11 years ago)

Author:

ocean90

Message:

Media Upload: Improve styling of error messages.

props afercia, michalzuber.
fixes #29047.

Location:

trunk/src/wp-admin

Files:

• async-upload.php (modified) (1 diff)
• css/media.css (modified) (8 diffs)
• includes/media.php (modified) (1 diff)

trunk/src/wp-admin/async-upload.php

@@ -87 +87 @@
 $id = media_handle_upload( 'async-upload', $post_id );
 if ( is_wp_error($id) ) {
-    echo '<div class="error-div">
+    echo '<div class="error-div error">
     <a class="dismiss" href="#" onclick="jQuery(this).parents(\'div.media-item\').slideUp(200, function(){jQuery(this).remove();});">' . __('Dismiss') . '</a>
     <strong>' . sprintf(__('&#8220;%s&#8221; has failed to upload due to an error'), esc_html($_FILES['async-upload']['name']) ) . '</strong><br />' .

trunk/src/wp-admin/css/media.css

@@ -103 +103 @@
     line-height: 36px;
     float: right;
-    margin-right: 6px;
+    margin-right: 10px;
 }
 
@@ -115 +115 @@
 }
 
-#media-items .media-item {
-    border-bottom: 1px solid #dfdfdf;
+.media-upload-form .media-item {
     min-height: 36px;
+    margin-bottom: 1px;
     position: relative;
     width: 100%;
@@ -123 +123 @@
 }
 
-.media-new-php #media-items {
-    margin: 1em 0;
+.media-upload-form .media-item,
+.media-upload-form .media-item .error {
+    -webkit-box-shadow: 0 1px 0 #dfdfdf;
+    box-shadow: 0 1px 0 #dfdfdf;
 }
 
@@ -135 +137 @@
     overflow: hidden;
     margin-left: 6px;
-}
-
-.media-item .error-div {
-    padding-left: 10px;
 }
 
@@ -209 +207 @@
 }
 
-.media-upload-form .media-item.error {
-    margin: 0;
-    padding: 0;
-}
-
-.media-upload-form .media-item.error p,
-.media-item .error-div {
-    line-height: 16px;
-    margin: 5px 10px;
-    padding: 0;
+.media-upload-form .media-item.error,
+.media-upload-form .media-item .error {
+    width: auto;
+    margin: 0 0 1px 0;
+}
+
+.media-upload-form .media-item .error {
+    padding: 10px 0 10px 14px;
 }
 
@@ -224 +220 @@
     display: block;
     float: right;
-    margin: 5px 4px 0 15px;
+    margin: 0 10px 0 15px;
 }
 
@@ -511 +507 @@
 
 .media-disabled,
-.imgedit-settings .disabled  {
+.imgedit-settings .disabled {
     color: grey;
 }
@@ -726 +722 @@
         line-height: 1.5em;
     }
-}
+
+    .media-upload-form .media-item.error,
+    .media-upload-form .media-item .error {
+        font-size: 13px;
+        line-height: 1.5;
+    }
+
+    .media-upload-form .media-item.error {
+        padding: 1px 10px;
+    }
+
+    .media-upload-form .media-item .error {
+        padding: 10px 0 10px 12px;
+    }
+}

trunk/src/wp-admin/includes/media.php

@@ -1857 +1857 @@
 </div>
 
-<span class="max-upload-size"><?php printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) ); ?></span>
+<p class="max-upload-size"><?php printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) ); ?></p>
 <?php