Feedback on new šŸ” and user menus

What is happening seems to be this:

  • the panel-body is set to 100% height of the menu-panel
  • that height includes the 14px of padding (0.5em on top and bottom) that is on the menu-panel
  • the result is that the bottom 14px of the panel-body is clipped

If you temporarily get rid of the padding from the menu-panel you will see that it gets rid of the clipping.

Doing something like the following basically solves the problem, but there should be a more straightforward way:
$panelBody.height('calc(100% - 1em)');
The padding on the menu-panel is still being cut off at the bottom of the screen.

I think a lot of these positioning issues would be easier if Discourse was using the border-box box model.

I’ve submitted a PR that is along these lines, but better.

3 Likes

Integrating notifications into the user menu is a lot cleaner UI-wise; the only complaint I’ve heard from members is that there isn’t a direct link to Messages in either the hamburger menu or the user menu. The only access they have is through their own profiles, which seems like an unnecessary hassle.

1 Like

There is a link in the user menu:

2 Likes

It says my Discourse installation is up-to-date in the ACP, but I’m not seeing it.

http://puu.sh/k1Yr9/eec82d03fd.png

1 Like

That is because you are on the latest beta but are several commits ahead. Visit admin/upgrade to get the newer changes

3 Likes

I have a similar issue. I don’t even have any extra icons in the top right, but the notification is showing over on the left of the search button.

I’m really liking these changes, but there’s one thing that’s bugging me a bit…


Would it be possible to move these buttons up to the top row (at least the glyphs)?

It’ll make it look more balanced, especially compared to the new user menu.

They do get moved up to the top row once you read the FAQ.

3 Likes

Also keep in mind, this would only balance the design for admins, end users would still have a missing row there.

If we are doing a small icon treatment there I think we should pick something that is generally useful, but I am not convinced anything really fits there.

2 Likes

Uhm… since Discourse has a minimum browser requirement of 14, here’s a small catch: on FF 17 ESR, the categories are oddly misaligned:

Removing .badge-wrapper.bullet span.badge-category {display: inline-block;} fixes it for FF 17. It might cause problems elsewhere though.

Cool, thanks @simon - hope that fix gets picked up soon…

…and here’s another :bug:

Currently, if the categories list is sufficiently long, you cannot scroll the :hamburger: dropdown far enough to click on ā€œDesktop viewā€ - scrolling stops before the text of that link becomes visible, rendering that function useless. .ember-view .menu-panel .slide-in is simply some pixels too high.

4 Likes

The scrollbar in the profile menu is still bugging me. Can we do something about it?

I see it on desktop

and mobile (Chrome / Android 5)

4 Likes

The ā€œlog outā€ option is only presented if you’ve received at least one notification already.

1 Like

Are you sure? As it doesn’t look like that is a constraint. Do you have the site setting enabled to show it?

2 Likes

Oh! I was not aware it was a site setting. Good catch! nevermind then.

I’ve adjusted the logic that estimates how many notifications to show to try and reduce scrollbars from appearing. I also found an issue with the DOM Mutation observer that I fixed. I think you’ll be less likely to see scrollbars now.

Seems to be a little bit better, but I usually still get scrollbars on mobile and desktop. Does the logic include the height used by the Log Out link?

It does, it’s based on the mutation of the elements. Anything in the DOM that changes will cause a recalculation. Does it look like it can fit but can’t? It’s more likely it just can’t fit. I am still working on stuff a bit though.

Well, this is what it looks like on my desktop here on meta:

That’s a lot of notifications and the only reason for the scrollbar is the Log Out link. I’d rather have one less notification in order to get rid of the scrollbar.

2 Likes