Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-03 17:09:01 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

metaitem subtitle ui implemented

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-01-18 15:21:05 +02:00
parent a6f95967b3
commit 29f466ca50
2 changed files with 35 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/common/MetaItem/MetaItem.js
View file

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { Popup } from 'stremio-common'; import { Popup } from 'stremio-common';
@ -48,12 +48,13 @@ class MetaItem extends Component {
); );
} }
renderTitleBar() { renderInfoBar() {
if (this.props.title.length === 0 && this.props.menu.length === 0) { if (this.props.title.length === 0 && this.props.menu.length === 0 && this.props.subtitle.length === 0) {
return null; return null;
} }
return ( return (
<Fragment>
<div className={styles['title-bar-container']}> <div className={styles['title-bar-container']}>
<div className={styles['title']}>{this.props.title}</div> <div className={styles['title']}>{this.props.title}</div>
{ {
@ -77,6 +78,15 @@ class MetaItem extends Component {
null null
} }
</div> </div>
{
this.props.subtitle.length > 0 ?
<div className={styles['title-bar-container']}>
<div className={styles['title']}>{this.props.subtitle}</div>
</div>
:
null
}
</Fragment>
); );
} }
@ -84,7 +94,7 @@ class MetaItem extends Component {
return ( return (
<div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}> <div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}>
{this.renderPoster()} {this.renderPoster()}
{this.renderTitleBar()} {this.renderInfoBar()}
</div> </div>
); );
} }

3
src/common/MetaItem/styles.less
View file

@ -1,6 +1,7 @@
.meta-item-container { .meta-item-container {
margin: 10px; margin: 10px;
display: inline-block; display: inline-flex;
flex-direction: column;
background-color: var(--color-backgroundlight); background-color: var(--color-backgroundlight);
.poster-image-container { .poster-image-container {