-
Notifications
You must be signed in to change notification settings - Fork 9
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
labsite: Tweak CSS and scrolling behavior #425
Conversation
Fix light-theme sample selection, as it hadn't been looked at and wasn't properly styled.
Refactor CSS to use CSS nesting for (hopefully) better readability. Nesting is a newer CSS feature that should make it easier to make out things belonging together. I'm not so sure I'm using it all that well, but I had a mix before and I tried to reduce it. I've also removed a couple of duplicated rules and used ones. This should cleanup commit without any visual changes. Link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📗
It scrolls smoothly for me - chrome on linux.
I'm not sure why you wanted it to scroll leaving part of the next button chopped off. I think I would have scrolled the button all the way off the top. But just preference so merge away!
Improve the scrolling experience on Next button click: We now always scroll the next button to the top of the page with the top edge a little clipped. Smooth scrolling is also enabled, so it should hopefully be more obvious what's going on when clicking on the next button. Unfortunately smooth scrolling doesn't seem to work on my linux machine in Firefox or Chrome, but it seem ok on MacOS and iOS.
fb3fb7b
to
eeaf7d1
Compare
ok, I've changed it. I only had it that way so it was more obvious what's going on |
That makes sense. If you feel that is needed you can stick with it. |
Refactor labsite CSS to use more modern CSS features, especially nesting.
Finally fix the broken looking light-theme sample selection on the playsite and
labsite.
Tweak the scrolling behavior for Next button clicks: we always scroll to top of
notes section. We also use "smooth" scrolling (rather than immediate jumping to
target), which makes it more obvious what's going on. Tested to work on iOS and
MacOS, Chrome, Safari, Firefox. Unfortunately no dice on my Ubuntu laptop with
Smooth scrolling on any browser 🤷♀.
Link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
Deployed at https://lab.evytest.dev