LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

added transition and states for horizontal scroll arrows, and some css tweaks and fixes

Browse source
This commit is contained in:
Akinwale Ariwodola 2017-07-28 03:42:49 +01:00
parent 3c93d6553a
commit a5ced91030
2 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
ui/js/page/discover/view.jsx
View file

@ -15,22 +15,13 @@ class FeaturedCategory extends React.PureComponent {
}); });
} }
componentDidMount() {
const prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
const nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
this.scrollPreviousHandler = this.handleScrollPrevious.bind(this);
this.scrollNextHandler = this.handleScrollNext.bind(this);
prevIcon.addEventListener("click", this.scrollPreviousHandler);
nextIcon.addEventListener("click", this.scrollNextHandler);
}
handleScrollPrevious() { handleScrollPrevious() {
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems); const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
if (cardRow.scrollLeft > 0) { if (cardRow.scrollLeft > 0) {
// check the visible cards // check the visible cards
const cards = cardRow.getElementsByTagName("section"); const cards = cardRow.getElementsByTagName("section");
var firstVisibleCard = null; let firstVisibleCard = null;
var firstVisibleIdx = -1; let firstVisibleIdx = -1;
for (var i = 0; i < cards.length; i++) { for (var i = 0; i < cards.length; i++) {
if (this.isCardVisible(cards[i], cardRow, false)) { if (this.isCardVisible(cards[i], cardRow, false)) {
firstVisibleCard = cards[i]; firstVisibleCard = cards[i];
@ -61,8 +52,8 @@ class FeaturedCategory extends React.PureComponent {
// check the visible cards // check the visible cards
const cards = cardRow.getElementsByTagName("section"); const cards = cardRow.getElementsByTagName("section");
var lastVisibleCard = null; let lastVisibleCard = null;
var lastVisibleIdx = -1; let lastVisibleIdx = -1;
for (var i = 0; i < cards.length; i++) { for (var i = 0; i < cards.length; i++) {
if (this.isCardVisible(cards[i], cardRow, true)) { if (this.isCardVisible(cards[i], cardRow, true)) {
lastVisibleCard = cards[i]; lastVisibleCard = cards[i];
@ -108,8 +99,8 @@ class FeaturedCategory extends React.PureComponent {
} }
const component = this; const component = this;
var diff = target - cardRow.scrollLeft; const diff = target - cardRow.scrollLeft;
var tick = diff / duration * 10; const tick = diff / duration * 10;
setTimeout(() => { setTimeout(() => {
cardRow.scrollLeft = cardRow.scrollLeft + tick; cardRow.scrollLeft = cardRow.scrollLeft + tick;
if (cardRow.scrollLeft === target) { if (cardRow.scrollLeft === target) {
@ -157,13 +148,6 @@ class FeaturedCategory extends React.PureComponent {
return 1; return 1;
} }
componentWillUnmount() {
const prevIcon = ReactDOM.findDOMNode(this.refs.scrollPrevious);
const nextIcon = ReactDOM.findDOMNode(this.refs.scrollNext);
prevIcon.removeEventListener("click", this.scrollPreviousHandler);
nextIcon.removeEventListener("click", this.scrollNextHandler);
}
render() { render() {
const { category, names } = this.props; const { category, names } = this.props;
const leftNavClassName = const leftNavClassName =
@ -176,10 +160,20 @@ class FeaturedCategory extends React.PureComponent {
return ( return (
<div className="card-row card-row--small"> <div className="card-row card-row--small">
<div className={leftNavClassName}> <div className={leftNavClassName}>
<Icon ref="scrollPrevious" icon="icon-chevron-left" /> <a
className="card-row__scroll-button"
onClick={this.handleScrollPrevious.bind(this)}
>
<Icon icon="icon-chevron-left" />
</a>
</div> </div>
<div className={rightNavClassName}> <div className={rightNavClassName}>
<Icon ref="scrollNext" icon="icon-chevron-right" /> <a
className="card-row__scroll-button"
onClick={this.handleScrollNext.bind(this)}
>
<Icon icon="icon-chevron-right" />
</a>
</div> </div>
<h3 className="card-row__header"> <h3 className="card-row__header">
{category} {category}

20
ui/scss/component/_card.scss
View file

@ -205,18 +205,19 @@ $height-card-small: $spacing-vertical * 15;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
/*hacky way to give space for hover */ /*hacky way to give space for hover */
padding-right: 20px; padding-right: 30px;
margin-right: -20px;
} }
.card-row__items { .card-row__items {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
/*hacky way to give space for hover */ /*hacky way to give space for hover */
padding-top: 20px; padding-top: 20px;
margin-top: -20px; margin-top: -20px;
padding-right: 20px; padding-right: 30px;
margin-right: -20px; margin-right: -30px;
} }
.card-row__header { .card-row__header {
margin-bottom: $spacing-vertical / 3; margin-bottom: $spacing-vertical / 3;
@ -229,7 +230,7 @@ $height-card-small: $spacing-vertical * 15;
top: ($font-size * 1.4 * $font-line-height) + ($spacing-vertical / 3); top: ($font-size * 1.4 * $font-line-height) + ($spacing-vertical / 3);
height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3) height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3)
} }
.card-row__nav .icon { .card-row__nav .card-row__scroll-button {
background: $color-bg; background: $color-bg;
color: $color-help; color: $color-help;
box-shadow: $box-shadow-layer; box-shadow: $box-shadow-layer;
@ -239,6 +240,13 @@ $height-card-small: $spacing-vertical * 15;
left: 0; left: 0;
top: 36%; top: 36%;
z-index: 2; z-index: 2;
opacity: 0.5;
transition: transform 60ms ease-in-out;
&:hover {
opacity: 1.0;
transform: scale($card-link-scaling * 1.1)
}
} }
.card-row__nav.left-nav { .card-row__nav.left-nav {
left: 0; left: 0;
@ -248,4 +256,4 @@ $height-card-small: $spacing-vertical * 15;
} }
.card-row__nav.can-scroll { .card-row__nav.can-scroll {
display: block display: block
} }