This stems from #1937926: Shortcuts toolbar tray does not properly float the "Edit shortcuts" link in Bartik where the patch in #15 fixes an issue with the Toolbar that kept the "Edit shortcuts" link from appearing on the same line as the actual shortcut links. The overly broad CSS in views_ui.admin.css was identified as follows:

/* @group Inline lists */

.horizontal > * {
  clear: none;
  float: left; /* LTR */
}

.horizontal.right {
  float: right;
}

.horizontal label {
  position: absolute;
}

.horizontal .form-item > [class] {
  margin-top: 25px;
}

.horizontal .form-item > [class] + [class] {
  margin-top: 0;
}

/* @end */

Specifically, the float: right on .horizontal > * results in the broken two-line display:

I'm not sure if just removing that float is all that's necessary, so I'm going to leave this active for someone with more knowledge of the Views UI CSS to let us know if that breaks any other part of the Views UI when removed. : )

For a screenie of the functioning behavior: #1937926-22: Shortcuts toolbar tray does not properly float the "Edit shortcuts" link in Bartik

CommentFileSizeAuthor
#10 Safari 5.1.9155.2 KBu.rodionov
#10 Chrome 28.0.1500.9571.96 KBu.rodionov
#7 Screen Shot 2013-07-29 at 11.48.44 PM.png13.48 KBlukewertz
#6 Screen Shot 2013-07-29 at 11.06.56 PM.png11.03 KBlukewertz
#3 views_ui-overbroad-floats-2031263-3.patch396 bytesapkwilson
#1 views_ui-overbroad-floats-2031263-1.patch396 bytesapkwilson
views-ui-css-toolbar.png29.49 KBrszrama

Comments

apkwilson’s picture

apkwilson commented
StatusFileSize
new views_ui-overbroad-floats-2031263-1.patch396 bytes

I'm no expert, but I took a look through Views and didn't see it adding a horizontal class anywhere. It uses a horizontal property on grid displays, but that's it.
So, I removed the float: left; (and float: right; on rtl) in the attached patch.

apkwilson’s picture

apkwilson commented
Status: Active » Needs review

status change

apkwilson’s picture

apkwilson commented
StatusFileSize
new views_ui-overbroad-floats-2031263-3.patch396 bytes

removing the empty "rtl" rule - should have done this before.

star-szr’s picture

star-szr
he/him
Primary language English
commented
Issue tags: +Needs screenshots

Nice work @apkwilson! Tagging for before and after screenshots.

star-szr’s picture

star-szr
he/him
Primary language English
commented

It would be a good idea to take screenshots for RTL as well.

lukewertz’s picture

lukewertz
He/Him
commented
Status: Needs review » Needs work
StatusFileSize
new Screen Shot 2013-07-29 at 11.06.56 PM.png11.03 KB

I don't think the patch in #3 addresses this issue.

Here's is a screen shot after the patch has been applied:
Shortcut menu

I think the issue here isn't the float as much as it is the underlying DOM:

<div class="lining clearfix">
  <h3 class="visually-hidden">User-defined shortcuts</h3>
  <ul class="menu clearfix">
    <li class="first leaf"><a href="/node/add">Add content</a></li>
    <li class="last leaf"><a href="/admin/content">All content</a></li>
  </ul>
  <a href="/admin/config/user-interface/shortcut/manage/default" class="edit-shortcuts">Edit shortcuts</a>
  <div class="toggle-orientation">
    <div class="lining">
      <button class="icon icon-toggle-vertical" type="button" value="vertical">Vertical orientation</button></div>
    </div>
  </div>
</div>

As you can see, the "Edit shortcuts" link isn't part of the User-defined shortcuts menu unordered object. I'm not really sure what the semantic solution here should be. It's clear that it doesn't belong where it is visually, but it doesn't really make sense to just stick it in the menu.

Thoughts?

lukewertz’s picture

lukewertz
He/Him
commented
StatusFileSize
new Screen Shot 2013-07-29 at 11.48.44 PM.png13.48 KB

Well, I tried the patch again (applying it before installing D8 to ensure there were no caching issues), and it worked!

User Shortcuts

@apkwilson: Great job.

It looks like the clearfix has been removed from the unordered object, so this corrects it.

rszrama’s picture

rszrama commented
Status: Needs work » Needs review

So would you say this is RTBC as opposed to needs work? Setting to needs review again pending your update.

lukewertz’s picture

lukewertz
He/Him
commented

I've tested this in latest Chrome, but will test it in more browsers to make sure it hasn't broken anything else (I'm looking at you, IE).

u.rodionov’s picture

u.rodionov commented
StatusFileSize
new Chrome 28.0.1500.9571.96 KB
new Safari 5.1.9155.2 KB

sreenshot MacOS

Safari 5.1.9
Chrome 28.0.1500.95

duozersk’s picture

duozersk
he/him
Primary language Russian
Location Moscow
commented
Assigned: Unassigned » duozersk
Status: Needs review » Closed (duplicate)

Hey guys,

Looks like this issue was resolved in another one - #2029451: Fix to general css in the views UI - commit http://drupalcode.org/project/drupal.git/commit/fedfd49 from August 9 that just removes all the ".horizontal" css rules from the views_ui.admin.css file.

We have tested it on the latest 8.x-dev branch and the issue is not present there - so marking as closed (duplicate).

Thanks
AndyB

u.rodionov’s picture

u.rodionov commented
Issue tags: +CodeSprintCIS

Done :)