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

Add background highlighting to Collection overview section when active #1280

Open
ggeisler opened this issue Nov 7, 2022 · 3 comments · May be fixed by #1339
Open

Add background highlighting to Collection overview section when active #1280

ggeisler opened this issue Nov 7, 2022 · 3 comments · May be fixed by #1339
Assignees
Labels

Comments

@ggeisler
Copy link
Contributor

ggeisler commented Nov 7, 2022

Currently when the user selects a node from the Collection contents tree, the component page for that node is displayed in the main content area and background highlighting is added to that node in the Collection contents tree. This highlighting helps the user understand what component is currently selected, and reinforces the association between the sidebar navigation element and its associated content in the main content area:

Screen Shot 2022-11-07 at 2 17 54 PM


We should do the same thing for the Collection overview section, for the same reasons:

Screen Shot 2022-11-07 at 2 37 26 PM


Some implications of this:

  • When a collection page is first loaded (via a breadcrumb link, search result link, etc.), the first item in the collection overview nav should be highlighted.
  • Anytime the collection sidebar is displayed, one (and only one) thing in it should be highlighted: either a nav item in Collection overview (when the Collection page is displayed in the main content area) or a node in the Collection contents tree (when a component is displayed in the main content area).
  • The combination of the two points above are important in helping the user learn how the sidebar works in relation to the main content area, which can be a little non-intuitive at first because of how the collection and component details look very different in the main content area.
@thatbudakguy
Copy link
Member

I feel like this might be a little more complicated than the ticket suggests, and we might need additional clarification to figure out how to do it right. Gary noted above:

When a collection page is first loaded (via a breadcrumb link, search result link, etc.), the first item in the collection overview nav should be highlighted.

...which doesn't seem to happen in #1339 if you load, for example, /catalog/aoa271 directly. That makes sense; when the page has initially loaded, none of the sidebar links have been clicked. The implication is that when viewing the collection, the first thing you see is the summary, so it should appear the same as if you'd already clicked "summary" (with the #summary anchor active).

This gets a little weird when you throw scrolling into it. If I scroll down the page to look at "background", the "summary" link will still be highlighted in the sidebar, even though I'm not "looking" at the summary section anymore. You don't notice this right now because the sidebar scrolls away along with the main content, but #1312 will make it sticky, so it'll be more obvious.

To me, the behavior that fits Gary's notes above is actually something more like bootstrap's scrollspy: highlight something based on where the user is currently "looking", i.e. what part of the page's content is currently in the viewport. That satisfies the conditions:

  • something is always active/highlighted, because you're always "looking" at a part of the page
  • when you scroll to a section of content farther down, the highlighted link automatically changes
  • if you click something in the sidebar, you jump to that section (current behavior)

@marlo-longley
Copy link
Contributor

Discussion: Justin's PR #1339 is a subset but perhaps not covering all the bullet points in this ticket.
We decided to wait to work on this ticket until Gary's return.

@ggeisler
Copy link
Contributor Author

ggeisler commented Jan 6, 2023

@thatbudakguy Yes, what I was suggesting is the scrollspy behavior. As you note, #1312 is also needed to make this behavior work in the most ideal way (ensures the user can always see the highlighted overview section that they've selected). I guess I assumed at the time that #1312 was pretty straightforward and that would be in place for this ticket to work with.

I'm not sure if I'm missing any other hurdles or concerns about doing this, but am happy to meet to discuss in more detail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants