upload new media item error style

[afercia]

Small CSS thing, see attached screenshot.
Patch applies to trunk, since in 3.9.1 #media-items div still has a width of 623px which is already removed in trunk.

[michalzuber]

Tried and looked good ​1 ​2, but you removed also .error-div which is used /wp-admin/async-upload.php#L89

[afercia]

Replying to michalzuber:

but you removed also .error-div which is used /wp-admin/async-upload.php#L89

Hi,
you're definitely right, it's used but it looks like it doesn't do that much, see ​before patch and ​after patch.
Refreshed patch to try to standardize on the default div.error style. See ​after patch 2

[afercia]

takes care of .error-div

[michalzuber]

Thank you afercia.
Changing margin of .wrap div.error might break in ​other views
​My test question to the patch:
Why is that new error class needed to error-div, it's specific enough I think, no need for a new one

Sorry for "arguing" just wanna make sure it doesn't break other stuff ;)

[afercia]

Replying to michalzuber:
hi michalzuber,
you're right again, thx for watching my back :)

Changing margin of .wrap div.error might break in ​other views

right, messages shown for example on top of "edit post" like "There is an autosave of this post..." need that margin. Bit confusing though because in common.css div.updated and div.error have a default bottom margin of 2px then it's redefined to 15px for the ones inside .wrap. I assumed the default was 2px but I was wrong.

However, when you upload multiple items at once you can get a list with "successfully uploaded" items ​mixed with error messages. Should errors have margin in this case?

I'll revert the patch and try to target specifically the errors inside .media-upload-form

​My test question to the patch:
Why is that new error class needed to error-div, it's specific enough I think, no need for a new one

It's the class that gives the "error style" with the left red border and some box-shadow. I would like to don't replicate those declarations on .error-div and use just the generic .error class. Say in the future you want to change the error style, you should be able to do that editing just one CSS rule.

[afercia]

targets just items inside .media-upload-form, normalizes font size, line-height and padding for small screen devices

[afercia]

refreshed patch doesn't touch common.css and keeps all this media-specific in media.css
See ​before and ​after

[afercia]

please ignore patch 3, forgot to uncomment something

[michalzuber]

Replaced #media-items with .media-upload-form

[michalzuber]

Thanks afercia, nice.

• Replace #media-items due ​https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors
• Changed <span class="max-upload-size"> to <p class="max-upload-size"> that way no need for

  .media-new-php #media-items {margin: 1em 0}
  

Result ​http://i.imgur.com/bRcbFmW.png

[afercia]

Thanks Michal, nice.
We can also fix a ​small borders issue just not using borders at all and using box-shadow instead. What do you think about?

[afercia]

removes items border-bottom and uses box-shadow

[ocean90]

Have you tested this in the old media modal too? #28220 has some demo code.

[michalzuber]

ocean90 did you mean uploading from Add/Edit Post page ​https://youtu.be/bEjNrldS8Cw ?

[ocean90]

Replying to michalzuber:
No, that's not the old modal. From #28220:

3) Add ​this codes to your functions.php file .

[afercia]

hi ocean90,
clicked on "Arkaplan Görseli Ayarla" :) and looks fine to me

[ocean90]

In 29355:

Media Upload: Improve styling of error messages.

props afercia, michalzuber.
fixes #29047.