The current Media styling is spread across two files, doesn't follow any coding standards, is difficult to grok and contains a lot of code which is no longer used.

Media's CSS should be cleaned up in order to make it easier to modify and maintain.

Files: 
CommentFileSizeAuthor
#17 Issue-1502060-Comment-13.png52.31 KBraytiley
#17 Issure-1502060-Comment-14.png199.43 KBraytiley
#17 Issue-1502060-Comment-16.png103.11 KBraytiley
#16 media_css_issue.jpg75.55 KBgooddesignusa
#12 cleanup-css-1502060-12.patch11.07 KBDevin Carlson
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#10 cleanup-css-1502060-10.patch11.17 KBDevin Carlson
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#9 media-cleafix-1502060-8.patch522 bytesgmclelland
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#7 clearfix.jpg113.8 KBgmclelland
#5 2012-03-26_204935.jpg49.21 KBgmclelland
#1 cleanup-css-1502060-1.patch10.66 KBDevin Carlson
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

Status:Active» Needs review
StatusFileSize
new10.66 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

The attached patch reworks the Media CSS. Nearly 50% of the existing styles are unnecessary and the display of different items has actually been improved in a number of cases. Selectors have been broken separated into sections and the general code style (alphabetizing attributes and spacing attributes and properties) has been improved.

The patch fixes a couple of todos including integrating the library CSS into the main CSS file. It also add a missing ID to the media thumbnail list and corrects #1377368: Media CSS causing hover issues in media browser and #1393598: Some Media css styles are too generic and affect other non-media elements..

I'll attach screenshots at a later point.

Very nice work Devin, will have a look at this a bit later today. That 50% could be taken out shows this was overdue :)

Wow. This looks like a huge effort. Thanks.

Screenshots would help evaluating this beast though. I am currently playing around with two of my installs where one is using the patched version and so far most things look neat.

StatusFileSize
new49.21 KB

Tested the patch in #1 and definitely makes the media browser tabs and dialog look better.

I did run into an issue. It looks like the thumbs spill over. Maybe they need some sort of clearfix applied.

Note: I can see this in Chrome and Firefox

Thumbs

I did see this issue too but it seems to be a generic problem with having not enough stuff in your library. As soon as you have enough items to produce a line-break everything looks fine. I was able to reproduce this issue with an unpatched version so this issue needs to be fixed but doesn't seem to be caused by the patch.

StatusFileSize
new113.8 KB

It looks like you can just add the clearfix class to fix the problem. We will probably have to edit the view's markup to add the class.

Fix for thumbnails spilling over

This seems to fix the problem in media-views-view-media-browser.tpl.php
<div id="scrollbox" class="clearfix">

I added the class="clearfix"

@Devin Carlson - Can you update your patch with this fix?

StatusFileSize
new522 bytes
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Here is a simple patch against the 7.x-2.x-dev using git.

StatusFileSize
new11.17 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

An updated patch that includes the clearfix from #9 which solves the issue that gmclelland demonstrated.

Patch in #10 works great. Thanks Devin This makes the media browser look so much better.

StatusFileSize
new11.07 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Rerolled due to recent changes.

In the (second) popup where you only select the media format (and where the image is shown), the buttons may not appear; from firebug :

misc/ui/jquery.ui.core.css (line 17)
.ui-helper-clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
media.css (line 12)
.ui-dialog.media-wrapper .ui-dialog-buttonpane {   // have the priority over the above "display"
    display: none;
}

Status:Needs review» Needs work

Please modify this to avoid drupal (status) messages for instance in maintenance mode:

#media-browser-page .plupload_start,
#media-browser-page .messages  {
  display:none;
}

Two rows of thumbnails in the View library tab keep the Submit and Cancel buttons hidden. It displays right when I use Firebug and change the Iframe style="width: 750px; min-height: 0px; height: 650px;"

This is all in Bartik theme which I think as the default theme should display right.

Issue tags:+sprint, +Media Initiative

StatusFileSize
new75.55 KB

I applied the patch and it fixed some css issues. I did notice that it makes the checkboxes on 'admin/content/file/thumbnails' page render weird. I've attached a screen shot.

Status:Needs work» Reviewed & tested by the community
StatusFileSize
new103.11 KB
new199.43 KB
new52.31 KB

Tested patch in #12 using a fresh install of Drupal, latest dev releases of Views, cTools, and WYSIWYG and a fresh clone of media-7.x-2.x-dev. Was not able to reproduce the problems described in comments #13, #14, or #16.

Comment # 13 - Buttons Appar in both Chrome (19.0.1084.46 beta) and Firefox (12.0)
Comment 13 - Buttons Appear

Comment # 14 - Buttons Appear in both Chrome (19.0.1084.46 beta) and Firefox (12.0)
Comment 14 - Buttons Appear

Comment # 16 - Checkboxes appear correctly in both Chrome (19.0.1084.46 beta) and Firefox (12.0)
Comment 16 - Checkboxes appear correct

Also talked to dave at the tcdrupal media sprint and he prefers to leave the messages in the media modal dialog.

Assigning for final review and commit.

Status:Reviewed & tested by the community» Fixed

Thanks all! This cleanup looks really great and I gave it a quick UI review for any problems and I didn't see anything wrong. Committed to 7.x-2.x!
http://drupalcode.org/project/media.git/commit/62a00c1

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Any chance of this making it into the 7.x-1.x branch?