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() {
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
if (cardRow.scrollLeft > 0) {
// check the visible cards
const cards = cardRow.getElementsByTagName("section");
var firstVisibleCard = null;
var firstVisibleIdx = -1;
let firstVisibleCard = null;
let firstVisibleIdx = -1;
for (var i = 0; i < cards.length; i++) {
if (this.isCardVisible(cards[i], cardRow, false)) {
firstVisibleCard = cards[i];
@ -61,8 +52,8 @@ class FeaturedCategory extends React.PureComponent {
// check the visible cards
const cards = cardRow.getElementsByTagName("section");
var lastVisibleCard = null;
var lastVisibleIdx = -1;
let lastVisibleCard = null;
let lastVisibleIdx = -1;
for (var i = 0; i < cards.length; i++) {
if (this.isCardVisible(cards[i], cardRow, true)) {
lastVisibleCard = cards[i];
@ -108,8 +99,8 @@ class FeaturedCategory extends React.PureComponent {
}
const component = this;
var diff = target - cardRow.scrollLeft;
var tick = diff / duration * 10;
const diff = target - cardRow.scrollLeft;
const tick = diff / duration * 10;
setTimeout(() => {
cardRow.scrollLeft = cardRow.scrollLeft + tick;
if (cardRow.scrollLeft === target) {
@ -157,13 +148,6 @@ class FeaturedCategory extends React.PureComponent {
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() {
const { category, names } = this.props;
const leftNavClassName =
@ -176,10 +160,20 @@ class FeaturedCategory extends React.PureComponent {
return (
<div className="card-row card-row--small">
<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 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>
<h3 className="card-row__header">
{category}

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

@ -205,18 +205,19 @@ $height-card-small: $spacing-vertical * 15;
overflow: hidden;
white-space: nowrap;
position: relative;
/*hacky way to give space for hover */
padding-right: 20px;
margin-right: -20px;
padding-right: 30px;
}
.card-row__items {
width: 100%;
overflow: hidden;
/*hacky way to give space for hover */
padding-top: 20px;
margin-top: -20px;
padding-right: 20px;
margin-right: -20px;
padding-right: 30px;
margin-right: -30px;
}
.card-row__header {
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);
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;
color: $color-help;
box-shadow: $box-shadow-layer;
@ -239,6 +240,13 @@ $height-card-small: $spacing-vertical * 15;
left: 0;
top: 36%;
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 {
left: 0;
@ -248,4 +256,4 @@ $height-card-small: $spacing-vertical * 15;
}
.card-row__nav.can-scroll {
display: block
}
}