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

Dashboard header doesn't stick on mobile resolution #2434

Closed
jama22 opened this Issue Jul 30, 2018 · 3 comments

Comments

Projects
4 participants
@jama22
Copy link
Member

jama22 commented Jul 30, 2018

This occurs when viewing the Dashboard at mobile resolutions. The black header bar with search should remain sticky

screen shot 2018-07-30 at 10 07 43 am

@jama22 jama22 created this issue from a note in UX (Backlog: Web) Jul 30, 2018

@vito vito added the size/medium label Jul 30, 2018

@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

pivotal-jamie-klassen commented Oct 1, 2018

there could be some interplay with the "sticky header" technology we are using here. More specifically, we have an elm port that enables a jQuery plugin that sets the vertical offset of the sticky team headers to a hardcoded value. I'm going to spike a bit on using elm-css to see if we can get a more type-safe implementation (and maybe reduce our dependence on ports and external javascript while we're at it)

@pivotal-jamie-klassen pivotal-jamie-klassen moved this from Backlog: Web to In Flight in UX Oct 1, 2018

@Lindsayauchin

This comment has been minimized.

Copy link

Lindsayauchin commented Oct 2, 2018

Capturing the conversation @pivotal-jamie-klassen and I had about a more elegant solution to the mobile view top navigation bar.

Because the top navigation bar is increasing in height, in the current implementation, this is causing problems with the logout and sticky team name feature. If we can better arrange the elements in the top nav to better accommodate the search input and log out/in button we can reduce the amount of chrome and users can better view their pipeline thumbnails with more height now available.

Proposed solution:

  • keep the top navigation bar the same height at all breakpoints
  • move the icon beside the concourse logo button
  • remove the search input box outline

search_mobile_dashboard

  • search input outlined box will appear on the selection of the icon and cover the username/ logout button (similar to https://concourse-ci.org/)

search_mobile_dashboard_expanded

@pivotal-jamie-klassen pivotal-jamie-klassen added paused and removed paused labels Oct 3, 2018

ddadlani added a commit that referenced this issue Oct 5, 2018

web: minor fixes
- dashboard top bar remains sticky on mobile resolutions
  (#2434)
- fix undocumented regression on no pipelines page: the vertical
  centering had stopped working due to CSS changes involved in
  extraneous scrollbar

Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
@pivotal-jamie-klassen

This comment has been minimized.

Copy link
Contributor

pivotal-jamie-klassen commented Oct 18, 2018

@Lindsayauchin the only edge case I have not covered (and it is a somewhat exotic one) is this:

when you are in the mobile view and the search bar is collapsed (the first screenshot above), the keyboard shortcut for search (/) does nothing. You might have expected it to expand and focus the search bar.

I consider this exotic because you are generally not relying on keyboard shortcuts at the mobile view. @jama-pivotal does this strike you as reasonable?

Either way, if this feature is desirable, let's maybe put it in a different story? I've added a ton of tests as part of this work and it's going to help with some single source of truth refactors down the line. once the NewTopBar and Dashboard models get unified as part of this, testing and implementing the keyboard shortcut feature will be easier.

pivotal-jamie-klassen added a commit that referenced this issue Oct 18, 2018

web: make dashboard header sticky on mobile
also add a lot of tests, use more elm-css

#2434

Signed-off-by: Jamie Klassen <cklassen@pivotal.io>

@pivotal-jamie-klassen pivotal-jamie-klassen moved this from In Flight to Done in UX Oct 18, 2018

@jama22 jama22 added the accepted label Nov 19, 2018

@jama22 jama22 closed this Nov 19, 2018

@vito vito added this to the v5.0.0 milestone Jan 10, 2019

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