Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

NavBar added to board and search

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-09 10:11:24 +03:00
parent 0b1d9b27d9
commit d290150c4d
4 changed files with 84 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/routes/Board/Board.js
View file

@ -1,6 +1,6 @@
const React = require('react');
const classnames = require('classnames');
const { MetaItem } = require('stremio-common');
const { MetaItem, NavBar } = require('stremio-common');
const { Input } = require('stremio-navigation')
const withGroups = require('./withGroups');
const styles = require('./styles');
@ -56,53 +56,66 @@ class Board extends React.PureComponent {
render() {
return (
<div className={styles['board-container']}>
{
this.props.groups.length === 0 ?
this.renderMetaItemPlaceholders()
:
<React.Fragment>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{this.props.groups[0].items.map((item) => (
<MetaItem.default
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
modalContainerClassName={styles['modal-container']}
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
menuOptions={CONTINUE_WATCHING_MENU}
menuOptionOnSelect={this.menuOptionOnSelect}
onClick={this.onClick}
/>
))}
<React.Fragment>
<NavBar
backButton={false}
tabs={[
{ label: 'Board', icon: 'ic_board', href: '#/' },
{ label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ label: 'Library', icon: 'ic_library', href: '#/library' },
{ label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
]}
searchBar={true}
userMenu={true}
/>
<div className={styles['board-container']} tabIndex={-1}>
{
this.props.groups.length === 0 ?
this.renderMetaItemPlaceholders()
:
<React.Fragment>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{this.props.groups[0].items.map((item) => (
<MetaItem.default
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
modalContainerClassName={styles['modal-container']}
posterShape={item.posterShape === 'landscape' ? 'square' : item.posterShape}
menuOptions={CONTINUE_WATCHING_MENU}
menuOptionOnSelect={this.menuOptionOnSelect}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
{
this.props.groups.slice(1, this.props.groups.length).map((group) => {
return (
<div key={group.id} className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
<div className={styles['meta-items-container']}>
{group.items.map((item, _, metaItems) => (
<MetaItem.default
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
onClick={this.onClick}
/>
))}
{
this.props.groups.slice(1, this.props.groups.length).map((group) => {
return (
<div key={group.id} className={classnames(styles['board-row'], styles['addon-catalog-row'])}>
<div className={styles['meta-items-container']}>
{group.items.map((item, _, metaItems) => (
<MetaItem.default
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
onClick={this.onClick}
/>
))}
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
<Input className={styles['show-more-container']} type={'button'} />
</div>
);
})
}
</React.Fragment>
}
</div>
);
})
}
</React.Fragment>
}
</div>
</React.Fragment>
);
}
}

23
src/routes/Search/Search.js
View file

@ -1,11 +1,26 @@
import React, { Component } from 'react';
const React = require('react');
const { NavBar } = require('stremio-common');
const styles = require('./styles');
class Search extends Component {
class Search extends React.Component {
render() {
return (
<div style={{ color: 'pink', paddingTop: 40 }}>You're on the Search Tab</div>
<React.Fragment>
<NavBar
backButton={false}
tabs={[
{ label: 'Board', icon: 'ic_board', href: '#/' },
{ label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ label: 'Library', icon: 'ic_library', href: '#/library' },
{ label: 'Calendar', icon: 'ic_calendar', href: '#/calendar' },
]}
searchBar={true}
userMenu={true}
/>
<div className={styles['search-container']} />
</React.Fragment>
);
}
}
export default Search;
module.exports = Search;

4
src/routes/Search/index.js
View file

@ -1,3 +1,3 @@
import Search from './Search';
const Search = require('./Search');
export default Search;
module.exports = Search;

4
src/routes/Search/styles.less Normal file
View file

@ -0,0 +1,4 @@
.search-container {
background-color: var(--color-background);
height: 100%;
}