Media dialog missing styles

Thanks for the bug report!

I'm able to reproduce some style weirdness in the media browser when setting the admin theme to Seven. I've attached some screenshots and updated the issue summary.

I can confirm also, that this doesn't appear to happen with Panopoly 1.21. :-/ Updating priority to Critical since this looks like a regression!

I can confirm the same issues with media browser. I also have style weirdness when I set the admin theme to a custom theme. We have set the admin theme to responsive bartik for now until this is fixed.

Sorry, we didn't resolve this in Panopoly 1.23! We take regressions very seriously, but unfortunately there were a lot of things that needed to be done to get 1.23 out and I didn't want to hold up security fixes on a visual issue. We'll definitely address this before 1.24!

Added screenshot and steps to reproduce from #2514538: Media overlay styles missing when activated from WYSIWYG media button

Digging into this more, I'm pretty sure that this is caused by #2492841: Switch from hook_pre_render_styles() to hook_library_alter()

Which is bringing back this old issue: #1813180: Seven theme breaks the jQuery UI theme

I have an idea for allowing the theme to override the jQuery UI theme (which some theme other than Seven might want to do), but then still preventing the theme from Seven taking effect, since it's for an out dated jQuery UI version. I'll post a patch soon-ish.

Here's my first patch at this, just so you can see what I'm going for.

It gets both uses cases described in the issue summary working again, however, it's still not 100% finished because the tabs don't look right when using Seven as the admin theme which I'd still like to fix!

The issue with the tabs turns out to be in panopoly_widgets - it wasn't loading it's special media browser CSS if the theme was Seven. Here's a patch to fix that!

I'll run these through the automated tests on Travis-CI quick.

Here's the build on Travis-CI:

https://travis-ci.org/panopoly/panopoly/builds/69168680

Works like a charm, there's a blue outline around the initial close button, but I can't confirm whether that was there before. Not a blocker for this issue, just an observation.

For some reason the tests on Travis are failing. I'm able to reproduce the error locally, but it happens for me both with or without the patch. :-) In any case, it seems unrelated, and since this is Critical I'm going to commit the patches, and we can deal with the testing weirdness later.

EDIT: Could be connected with #2516882: Update to Selenium 2.46 but I'm not sure.

So, this fix is definitely not right somehow... It works great on content add/edit pages, but totally breaks the Video widget by causing the media browser to open below the CTools dialog. I'm not sure how this got passed me when I committed it, but I've been working all morning to try and fix it. :-/

Ok, I think I finally have something that works. Going to try this with the automated tests!

EDIT: Here's the build on Travis: https://travis-ci.org/panopoly/panopoly/builds/69309293

Ok, that passed! Committing the follow-up patch. I think we should be good now. :-)

First, thank you for all of your hard work on this issue as well as the distribution as a whole.

We just committed the 1.24 update. The panel area for each tab has a sufficient padding when using Seven as the theme for the Media Browser. Yes!

One issue that we are having is that the close button that is supposed to appear in the title bar is hidden. The issue is that, if the media browser is opened and the user decides that they do not want to add media, they have no way of closing the window. The only options are the web browser's back button or reloading the entire page. Both options mean that they will lose any changes that had been made to the content.

The code for the titlebar area shows the button html but the html seems to be hidden and the CSS does not show a background image or a close image:

<button class="ui-dialog-titlebar-close"></button>

And, the CSS:

.ui-dialog button.ui-dialog-titlebar-close {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  position: absolute;
  right: 15px;
  top: 0;
}
 

Any ideas on how to get the dialogue close button to show?

@hfarrier: What combination of theme and admin theme are you using? Are you opening the Media Browser via WYSIWYG, a field on a node edit form, or on the Video widget?

I just did a fresh install of Panopoly 1.24 and I tried all the theme combinations and places to trigger the Media Browser that I could think of and I'm not able to reproduce - the close button always shows for me.

Just in case (although, I'm sure you already tried this) have you tried clearing all Drupal caches?

@dsnopek: While we were having the issue, I tried every possible combo of theme and admin theme as well as launching media browser via node field and wysiwyg. Cleared the site cache over and over. The only time the close button would appear was when using Responsive Bartik as the admin theme (and even though the button showed, the styling was less than desirable).

However, I just checked this morning and the close button now appears (with correct styling) for all admin themes. I think it may have been a Varnish cache issue. This seems to that happen infrequently with the Pantheon workflow.

Not sure if you are in the states or not but Happy 4th of July!

Awesome! I'm glad to hear it's working. :-)

Turns out it was not due to varnish caching. The admin theme we were using includes a css_alter function that loads its own custom jquery ui css. Our issue seems similar to what @solipsist is reporting in another thread. So, I posted our findings on that thread here:

https://www.drupal.org/node/2525208#comment-10088322

Is anyone else reporting that the pagination is missing in the media browser's library and my files tabs? I tested with the seven admin theme and seven theme for media browser and the pagination seems to be missing. I'm going to open a new thread on this.