discover page horizontal scroll initial progress
This commit is contained in:
Akinwale Ariwodola
parent
658e88a467
commit
a842f23799
2 changed files with 157 additions and 33 deletions
|
|
@ -1,38 +1,122 @@
|
|||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import lbryio from "lbryio.js";
|
||||
import lbryuri from "lbryuri";
|
||||
import FileCard from "component/fileCard";
|
||||
import { BusyMessage } from "component/common.js";
|
||||
import { Icon, BusyMessage } from "component/common.js";
|
||||
import ToolTip from "component/tooltip.js";
|
||||
|
||||
const FeaturedCategory = props => {
|
||||
const { category, names } = props;
|
||||
class FeaturedCategory extends React.PureComponent {
|
||||
componentWillMount() {
|
||||
this.setState({
|
||||
numItems: this.props.names.length,
|
||||
canScrollPrevious: false,
|
||||
canScrollNext: true,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="card-row card-row--small">
|
||||
<h3 className="card-row__header">
|
||||
{category}
|
||||
{category &&
|
||||
category.match(/^community/i) &&
|
||||
<ToolTip
|
||||
label={__("What's this?")}
|
||||
body={__(
|
||||
'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!'
|
||||
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) {
|
||||
cardRow.scrollLeft = 0;
|
||||
this.setState({ canScrollPrevious: false, canScrollNext: true });
|
||||
}
|
||||
}
|
||||
|
||||
handleScrollNext() {
|
||||
const cardRow = ReactDOM.findDOMNode(this.refs.rowitems);
|
||||
|
||||
// check the visible cards
|
||||
const cards = cardRow.getElementsByTagName("section");
|
||||
var lastVisibleCard = null;
|
||||
var lastVisibleIdx = -1;
|
||||
for (var i = 0; i < cards.length; i++) {
|
||||
if (this.isCardVisible(cards[i], cardRow)) {
|
||||
lastVisibleCard = cards[i];
|
||||
lastVisibleIdx = i;
|
||||
}
|
||||
}
|
||||
|
||||
if (lastVisibleCard) {
|
||||
cardRow.scrollLeft = Math.min(
|
||||
lastVisibleCard.offsetLeft + 16,
|
||||
cardRow.scrollWidth - cardRow.clientWidth
|
||||
);
|
||||
this.setState({ canScrollPrevious: true });
|
||||
}
|
||||
if (lastVisibleIdx === cards.length - 1) {
|
||||
this.setState({ canScrollNext: false });
|
||||
}
|
||||
}
|
||||
|
||||
isCardVisible(section, cardRow) {
|
||||
var cardRowLeft = cardRow.scrollLeft;
|
||||
var cardRowEnd = cardRow.offsetWidth;
|
||||
var sectionLeft = section.offsetLeft;
|
||||
var sectionEnd = sectionLeft + section.offsetWidth;
|
||||
|
||||
return sectionEnd <= cardRowEnd && sectionLeft >= cardRowLeft;
|
||||
}
|
||||
|
||||
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 =
|
||||
"card-row__nav left-nav" +
|
||||
(this.state.canScrollPrevious ? " can-scroll" : "");
|
||||
const rightNavClassName =
|
||||
"card-row__nav right-nav" +
|
||||
(this.state.canScrollNext ? " can-scroll" : "");
|
||||
|
||||
return (
|
||||
<div className="card-row card-row--small">
|
||||
<div className={leftNavClassName}>
|
||||
<Icon ref="scrollPrevious" icon="icon-chevron-left" />
|
||||
</div>
|
||||
<div className={rightNavClassName}>
|
||||
<Icon ref="scrollNext" icon="icon-chevron-right" />
|
||||
</div>
|
||||
<h3 className="card-row__header">
|
||||
{category}
|
||||
{category &&
|
||||
category.match(/^community/i) &&
|
||||
<ToolTip
|
||||
label={__("What's this?")}
|
||||
body={__(
|
||||
'Community Content is a public space where anyone can share content with the rest of the LBRY community. Bid on the names "one," "two," "three," "four" and "five" to put your content here!'
|
||||
)}
|
||||
className="tooltip--header"
|
||||
/>}
|
||||
</h3>
|
||||
<div ref="rowitems" className="card-row__items">
|
||||
{names &&
|
||||
names.map(name =>
|
||||
<FileCard
|
||||
key={name}
|
||||
displayStyle="card"
|
||||
uri={lbryuri.normalize(name)}
|
||||
/>
|
||||
)}
|
||||
className="tooltip--header"
|
||||
/>}
|
||||
</h3>
|
||||
{names &&
|
||||
names.map(name =>
|
||||
<FileCard
|
||||
key={name}
|
||||
displayStyle="card"
|
||||
uri={lbryuri.normalize(name)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DiscoverPage extends React.PureComponent {
|
||||
componentWillMount() {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ $card-link-scaling: 1.1;
|
|||
}
|
||||
.card--link:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 2;
|
||||
box-shadow: $box-shadow-focus;
|
||||
transform: scale($card-link-scaling);
|
||||
transform-origin: 50% 50%;
|
||||
|
|
@ -183,26 +183,66 @@ $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;
|
||||
margin-left: -20px
|
||||
}
|
||||
.card-row__items {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
/*hacky way to give space for hover */
|
||||
padding-top: 20px;
|
||||
margin-top: -20px;
|
||||
padding-right: 20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.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);
|
||||
z-index: 1;
|
||||
height: ($width-card-small * 9 / 16) + ($font-size * 0.82 * $font-line-height * 4) + ($spacing-vertical * 4/3)
|
||||
}
|
||||
.card-row__nav .icon {
|
||||
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%
|
||||
}
|
||||
.card-row__nav.left-nav {
|
||||
left: 20px; /** using 20px left padding **/
|
||||
}
|
||||
.card-row__nav.right-nav {
|
||||
right: 0;
|
||||
}
|
||||
.card-row__nav.can-scroll {
|
||||
display: block
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue