[WIP] Discover page horizontal scroll implementation #394

Closed

akinwale wants to merge 7 commits from ui-category-carousel into master

akinwale commented

2017-07-27 02:58:03 +02:00

(Migrated from github.com)

Removed horizontal scroll bars
Added scroll left and right buttons

Ideally, the card scaling on the horizontal axis should be able to push the siblings as required (quite similar to how the Netflix carousel works), but I haven't been able to figure out how to do this yet with the CSS transform, so you have the elements being clipped at the beginning or the end of each category.

* Removed horizontal scroll bars * Added scroll left and right buttons Ideally, the card scaling on the horizontal axis should be able to push the siblings as required (quite similar to how the Netflix carousel works), but I haven't been able to figure out how to do this yet with the CSS transform, so you have the elements being clipped at the beginning or the end of each category.

akinwale commented

2017-07-27 10:38:31 +02:00

(Migrated from github.com)

Sorted out (and perhaps improved) the hover display using the translate3d transform. I've also implemented simple animation for the scroll effect. I suppose it could be improved as I'm not sure making multiple recursive calls to setTimeout (10 in my current implementation) for each animation is very efficient.

kauffj (Migrated from github.com) reviewed 2017-07-28 00:27:08 +02:00

kauffj (Migrated from github.com) left a comment

Some initial feedback.

ui/js/page/discover/view.jsx

kauffj (Migrated from github.com) commented

2017-07-28 00:13:57 +02:00

Would it be cleaner to handle this just by wrapping the <Icon> in something like <a onClick={this.handleScrollNext.bind(this)} />?

Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?

kauffj (Migrated from github.com) commented

2017-07-28 00:16:00 +02:00

No var :P

No `var` :P

ui/scss/component/_card.scss

kauffj (Migrated from github.com) commented

2017-07-28 00:19:29 +02:00

Adding a wrapper element to <Icon> could also eliminate some of this potentially undesirable styling.

(Overriding styles introduces the ability for future changes to have difficult to see side-effects.)

Adding a wrapper element to `<Icon>` could also eliminate some of this potentially undesirable styling. (Overriding styles introduces the ability for future changes to have difficult to see side-effects.)

kauffj (Migrated from github.com) commented

2017-07-28 00:20:23 +02:00

A hover effect on this would also be nice. Maybe slightly larger size and icon size, as well as changing the icon color?

kauffj commented

2017-07-28 00:33:28 +02:00

(Migrated from github.com)

Really like the behavior on the whole @akinwale!

akinwale commented

2017-07-28 04:47:47 +02:00

(Migrated from github.com)

Would it be cleaner to handle this just by wrapping the <Icon> in something like <a onClick={this.handleScrollNext.bind(this)} />?

Well, this is why sleep is important. I was up late working and completely forgot that this was possible.

Pushed a new commit which addresses this and the other issues. Also made the arrows 50% transparent, and fully opaque with a transition effect on hover. Also tweaked the card row to have equal spacing on the left and right.

> Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`? Well, this is why sleep is important. I was up late working and completely forgot that this was possible. Pushed a new commit which addresses this and the other issues. Also made the arrows 50% transparent, and fully opaque with a transition effect on hover. Also tweaked the card row to have equal spacing on the left and right.

kauffj commented

2017-07-29 20:17:03 +02:00

(Migrated from github.com)

@akinwale Merged. See my additional changes here: 00f2413597

@akinwale Merged. See my additional changes here: https://github.com/lbryio/lbry-app/commit/00f2413597dc7ba713f17d2b381588fe4b943cee