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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Devin Carlson’s picture

Status: Active » Needs review
FileSize
10.66 KB

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.

tsvenson’s picture

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

dddave’s picture

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.

Devin Carlson’s picture

gmclelland’s picture

FileSize
49.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

dddave’s picture

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.

gmclelland’s picture

FileSize
113.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

gmclelland’s picture

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?

gmclelland’s picture

FileSize
522 bytes

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

Devin Carlson’s picture

FileSize
11.17 KB

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

gmclelland’s picture

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

Devin Carlson’s picture

FileSize
11.07 KB

Rerolled due to recent changes.

drzraf’s picture

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;
}
ñull’s picture

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.

Dave Reid’s picture

Issue tags: +sprint, +Media Initiative
gooddesignusa’s picture

FileSize
75.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.

raytiley’s picture

Status: Needs work » Reviewed & tested by the community
FileSize
103.11 KB
199.43 KB
52.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.

Dave Reid’s picture

Assigned: Devin Carlson » Dave Reid

Assigning for final review and commit.

Dave Reid’s picture

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.

m4olivei’s picture

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