Left align nav items
Dependencies
Proposal
Left align the navigation (1st level and 2nd level of tabs) to the content container block, not to the edge of the viewport. The very top level area (logo, group, project, etc.) should stay fixed to the edges of the viewport.
The top area is global content. The navigation links relate directly to the content area.
Activity
Quick note: I think navigation (1st level and 2nd level of tabs) should be aligned to content block, not edge of window. Let me know if that makes sense to you @annabeldunstone. Thanks!
@awhildy so the navigation links should be in the content container but the very top level content (logo/project etc) should not be?
-
@annabeldunstone - Yes. The top is global content. The navigation links relate directly to the content area.
mentioned in issue #26200 (closed)
Something like this ?
About https://gitlab.com/gitlab-org/gitlab-ce/issues/26200#note_23118306 :
What I want to say is that the sidebar issue and that of the menu in a unitary way is a mistake imo. The main problem of the UI is precisely the lack of coherence.
Otherwise I agree that there is indeed a problem with the sidebar, not so much because the concept is bad but especially in the way it's implemented. The sidebar before 8.9 was quite relevant.
added ~19492 feature proposal labels
-
@alexispires - We are working on the overall coherence of the navigation. https://gitlab.com/gitlab-org/gitlab-ce/issues/27557. Thanks!
Left aligning with the content block make the most sense from a usability perspective, and visually seems fine to me.
-
Thanks for updating the issue body @pedroms!
@awhildy The problem imo is not so much if it's better at left than at center. This is more than the UX has no more consistency:
@alexispires here are 2 screenshots on big screen:
1. Content align
2. Absolute align
While 2nd one seems more logical but it would be quite uncomfortable to use. Thats why I prefer 1st screen
P.S. Settings dropdown (far right) becomes a "Settings" tab so there will be no misbalance
Edited by username-removed-444I really like @awgeorge1 version. Another version, more contrasted (ok I confess I copied a little github):
-
Thanks, but we stick to original proposal as a best candidate so far https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#proposal
mentioned in issue #13680 (moved)
If we implement Option 1 from https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#note_23359555 won't that make nav items jump around depending on the page you are in?
-
@cperessini Hm. If we finish the line length work (https://gitlab.com/gitlab-org/gitlab-ce/issues/13680) will more pages be consistent? I understand that wouldn't impact the Issue board page...but the others?
-
@awhildy The issue page would still change its width depending on the sidebar being expanded or collapsed, for example.
I can think of two solutions, but there may be more:
-
Left-aligning content, so everything shares the same anchoring point
-
Constraining navigation to the content width as in the mockups added by @awgeorge1 and @alexispires https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#note_23408483 https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#note_23417758 With this solution stuff like the Issue Board and the Issue/MR sidebar would "spill out" to the sides, but I think that's not necessarily bad
I prefer the second option and I think it can actually look good in those edge cases and be an improvement over what we have now
-
marked the task https://gitlab.com/gitlab-org/gitlab-ce/issues/26200 as completed
-
A while back (probably almost a year ago) we had some designs to left align group/project header info. We may want to think about doing that again, because it looks sort of odd now that the navigation is no longer centered:
-
Here's the page with the limited container (only on issues and MRs so far)
With the sidebar open:
I agree with @cperessini; @awgeorge1 & @alexispires mockups may be the way to go here. If the top navigation is within the same content container, it won't look as weird with all the different alignments. Once we have the new limited-widths throughout the site, and when we get the settings button into a tab, we can look at going back to the full-width top nav. What do you think @awhildy?
Feel free to checkout the branch and see what you think https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/9338
Edited by Annabel Gray mentioned in merge request !9338 (merged)
closed via merge request !9338 (merged)
-
Thanks @annabeldunstone! Yep - after playing with it, I agree. I think we should put the top navigation in the same content container as @awgeorge1 and @alexispires suggest. Thanks all!
mentioned in merge request !9420 (closed)
-
Left-aligning our navigation is bringing up some problems with pages that have a special width for content, like Issues and Merge Requests, as they can result in navigation items being shifted with respect to other pages.
It also doesn't play very well with the sidebar in Issues and Merge Requests, since it needs to be pinned to the right edge of the screen.
Unless we can come up with a plan that solves those problems, we should revert to centered navigation, which doesn't suffer from them.
mentioned in merge request !9423 (merged)
-
@annabeldunstone @cperessini based on your comments I see why we should not do align by content. What about version 2 (Absolute align) from https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#note_23359555 ?
-
@dzaporozhets Yeah, that could work but we'd need to redo the group/project info container. It looked really strange having the navigation over on the left and the header information still centered. If we can get a design for those blocks we could still do this for
9.0
cc @awhildy -
@hazelyang - do you think left aligning the project header content could work? ideas on how it could work? Thanks!
-
^ @hazelyang and group header!
To me, there is a disconnect between navigation and content in the absolute alignment seen here https://gitlab.com/gitlab-org/gitlab-ce/issues/27934#note_23359555
I don't believe there is a problem with the design seen here: https://gitlab.com/gitlab-org/gitlab-ce/issues/26200#note_22815452
There is extra white space, but it is not excessive unless you have a very wide browser. Also, I noted one of the MRs that with the addition of nested groups, the name in the content switcher could be much longer and we now have more space to display longer names without the logo there. See design here: https://gitlab.com/gitlab-org/gitlab-ce/issues/28187#note_23539372
I think there is further work we need to do to the navigation. In the mean time, I believe the centered tabs makes the most sense.
@pedroms I know you were doing some work originally around left aligning the navigation so maybe you have some ideas or insight that counter mine. Would love to hear your thoughts as well.
-
@annabeldunstone @tauriedavis I believe we all agree that we need to move logo to the left so we can fit longer project names and nested groups. So lets do it right now for 9.0 and leave navigation centered for now.
mentioned in merge request !9588 (merged)
closed via merge request !9588 (merged)
@tauriedavis yes, I agree with you. The use of ellipsis was something I had on my mind as well, so we are aligned on that
Just tried out
9.0, and the top of the page really feels empty without the logo there in the center. I'd be fine with it if there was only ever the one layer of navigation up there, like there is on the Projects page, but with two layers of navigation, as can be found when you're in a repo, it feels like something's missing from the top. The remaining center-aligned nav draws one's attention to this.Edited by username-removed-701523-
Thanks for the feedback @idtownie - We limit user preferences to features that we feel will help improve a users' workflow. The position of the logo does not fall into the category so we won't be adding it as an option.
