Use the CSS only solution from Gin to indicate scrims (scrolling shadows) on top and bottom of content.

This removes the JS overhead and opts for a neat CSS solution which we're using for a while in Gin.

Issue fork navigation-3392407

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

saschaeggi created an issue. See original summary.

saschaeggi opened merge request !83

saschaeggi’s picture

saschaeggi
he/him
commented
Status: Active » Needs review
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented

I love this! For me this is working fine, but as I mentioned in Slack I recall Claire finding a bug when she was trying to do the same. Let's wait until Monday so she can get a chance to review this after working on #3380251: Scroll the sidebar when it's collapsed.

On the other side I see this is assuming the logo needs to stay sticky. The way the toolbar is implemented right now wouldn’t need it (the logo is not that important) but we might:

  1. end up moving the collapse button to the top. We're exploring designs after the feedback from #3385182: Toolbar Prototype Usability Testing Phase 2.
  2. end up opening that top region in the future to place stuff in there.

So for now the logo at the top sticky would be a change on behavior/designs although we might end up needing in the future. For this reason, I'd move the conversation about the logo sticky into a follow-up, and if Claire doesn't have any feedback from this we can merge the bottom one.

saschaeggi’s picture

saschaeggi
he/him
commented

@ckrina as this uses a sticky background technique the only issue I could think of would have been that the scrim was not shown when a background color is used like on the active subnavigation. But I've worked around this issue which using an rgba() value. Another method would be to use mix-blend-mode but rgba() might be the nicer option here.

On the other side I see this is assuming the logo needs to stay sticky. The way the toolbar is implemented right now wouldn’t need it (the logo is not that important) but we might:

Not at all. Just the bare minimum changes here (to move the scoll area to the content area) make it appear sticky, but we can change that as well.

So for now the logo at the top sticky would be a change on behavior/designs although we might end up needing in the future. For this reason, I'd move the conversation about the logo sticky into a follow-up, and if Claire doesn't have any feedback from this we can merge the bottom one.

We can change this behavior but would need to restructure the markup a little bit. I did not want to touch that just yet. Agreed that this could be done in a follow-up.

claireristow’s picture

claireristow commented

I also love this, thanks @saschaeggi! The CSS solution is cleaner and much less buggy.

The shadow itself looks a bit different but that can be adjusted in a follow-up issue if needed. Looks good to merge on my end!

saschaeggi’s picture

saschaeggi
he/him
commented

@ckrina rebased this MR, ready 🎉

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Fixed

Ok, merging this but a couple of follow-ups need to be addressed:

  • As mentioned, the header/logo shouldn't be sticky on desktop.
  • The most important one: the sticky region shouldn't be sticky on mobile. It doesn't give enough room to interact with the menu and is a regression on a usability perspective (specially if we want to test it next week).

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.