Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Comment | File | Size | Author |
---|---|---|---|
#17 | Issue-1502060-Comment-13.png | 52.31 KB | raytiley |
#17 | Issure-1502060-Comment-14.png | 199.43 KB | raytiley |
#17 | Issue-1502060-Comment-16.png | 103.11 KB | raytiley |
#16 | media_css_issue.jpg | 75.55 KB | gooddesignusa |
#12 | cleanup-css-1502060-12.patch | 11.07 KB | Devin Carlson |
Comments
Comment #1
Devin Carlson CreditAttribution: Devin Carlson commentedThe 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
todo
s 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.
Comment #2
tsvenson CreditAttribution: tsvenson commentedVery nice work Devin, will have a look at this a bit later today. That 50% could be taken out shows this was overdue :)
Comment #3
dddave CreditAttribution: dddave commentedWow. 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.
Comment #4
Devin Carlson CreditAttribution: Devin Carlson commentedThis also fixes #1496926: library popup markup.
Comment #5
gmclelland CreditAttribution: gmclelland commentedTested 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
Comment #6
dddave CreditAttribution: dddave commentedI 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.
Comment #7
gmclelland CreditAttribution: gmclelland commentedIt 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.
Comment #8
gmclelland CreditAttribution: gmclelland commentedThis 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?
Comment #9
gmclelland CreditAttribution: gmclelland commentedHere is a simple patch against the 7.x-2.x-dev using git.
Comment #10
Devin Carlson CreditAttribution: Devin Carlson commentedAn updated patch that includes the clearfix from #9 which solves the issue that gmclelland demonstrated.
Comment #11
gmclelland CreditAttribution: gmclelland commentedPatch in #10 works great. Thanks Devin This makes the media browser look so much better.
Comment #12
Devin Carlson CreditAttribution: Devin Carlson commentedRerolled due to recent changes.
Comment #13
drzraf CreditAttribution: drzraf commentedIn the (second) popup where you only select the media format (and where the image is shown), the buttons may not appear; from firebug :
Comment #14
ñull CreditAttribution: ñull commentedPlease modify this to avoid drupal (status) messages for instance in maintenance mode:
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.
Comment #15
Dave ReidComment #16
gooddesignusa CreditAttribution: gooddesignusa commentedI 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.
Comment #17
raytiley CreditAttribution: raytiley commentedTested 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 # 14 - Buttons Appear in both Chrome (19.0.1084.46 beta) and Firefox (12.0)
Comment # 16 - Checkboxes appear correctly in both Chrome (19.0.1084.46 beta) and Firefox (12.0)
Also talked to dave at the tcdrupal media sprint and he prefers to leave the messages in the media modal dialog.
Comment #18
Dave ReidAssigning for final review and commit.
Comment #19
Dave ReidThanks 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
Comment #21
m4oliveiAny chance of this making it into the 7.x-1.x branch?