Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-18 21:12:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

meta items row with overflow fixed

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-05-17 16:01:43 +03:00
parent 08e78c0c22
commit 1d1dc454f8
2 changed files with 37 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,10 +35,6 @@ class Board extends React.PureComponent {
}
render() {
if (this.props.groups.length === 0) {
return null;
}
return (
<div className={styles['board-container']}>
<NavBar
@ -54,43 +50,50 @@ class Board extends React.PureComponent {
userMenu={true}
/>
<div className={styles['board-content']} tabIndex={-1}>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{this.props.groups[0].items.map((item) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
menuClassName={styles['menu-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>
{
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'])}>
this.props.groups.length > 0 ?
<React.Fragment>
<div className={classnames(styles['board-row'], styles['continue-watching-row'])}>
<div className={styles['meta-items-container']}>
{group.items.map((item, _, metaItems) => (
{this.props.groups[0].items.map((item) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${metaItems[0].posterShape}`])}
posterShape={metaItems[0].posterShape}
progress={0}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape === 'landscape' ? 'square' : item.posterShape}`])}
menuClassName={styles['menu-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>
);
})
{
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
{...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>
);
})
}
</React.Fragment>
:
null
}
</div>
</div>

6
src/routes/Board/styles.less
View file

@ -68,10 +68,11 @@
}
.meta-items-container {
flex: 5;
flex: 1;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
.meta-item {
margin: 1em;
@ -91,8 +92,9 @@
}
.show-more-container {
flex: none;
width: 10em;
margin: 1em;
flex: 1;
background-color: var(--color-backgroundlighter);
cursor: pointer;
}