Problem/Motivation

To reproduce:

Add several links to the Main Navigation menu, with a hierarchy.

Place the Main Navigation menu as a block on Sidebar Second.

The hierarchy is not easy to see, because the sub-menus are not indented. All you have is a small arrow next to the parent item. See screenshot -- in this menu, "How to do it" and "What's out there to do" are under "Leave physics" in the hierarchy, and the Bicycling link is NOT under Leave Physics, but this is not at all obvious from the menu styling.

Menu styling as a block

Proposed resolution

Add some indentation, text sizing, or some other signal besides a small triangle in the margin, to aid understanding that there is a hierarchy.

Remaining tasks

Make a patch.

User interface changes

Hierarchy of menus will be evident when they are displayed as blocks.

API changes

None.

Data model changes

None.

Comments

jhodgdon created an issue. See original summary.

jhodgdon’s picture

Issue summary: View changes
StatusFileSize
new11.73 KB

Better screenshot showing the next menu item.

Vidushi Mehta’s picture

StatusFileSize
new1.08 KB
new3.63 KB
new8.46 KB

Adding a patch for the same with the attached before and after screenshots.

Vidushi Mehta’s picture

Status: Active » Needs review
jhodgdon’s picture

That is way clearer to me... I'm not sure the circles on the child list items are needed though -- the indentation seems like it would be enough to provide clarity... so maybe turn off the circles?

Also this part of the patch looks out of scope for the issue:

+++ b/core/themes/stable/css/core/dropbutton/dropbutton.css
@@ -38,6 +38,10 @@
+/** when in quick edit mode **/
+#offcanvas td .dropbutton-widget {
+  position: inherit;
+}

And I'm unsure as to whether the other part of the patch would have implications outside the scope of this issue?

jhodgdon’s picture

Status: Needs review » Needs work
jordana’s picture

Status: Needs work » Needs review
Issue tags: +Dublin2016
StatusFileSize
new9.98 KB
new10.93 KB
new531 bytes

I checked this and didn't think the circles were necessary, nor adding a font size imho.
I also figured it would be a bit more scalable if we changed the padding to be in ems instead of px.
So basically the only thing this patch does is adding a padding of 1 em to the sub-menu's.

Before patch:

After patch:

jhodgdon’s picture

Status: Needs review » Reviewed & tested by the community

That looks like an excellent and simple solution to me. It seems like it would be specific to just this one problem, too. Thanks!

I think I will go ahead and mark it RTBC.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work

This needs to work for RTL (right-to-left languages) as well. Also it would be great to see a screenshot of an expanded menu inside an expanded menu.

jordana’s picture

Assigned: Unassigned » jordana
Status: Needs work » Needs review
StatusFileSize
new835 bytes
new21.79 KB
new19.81 KB
new23.08 KB
new22.61 KB

So, I checked everything by adding another expanded menu within the expanded menu.
I also set up a dummy RTL language set and to my great surprise the RTL works perfectly without any extra code.
In elements.css the nested ul and ol are already handled well on ln 143 to 151.
The code is in bartik/css/base/elements.css

ol ol,
ul ul {
  margin: 0;
  padding: 0 0 0.25em 1em; /* LTR */
}
[dir="rtl"] ol ol,
[dir="rtl"] ul ul {
  padding: 0 1em 0.25em 0;
}

I checked where it was going wrong in LTR and found that in two instances padding styles are added to only the LTR "ul.menu" element.
As far as I can tell, I can't seem to find a purpose yet as to why they are added.
They are:
in
bartik/css/components/menu.css (note that in rtl no padding styles are added)

/* This is needed to override ul.menu styles in menu.theme.css */
ul.menu {
  margin: 0;
  padding: 0 0 0.25em 0;
}

/* This is needed to override [dir="rtl"] ul.menu styles in menu.theme.css */
[dir="rtl"] ul.menu {
  margin: 0;
}
}

and in classy/css/components/menu.css (again note the lack of added padding styles for rtl)

ul.menu {
  list-style: none outside;
  margin-left: 1em; /* LTR */
  padding: 0;
  text-align: left; /* LTR */
}
[dir="rtl"] ul.menu {
  margin-left: 0;
  margin-right: 1em;
  text-align: right;
}

My proposal and Fix:

Remove the (apparently) redundant adding of 0 padding to the menu.css files in bartik and classy.
Find attached patch and screenshots.

RTL BEFORE & AFTER:

LTR BEFORE & AFTER PATCH:

jhodgdon’s picture

Status: Needs review » Reviewed & tested by the community

This is a very thorough analysis and the patch and screenshots look great to me. Thanks!

xjm’s picture

Status: Reviewed & tested by the community » Needs review

Thanks @jhodgdon and @jordana; the screenshots are quite helpful.

+++ b/core/themes/stable/css/core/dropbutton/dropbutton.css
@@ -38,6 +38,10 @@
+/** when in quick edit mode **/
+#offcanvas td .dropbutton-widget {
+  position: inherit;
+}

#offcanvas is provided by an experimental module and AFAIK we should not put support for it in Stable. Maybe this fix is out of scope or belongs in Settings Tray (a.k.a. outside_in) CSS?

jhodgdon’s picture

Status: Needs review » Reviewed & tested by the community

Um. This is weird.

The patch that is in #10 is not the same as the one that is shown in the Issue Summary area at the top of the page, which is from an earlier attempt.

The patch in #10 is the one I reviewed, and based on the comment in #11, xjm was looking at the older patch.. So, setting back to RTBC and fixing files section hopefully.

I don't get why the earlier files were being shown at the top of the page. ?!? Weird.

xjm’s picture

Assigned: jordana » star-szr

Ah, thanks @jhodgdon for clearing that up. So in the correct patch, there is just one change in Bartik and another in Classy.

The change in Bartik makes sense to me. However, Classy is supposed to be one of the stable base themes:

The stable base themes (Stable, Classy) are considered public API, with stable templates, markup, and CSS, so themes needing BC support should extend one of those base themes.

(From https://www.drupal.org/core/d8-bc-policy.)

Such a small whitespace change for a visual bugfix might be okay in a minor, but is it a required part of the fix?

Assigning to @Cottser for review.

xjm’s picture

For reference, the lines in Bartik were added with the whole file in #2548805: Add sensible base layout styles for lists in Bartik. and the line in Classy was similarly introduced with the whole file in #2395853: Split system.module.css and system.theme.css files into SMACSS style components.

The last submitted patch, 10: 2794565-10.patch, failed testing.

star-szr’s picture

Assigned: star-szr » Unassigned
Status: Reviewed & tested by the community » Needs review

Sorry for the delayed response, but this seems like a duplicate of #2607210: Visual regression: Sidebar menus are missing indentation styles., and we shouldn't be changing Classy, that's too risky. Since the other issue is much older, maybe we can inject some new energy into that one and close this as a duplicate. The other issue last I checked needed manual testing and screenshots. I can add issue credits for anyone who has worked on this issue to the other one if we agree it's a duplicate.

Thanks @xjm for the heads up on this.

star-szr’s picture

jhodgdon’s picture

It looks like the issue linked in #17/#18 should be marked as a duplicate of this issue then? This one has been around longer.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

jordana’s picture

@cottser I agree. I'll go ahead with whatever you guys think is the best way to tackle this. We can mark as duplicate and try to finally get this committed through the other issue :)

jordana’s picture

Status: Needs review » Closed (duplicate)