[WIP] Discover page horizontal scroll implementation #394
|
|
@ -1,15 +1,180 @@
|
|||
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
import lbryio from "lbryio.js";
|
||||
import lbryuri from "lbryuri";
|
||||
import FileCard from "component/fileCard";
|
||||
import { BusyMessage } from "component/common.js";
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
import { Icon, BusyMessage } from "component/common.js";
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
import ToolTip from "component/tooltip.js";
|
||||
|
||||
const FeaturedCategory = props => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const { category, names } = props;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
class FeaturedCategory extends React.PureComponent {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
componentWillMount() {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.setState({
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
numItems: this.props.names.length,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
canScrollPrevious: false,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
canScrollNext: true,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
});
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
handleScrollPrevious() {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (cardRow.scrollLeft > 0) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// check the visible cards
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
let firstVisibleCard = null;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
let firstVisibleIdx = -1;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (this.isCardVisible(cards[i], cardRow, false)) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
firstVisibleCard = cards[i];
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
firstVisibleIdx = i;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
break;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const numDisplayed = this.numDisplayedCards(cardRow);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const scrollToIdx = firstVisibleIdx - numDisplayed;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const animationCallback = () => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.setState({
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
canScrollPrevious: cardRow.scrollLeft !== 0,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
canScrollNext: true,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
});
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
};
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
scrollToIdx < 0 ? 0 : cards[scrollToIdx].offsetLeft,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
100,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
animationCallback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
handleScrollNext() {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// check the visible cards
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
let lastVisibleCard = null;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
let lastVisibleIdx = -1;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (this.isCardVisible(cards[i], cardRow, true)) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleCard = cards[i];
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleIdx = i;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (lastVisibleCard) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const numDisplayed = this.numDisplayedCards(cardRow);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const animationCallback = () => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// update last visible index after scroll
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (this.isCardVisible(cards[i], cardRow, true)) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleIdx = i;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.setState({ canScrollPrevious: true });
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (lastVisibleIdx === cards.length - 1) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.setState({ canScrollNext: false });
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
};
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
this.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
Math.min(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
lastVisibleCard.offsetLeft,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollWidth - cardRow.clientWidth
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
),
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
100,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
animationCallback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
scrollCardItemsLeftAnimated(cardRow, target, duration, callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (!duration || duration <= diff) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollLeft = target;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback();
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const component = this;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const diff = target - cardRow.scrollLeft;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const tick = diff / duration * 10;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
setTimeout(() => {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow.scrollLeft = cardRow.scrollLeft + tick;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (cardRow.scrollLeft === target) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (callback) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback();
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
component.scrollCardItemsLeftAnimated(
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
cardRow,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
target,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
duration - 10,
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
callback
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}, 10);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
isCardVisible(section, cardRow, partialVisibility) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// check if a card is fully or partialy visible in its parent
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRowWidth = cardRow.offsetWidth;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRowLeft = cardRow.scrollLeft;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRowEnd = cardRowLeft + cardRow.offsetWidth;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const sectionLeft = section.offsetLeft - cardRowLeft;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const sectionEnd = sectionLeft + section.offsetWidth;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return (
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
(sectionLeft >= 0 && sectionEnd <= cardRowWidth) ||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
(((sectionLeft < 0 && sectionEnd > 0) ||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
(sectionLeft > 0 && sectionLeft <= cardRowWidth)) &&
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
partialVisibility)
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
numDisplayedCards(cardRow) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardRowWidth = cardRow.offsetWidth;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// get the width of the first card and then calculate
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const cardWidth = cards.length > 0 ? cards[0].offsetWidth : 0;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
if (cardWidth > 0) {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return Math.ceil(cardRowWidth / cardWidth);
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
// return a default value of 1 card displayed if the card width couldn't be determined
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
return 1;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
render() {
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const { category, names } = this.props;
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const leftNavClassName =
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
"card-row__nav left-nav" +
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
(this.state.canScrollPrevious ? " can-scroll" : "");
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
const rightNavClassName =
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
"card-row__nav right-nav" +
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
(this.state.canScrollNext ? " can-scroll" : "");
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
return (
|
||||
<div className="card-row card-row--small">
|
||||
<div className={leftNavClassName}>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<a
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
className="card-row__scroll-button"
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
onClick={this.handleScrollPrevious.bind(this)}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<Icon icon="icon-chevron-left" />
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
</a>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
</div>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<div className={rightNavClassName}>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<a
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
className="card-row__scroll-button"
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
onClick={this.handleScrollNext.bind(this)}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<Icon icon="icon-chevron-right" />
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
</a>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
</div>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
<h3 className="card-row__header">
|
||||
{category}
|
||||
{category &&
|
||||
|
|
@ -22,6 +187,7 @@ const FeaturedCategory = props => {
|
|||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
className="tooltip--header"
|
||||
/>}
|
||||
</h3>
|
||||
<div ref="rowitems" className="card-row__items">
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
{names &&
|
||||
names.map(name =>
|
||||
<FileCard
|
||||
|
|
@ -31,8 +197,10 @@ const FeaturedCategory = props => {
|
|||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
);
|
||||
};
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
}
|
||||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
||||
class DiscoverPage extends React.PureComponent {
|
||||
componentWillMount() {
|
||||
|
|
|
|||
|
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
Would it be cleaner to handle this just by wrapping the Would it be cleaner to handle this just by wrapping the `<Icon>` in something like `<a onClick={this.handleScrollNext.bind(this)} />`?
No No `var` :P
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
@import "../global";
|
||||
|
||||
$padding-card-horizontal: $spacing-vertical * 2/3;
|
||||
$translate-card-hover: 10px;
|
||||
|
||||
.card {
|
||||
margin-left: auto;
|
||||
|
|
@ -94,10 +95,13 @@ $card-link-scaling: 1.1;
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: $box-shadow-focus;
|
||||
transform: scale($card-link-scaling);
|
||||
transform: scale($card-link-scaling) translate3d($translate-card-hover, 0, 0);
|
||||
transform-origin: 50% 50%;
|
||||
overflow-x: visible;
|
||||
overflow-y: visible;
|
||||
overflow-y: visible
|
||||
}
|
||||
.card--link:hover ~ .card--link {
|
||||
transform: translate3d($translate-card-hover * 2, 0, 0);
|
||||
}
|
||||
|
||||
.card__media {
|
||||
|
|
@ -183,26 +187,73 @@ $height-card-small: $spacing-vertical * 15;
|
|||
}
|
||||
|
||||
.card-row {
|
||||
+ .card-row {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
}
|
||||
}
|
||||
.card-row__items {
|
||||
> .card {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: $spacing-vertical / 3;
|
||||
}
|
||||
+ .card-row {
|
||||
margin-top: $spacing-vertical * 1/3;
|
||||
> .card:last-child {
|
||||
margin-right: 0
|
||||
}
|
||||
}
|
||||
.card-row--small {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
|
||||
/*hacky way to give space for hover */
|
||||
padding-left: 20px;
|
||||
margin-left: -20px;
|
||||
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: 30px;
|
||||
margin-right: -30px;
|
||||
}
|
||||
.card-row__header {
|
||||
margin-bottom: $spacing-vertical / 3;
|
||||
}
|
||||
|
||||
.card-row__nav {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 0 $spacing-vertical / 1.5;
|
||||
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 .card-row__scroll-button {
|
||||
background: $color-bg;
|
||||
color: $color-help;
|
||||
box-shadow: $box-shadow-layer;
|
||||
padding: $spacing-vertical $spacing-vertical / 2;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
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;
|
||||
}
|
||||
.card-row__nav.right-nav {
|
||||
right: 0;
|
||||
}
|
||||
.card-row__nav.can-scroll {
|
||||
display: block
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ $color-header-active: darken($color-header, 20%);
|
|||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
padding: $spacing-vertical / 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
Would it be cleaner to handle this just by wrapping the
<Icon>in something like<a onClick={this.handleScrollNext.bind(this)} />?No
var:P