Make userlist section titles sticky on scroll, improve contrasts for accessibility, use CSS variables #2643
Conversation
astorije
added
the
Type: Feature
|
Looks fine. Should we perhaps put a border under the search bar? And perhaps the input left padding should match so it doesn't look as misaligned? |
|
Would it be enough if the input had a bottom border? Also would a border color CSS var make any sense? It would be nice to have IMO, but not in this PR. |
@xPaw, it doesn't look like it because 💩 GIF, but the search has a different background (gray). It appears white on the GIF. Otherwise I'm not touching the search field in this PR, it will be for a later PR, there are other things that need to be done on the search field anyway. |
|
Does this PR fix #909 then? |
|
So the sticky menu hides active user when scrolling with keyboard arrows (scroll down a little, then arrow up). |
Yes! Thanks for noticing. |
…d improve constrast accessibility #767676 is the lightest gray that passes AA level of WCAG contrast recommendations
Good catch. It looks like there is not solution to have However, this is resolved by changing to |
|
Does that option work in Firefox esr? We had problems with it. Or Safari for that matter. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#Browser_compatibility |
|
Just tested and it works in Firefox 60. I believe the issues were with the "smooth" behavior, not this. Note that I don't have ESR but I believe ESR is 60, no? On Safari, it works exactly the same with So yeah, I think we should use |
| @@ -135,25 +128,6 @@ | |||
| color: #b7c5d1; | |||
There was a problem hiding this comment.
This and #chat table.channel-list td also use this color, are we not able to use var here?
There was a problem hiding this comment.
I've done a couple things in 8c09be9, let me know what you think:
- For unhandled messages, I moved the override to main styling and used muted color (I also applied it to the icons for MOTD and CTCP). I removed color for
#chat .fromwhich should always be set for specific things: colored or uncolored nicknames, icons, etc. - Removed color overrides for the channel list. There was no real reason to override the main color so now channel list table looks the same as ignored/ban user tables. I also removed the override on channel names in this table because I didn't think it brings anything to do that, and it's now more consistent with inline channels in chat content, and would keep it consistent if at some point we decided to style inline channels.
I didn't touch #windows .window h2 because that's something I'd want to do in the main style without resorting to this specific variable (so have a new variable for headings for example) and that's way outside of what I was trying to achieve here, I'll deal with this later if that works for you.
- This applies to channel list and user list sidebars - This avoids having a selected item behind a sticky header - This provides better UX by starting the scroll before the bottom (or top) is reached, giving a preview of what comes next (or before)
astorije
force-pushed
the
astorije/sticky-userlist
branch
from
8e7d100
to
0fa52ed
Compare
astorije
force-pushed
the
astorije/sticky-userlist
branch
from
0fa52ed
to
8c09be9
Compare
Works for me! |
Stickiness extracted from #2527. Also slightly updated styling, and improved accessibility of muted texts on default theme (via the new CSS var) and was able to get rid of some overrides in Morning due to that CSS var.
Browsers that do not support
position: stickyessentially do nothing with it (i.e. treat it as an element positioned by default) so that's good enough graceful degradation. It's essentially only Safari at this point so I'm not planning on a polyfill (Autoprefixer would take care of this anyway).(This is currently affected by #2635. It still works but doesn't look as good, so test withouthtml-minifier-loaderif you want to get the expected look)This PR now fixes #2635.
This happens to fix #909.