Sticky header (and footer)

katierik commented 5 years ago

We would like an option for a sticky header. This sticky header would remain, well, sticky, while the user scrolls. This would likely be useful on mobile as well as desktop.

cc @KendraMar cc @ajacobs21e - wondering if you would also need this in designs

rachael-phillips commented 5 years ago

Hi @katierik @KendraMar @ajacobs21e

What product/project does this impact?
List any product/project release(s) and timelines your trying to align with
Are you interested in HTML/CSS only or leveraging a PF-React implementation?

ajacobs21e commented 5 years ago

@katierik I included a sticky header in my Solution Engine (Customer Portal) designs but that feature hasn't been reviewed by the team yet as something we want to pursue.

Another project on the Portal, the Red Hat Dashboard, does include a sticky nav. For your use case, does the header include links / navigation?

KendraMar commented 5 years ago

@ajacobs21e @rachael-phillips @katierik

RH Cloud Services (aka the old Insights) and all apps that join it (there are at least 6 of them so far)
September Ansible Fest
not sure re third question...I think it would be the Pfly4 team who would recommend the right approach?

@ajacobs21e Customers John and Logan ( paragraph below) were doing a pilot test of the RH Cloud Services app and made these comments about parts of the UI being sticky. Seems like they want only the table rows/data to scroll on page so that they can see everything from table headers above at all times (sound right to you, @katierik ?). Allie, have you guys heard this request before from other customers and product groups?

This is the hifi wireframe version of the working software they're using: https://redhat.invisionapp.com/d/main#/console/15805752/345127480/preview

Here are their comments:

"One complaint is I would like to see the Systems / CVEs buttons at the top of the page be frozen so that when I scroll I can always see those options. Today I have to scroll back up to the top before I can select them. This may just be a personal preference, but I see it as a time saver. John: Do Find a CVE and CVSS base score need to also be frozen? Logan: CVEs and Systems are critical. Find a CVE and CVSS base score would be nice, but not a big deal"

priley86 commented 5 years ago

+1 for adding this feature. I believe OpenShift and friends could use it as well.

cc: @aljesusg

aljesusg commented 5 years ago

+1 for Kiali Project

ajacobs21e commented 5 years ago

@KendraMar I have not heard that feedback before. @rblackbu have you heard anything similar for RHSM? To have the filters or table heading sticky as you scroll through a table? I think it makes a lot of sense though. My only concern would be the extra space between the CVE and Systems tabs and the top of the table. Have you talked to anyone on the visual design team about options to removing the white space (or in this case grey space) in a sticky situation?

rachael-phillips commented 5 years ago

PF4 team will investigate whether sticky header can be complete as a non-breaking change

maryclarke commented 5 years ago

Looking for clarification on what header is being requested to be sticky...the masthead or the toolbar above a data table or data list?

KendraMar commented 5 years ago

Hi, can we postpone discussion of this one to post summit? We need to investigate it more ourselves.

priley86 commented 5 years ago

i believe on our side this was in regard to the masthead - can you confirm @aljesusg ? I have checked OpenShift and I do not currently see any postion: sticky CSS. It seems the current resolution there was just to allow the page/sidebar contents to scroll independently. So pf-c-page__main is set to overflow-y: auto for example.

serenamarie125 commented 5 years ago

We should probably create multiple issues to track individual requests. For OpenShift & Kiali, having a sticky masthead is desired

serenamarie125 commented 5 years ago

@katierik can you clarify that for this issue, when you say sticky header, you are talking about the masthead (or something else)? Thanks!

KendraMar commented 5 years ago

@serenamarie125 @katierik See my description of the issue that generated this github issue. Also, see my comment about us postponing or examining the issue further before we do anything (unless, Serena, you have additional info about a need for what the customers above asked for).

aljesusg commented 5 years ago

yes @priley86 you can test this in storybook with the page-layout-default

Here is the gif

header

katierik commented 4 years ago

Following up on this with another ask for "sticky headers", this one for the Drift Analysis application on cloud.redhat.com. In this case, the table headers are intended to be sticky and stay in view as the user scolls down. Xnip2019-12-11_14-32-49

mcarrano commented 4 years ago

Transferring this to patternfly-design and assigning to myself. Requires more analysis on what elements need to be sticky and when components that would need to be enhanced.

KendraMar commented 4 years ago

@katierik @mcarrano Thinking that this could be a good assignment for Maria Svirikova.

@katierik let's talk tomorrow?

mcarrano commented 4 years ago

I'm feeling like this needs more definition before assigning a designer. What exactly are we trying to make sticky? I see a couple of unrelated things mentioned in this issue. One looks like a request for a sticky page header. The other request looks to address column headers in tables. Are there others? These would result in changes to separate components and can be mutually exclusive.

KendraMar commented 4 years ago

agreed. That's why I think we could have Maria Svirikova research this. She would need Katie's guidance, tho, so it's dependent on Katie's time.

mcarrano commented 4 years ago

@katierik @KendraMar That's fine. Just let me know how you want to proceed.

mcarrano commented 4 years ago

This article includes some interesting findings on the usability and accessibility of sticky elements: https://technology.blog.gov.uk/2018/05/21/sticky-elements-functionality-and-accessibility-testing/

KendraMar commented 4 years ago

Appreciate that, Matt.

@katierik know you're flat out currently, but wondering if you could work with Maria S (have her run with it) to pursue it?

katierik commented 4 years ago

Looping around on this - @MariSvirik and I are meeting to kick off this research Tues Feb 18

katierik commented 4 years ago

@MariSvirik did some great research around sticky headers - Adding a link here: https://docs.google.com/document/d/17GiSTOBi9hixM2GbAM2WVO41RU9CzUwI7q1wN-Lc8Dk/edit?usp=sharing

gdoyle1 commented 4 years ago

Related to #834 - I'll take a look at the research provided and then add mocks for sticky headers and footers for tables, data lists, and card views

gdoyle1 commented 4 years ago

Here's what I've come up with so far! https://marvelapp.com/prototype/79affd0 - feel free to comment on the marvel. I will be gathering more feedback today at the PF weekly stakeholder meeting as well

cc: @mcarrano @katierik @KendraMar

katierik commented 4 years ago

This looks good! I wonder how it would work with a situation like this, with tabs? (This is one of the exact screens that we are considering adding a sticky header to) Xnip2020-07-30_10-03-47

gdoyle1 commented 4 years ago

@katierik thanks for adding that use case! I'll add an example of that to the marvel project too

Edited: Just added it here https://marvelapp.com/prototype/79affd0

gdoyle1 commented 4 years ago

@mcarrano Here's the final Marvel project! There is documentation written in the beginning with a summary and more within each of the screens. Please let me know if this is enough for you to get started creating examples @mcoker

patternfly / patternfly-design

Sticky header (and footer) #768