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

Alternative to country list scroll #195

Open
wants to merge 15 commits into
base: master
Choose a base branch
from

Conversation

MrSpiffyClean
Copy link
Contributor

So, this is an alternative to the way the right side of the page is being scrolled. I had thought of this some time ago, but just changing a single line didn't seem too big of an improvement, so I added a bit more functionality to make it worth it.
I'm creating the pull request mostly as a way to show what I thought of this and also as a way to check some bugs that might be lurking. I'm not saying this is the right or best way to do this, or even that there is a wrong way, just presenting different ways to do this.

So, this removes the scrollbar from the countries list, allowing for the right side to scroll. However, if you scroll to the bottom of the list, getting up might be an issue, so I tried to make the titles of the sections to always appear on top, and clicking on them would lead to the top of the sections.

The bugs I know of are two: There's a pixel-wide scrolling issue with the separator that I tried to fix, but it still shows up occasionally, and it might be browser dependent, as it's a drawing issue. The other one is due to keyboard scrolling with Tab, in which the section doesn't show the selected object.

Feedback and comments are always welcome.

Update to most recent state
Wrap the top elements of the Countries list such that they can stick on top.
.countriestopwrapper p needs to be at the bottom, after the other p declarations, because of specificity issues.
It is needed because of margin/padding conflicts (e.g. collapsing margins).
Also removing leftover .countries formatting relating to scrolling.
customizetopwrapper and separator are sticky.
countriestopwrapper was changed to accommodate the new sticky elements.
Changing aside padding-top to allow for the customizetopwrapper to work seamlessly.
min-width is removed from .search and .select, as they break the flow. (might change the width of aside to fix)
This enables "scroll to top" when clicking the titles, allowing for easy going back-from the sections.
Added h2 hover formatting
Changed some stuff in .separator and .countriestopwrapper
@netlify
Copy link

netlify bot commented Jun 1, 2020

Deploy preview for frosty-benz-8c81bf ready!

Built without sensitive environment variables with commit f27da65

https://deploy-preview-195--frosty-benz-8c81bf.netlify.app

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

Successfully merging this pull request may close these issues.

1 participant