Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapsible Sidebar Issues #3187

Closed
flourish86 opened this issue Dec 5, 2017 · 7 comments

Comments

@flourish86
Copy link
Contributor

commented Dec 5, 2017

This is a collection of some smaller issues i discovered regarding the collapsible sidebar implementation.

  1. When the sidebar is collapsed, the navigation items scroll out of the visible area, when the search input is focussed. This could be reproduced in Safari. Expanding and collapsing again corrects this temporarily until the search input will be focussed again.

bildschirmfoto 2017-12-04 um 17 57 18

  1. Active first-level nav item should be better distinguishable from non active ones (When first level index is selected).

artboard 2

  1. The toggle-sidebar "lug" could be spaced wider and taller to better align with the nav icons, especially in collapsed state. It should also get a little offset to bottom to align with the status bar, when available.

artboard 3

  1. The second level fly out menu appears after a slight delay after hovering. While the delay seems necessary for addressing the "scrollbar issue" for hiding the fly out, it should appear immediately when hovering.

  2. In the original draft the flyout menu featured a caret on the left pointing to the according first level menu item. This doesn't harm usability too much, but should improve visual clarity, especially when another level-2 item is active.

artboard 4

Your Environment

Icinga Web 2 2.5.0, screenshot taken in Safari 10.11.1 on macOS

@dnewsholme

This comment has been minimized.

Copy link

commented Dec 5, 2017

To add to this list. Custom menu items which don't have an icon, just a name the text gets cut awkwardly when collapsed.

Perhaps just make it default to an icon of the first letter? Or some other generic default icon?

@lippserd lippserd added this to the 2.6.0 milestone Jan 16, 2018

@lippserd

This comment has been minimized.

Copy link
Member

commented Jan 16, 2018

An icon of the first letter sounds like a good idea to me.

@flourish86

This comment has been minimized.

Copy link
Contributor Author

commented Feb 13, 2018

I also noticed, that the active level-2 item should not alter appearance when hovered, as there is no action behind the item.

Currently it opacity is reduced.

screen shot 2018-02-13 at 10 18 39

@flourish86

This comment has been minimized.

Copy link
Contributor Author

commented May 28, 2018

edited item 2

theFeu pushed a commit that referenced this issue May 29, 2018

theFeu pushed a commit that referenced this issue May 29, 2018

@theFeu

This comment has been minimized.

Copy link
Contributor

commented May 29, 2018

Those should be fixed now:

  1. The toggle-sidebar "lug" could be spaced wider and taller to better align with the nav icons, especially in collapsed state. It should also get a little offset to bottom to align with the status bar, when available.

It looka a bit wonky in the IE, but for the modern browsers (chrome, firefox, safari, android mobile, ...) it looks as intended.

  1. The second level fly out menu appears after a slight delay after hovering. While the delay seems necessary for addressing the "scrollbar issue" for hiding the fly out, it should appear immediately when hovering.

Reduced the delay from 600 to 300 ms, so it feels a bit smoother

I also noticed, that the active level-2 item should not alter appearance when hovered, as there is no action behind the item.
Currently it opacity is reduced.

This is now fixed.

@theFeu

This comment has been minimized.

Copy link
Contributor

commented May 29, 2018

Point 1 is only an issue in Safari, where overflow: hidden moves the menu bar 2em to the left, instead of hiding the overflow.
The menu bar is 2em wider than needs to be because of an issue with the scrollbar (width: 2em) in IE / Edge that needs to be hidden (with mentioned overflow: hidden).

theFeu pushed a commit that referenced this issue May 30, 2018

theFeu pushed a commit that referenced this issue May 30, 2018

Jennifer Mourek
Fix point 2
refs #3187

theFeu pushed a commit that referenced this issue Jul 6, 2018

theFeu pushed a commit that referenced this issue Jul 6, 2018

@lippserd

This comment has been minimized.

Copy link
Member

commented Jul 17, 2018

Not all issues @flourish86 mentioned have been fixed, so I'll remove the target version and we'll fix this with a version after the 2.6.0 release.

@lippserd lippserd removed this from the 2.6.0 milestone Jul 17, 2018

@lippserd lippserd added this to the 2.7.0 milestone Feb 26, 2019

@nilmerg nilmerg modified the milestones: 2.7.0, 2.6.3 Apr 17, 2019

@nilmerg nilmerg removed the low priority label Apr 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.