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

feature/scrollbar-gradient #30

Open
wants to merge 1 commit into
base: beta-1.0
Choose a base branch
from
Open

feature/scrollbar-gradient #30

wants to merge 1 commit into from

Conversation

cdrani
Copy link
Contributor

@cdrani cdrani commented Feb 23, 2020

Note: This PR is rebased off of #29 so it would wise to merge that one in prior to this one.

Dynamically generate scrollbar styles based on card colors. Note that scrollbar styles are only supported on blink and webkit based browsers like chrome & safari.
Firefox doesn't seem to be supported currently in my estimation as tested on FireFox Developer Edition.

Updated with Firefox's scrollbar-color property, however it doesn't allow using a linear-gradient
color so colors are the first card color for the track and the last card color for the thumb.

Feel free to adjust the styling to your liking.

closes #22

@cdrani cdrani requested a review from varlevi February 23, 2020 16:00
@cdrani cdrani changed the base branch from master to beta February 24, 2020 22:41
@cdrani
Copy link
Contributor Author

cdrani commented Mar 8, 2020

@varlevi : Rebased off of beta and fixed conflicts. This is ready for a review.

@varlevi
Copy link
Owner

varlevi commented Mar 9, 2020

Hmm... the site will no longer open on Firefox. It just loads up a blank page. Also, in Chrome and Vivaldi it's not showing up as a gradient, just the lightest shade of the color.

At this point, I wondering if this is best held off until I've developed a way for the user to turn off this feature as well, because for some I can see how this might be distracting. (Might be a good button to put in the settings pane in #26.)

Copy link
Owner

@varlevi varlevi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I addressed this in the issue connected, but just realized I never reviewed. Sorry! As I explained in the issue, this PR doesn't appear to work in Firefox or Safari, and only partially works in Chrome (not a gradient, just one color). In addition, after thinking it over, I'm thinking it might be better to implement this feature after there is a way for the user to turn it on and off, because while I could find myself using this, I can also see some others finding it distracting. I hope you understand. I probably should have thought about it before I made the issue and not after you took the time to write this code. However, I've shelved this so that we can implement it a little later if we want.

const endColor = colors[colors.length - 1].style.backgroundColor;
const styleTag = document.createElement("style");

const trackStyle = `
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't appear to be styling the scrollbar with a gradient on Chrome.

@varlevi
Copy link
Owner

varlevi commented May 8, 2020

Hi @cdrani!

So I've thought about this feature for a bit now and have come up with a design that I think will fit better with the site. However, it will involve a lot more customization than your PR. I'm thinking it will be a good feature to release in v1.0.0 alongside the site redesign planned in #51. Below I've attached a prototype image of what I think the scrollbar should look like and would love your feedback. If your still up for it, I'd be happy if you want to tackle this feature again, but if not, I totally understand. Life is crazy right now for everyone and I'm sure you are very busy! I will also attach some of this information to the corresponding issue. Thanks for all the contributions you've made to this project!

@varlevi
Copy link
Owner

varlevi commented May 8, 2020

Prototype image:

shade_swash_with_scroll

@varlevi varlevi changed the base branch from beta to beta-1.0 May 9, 2020 17:23
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.

Customize sidebar scroller with gradient
2 participants