When the media module is enabled I get weird borders and spacing in rubik. See screenshot attached.

CommentFileSizeAuthor
#13 Create Article Sportswriters.com 2.0.png26.61 KBrerooting
#12 Capture d’écran 2012-09-07 à 12.54.53.png25.96 KBcamdarley
#6 1623510-6-rubik-widget-styling.patch5.02 KBJackinloadup
#5 search-button-style.png11.81 KBcoffeymachine
#5 missing-top-border.png13.85 KBcoffeymachine
#5 active-style.png14.19 KBcoffeymachine
#3 1623510-1418412-rubik-widget-styling.patch3.57 KBpschuelke
#2 1623510-1418412-rubik-widget-styling.patch3.54 KBpschuelke
#1 after.jpg11.81 KBcodi
#1 rubik-media_cleanup-1623510.patch521 bytescodi
before.jpg16.29 KBcodi

Comments

codi’s picture

codi commented
StatusFileSize
new rubik-media_cleanup-1623510.patch521 bytes
new after.jpg11.81 KB

Cleaned up the media widget for image and videos. Added some nested form-item selectors to remove excess borders and added a border to the form-wrapper class.

pschuelke’s picture

pschuelke commented
StatusFileSize
new 1623510-1418412-rubik-widget-styling.patch3.54 KB

I re-rolled codi's patch #1 with dave's patch (issue 1418412 #2) and added additional styles

pschuelke’s picture

pschuelke commented
StatusFileSize
new 1623510-1418412-rubik-widget-styling.patch3.57 KB

one more little thing added. this replaces #2.

rerooting’s picture

rerooting commented

Confirmed that this fixes everything, including issues I had with the media browser in 2.x . Thanks!

a.button is also really handy when using things like panels + rules_link for fancy interfaces, so supporting a snazzy a.button style will be very useful!

coffeymachine’s picture

coffeymachine commented
Status: Needs review » Needs work
StatusFileSize
new active-style.png14.19 KB
new missing-top-border.png13.85 KB
new search-button-style.png11.81 KB

This is looking good, but there are still a few minor issues that I'd like to be fixed before committing this patch. See the attached screenshots.

  1. This created a gray box around the search button in the search form block. That should stay as it was.
  2. The top border seems to be missing from the a.button style.
  3. The a.button:active state needs to be styled, right now, it shows the check icon from the button-yes class. It should only show that if it has the button-yes class, which the button in the screenshot does not.

Thank you for all your work, once we can tighten these things up I will be happy to commit the patch.

Jackinloadup’s picture

Jackinloadup commented
StatusFileSize
new 1623510-6-rubik-widget-styling.patch5.02 KB

This should fix the issues mentioned in #5.

Also used rubik icons for the media buttons.

Jackinloadup’s picture

Jackinloadup commented
Status: Needs work » Needs review
coffeymachine’s picture

coffeymachine commented
Status: Needs review » Fixed

Hi, everyone. Thank you for all your work on this.

I took Jackinloadup's patch and tweaked several very minor things, some padding, font styles, and the launcher button style, and I'm very happy with how it looks.
I've committed this to the 7.x-4.x branch.

rerooting’s picture

rerooting commented

Yeah it looks great! My mistake on confirming too early, I overlooked some details. Also works with epsacrop and other modules that add new buttons and components to the media field widget.

k4v’s picture

k4v commented

works great for me =)

rerooting’s picture

rerooting commented

One more thing!

In file_entity 2.x, the background image for the modal media 'edit file' form does not repeat horizontally for whatever reason and looks pretty wonky. I'm just recanting this from memory, should be able to fix it with a very amount of css.

camdarley’s picture

camdarley commented
StatusFileSize
new Capture d’écran 2012-09-07 à 12.54.53.png25.96 KB

Is the .form-wrapper border useful? It create ugly border on Rules elements.
rules form-wrapper

rerooting’s picture

rerooting commented
StatusFileSize
new Create Article Sportswriters.com 2.0.png26.61 KB

@camdarley Yeah I saw that. Possibly we would need to be more selective of applying it to form-wrapper, I find that it's useful for what it was applied for.

I'll also see if I can't get around to fixing the edit file modal in #11 for file_entity, has anyone gave that a shot? I know that using media-2.x/file-entity-2.x in this way is new territory for some, and I'd be glad to explain how to reproduce it.

Heres a screenshot of what i'm talkin about:

File Entity issue

Status: Fixed » Closed (fixed)

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

prinds’s picture

prinds commented

I have opened a seperate issue about the border problems mentioned in #12 here #2155277: Border on .form-wrapper