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

MetaPreview props/styles updated for readaility

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-06 18:36:36 +03:00
parent 8c18f48c3d
commit 26cd151a92
2 changed files with 19 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/common/MetaPreview/MetaPreview.js
View file

@ -7,7 +7,7 @@ const ActionButton = require('./ActionButton');
const MetaLinks = require('./MetaLinks');
const styles = require('./styles');
const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '', background = '', duration = '', releaseInfo = '', released = '', description = '', genres = [], writers = [], directors = [], cast = [], imdbRating = '', links = {}, inLibrary = false, toggleInLibrary }) => {
const MetaPreview = ({ className, compact, id, type, name, logo, background, duration, releaseInfo, released, description, genres, writers, directors, cast, imdbRating, links, inLibrary, toggleInLibrary }) => {
const [shareModalOpen, openShareModal, closeShareModal] = useBinaryState(false);
const releaseInfoText = React.useMemo(() => {
const releasedDate = new Date(released);
@ -19,9 +19,6 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
:
null;
}, [releaseInfo, released]);
const logoOnError = React.useCallback((event) => {
event.currentTarget.style.display = 'none';
}, []);
const genresLinks = React.useMemo(() => {
return Array.isArray(genres) ?
genres.map((genre) => ({
@ -80,14 +77,14 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
:
null
}
<div className={styles['meta-info']}>
<div className={styles['meta-info-container']}>
{
typeof logo === 'string' && logo.length > 0 ?
<img
key={logo}
className={styles['logo']}
src={logo}
onError={logoOnError}
alt={' '}
/>
:
null
@ -97,13 +94,13 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
<div className={styles['duration-release-info-container']}>
{
typeof releaseInfoText === 'string' && releaseInfoText.length > 0 ?
<div className={styles['release-info']}>{releaseInfoText}</div>
<div className={styles['release-info-label']}>{releaseInfoText}</div>
:
null
}
{
typeof duration === 'string' && duration.length > 0 ?
<div className={styles['duration']}>{duration}</div>
<div className={styles['duration-label']}>{duration}</div>
:
null
}
@ -111,12 +108,9 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
:
null
}
{
typeof name === 'string' && name.length > 0 ?
<div className={styles['name-container']}>{name}</div>
:
null
}
<div className={styles['name-container']}>
{typeof name === 'string' && name.length > 0 ? name : id}
</div>
{
typeof description === 'string' && description.length > 0 ?
<div className={styles['description-container']}>{description}</div>
@ -222,8 +216,8 @@ const MetaPreview = ({ className, compact = false, id, type, name = '', logo = '
MetaPreview.propTypes = {
className: PropTypes.string,
compact: PropTypes.bool,
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
id: PropTypes.string,
type: PropTypes.string,
name: PropTypes.string,
logo: PropTypes.string,
background: PropTypes.string,

20
src/common/MetaPreview/styles.less
View file

@ -44,7 +44,7 @@
}
}
.meta-info {
.meta-info-container {
flex: 1;
align-self: stretch;
padding: 0 1rem;
@ -54,7 +54,7 @@
display: block;
max-width: 100%;
height: 7rem;
margin: 1rem 0;
margin-top: 1rem;
object-fit: contain;
object-position: left center;
background-color: var(--color-surfacedarker20);
@ -64,34 +64,32 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1rem 0;
margin-top: 1rem;
.duration, .release-info {
.duration-label, .release-info-label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
margin: 1rem 1rem 1rem 0;
font-size: 1.2rem;
text-align: center;
color: var(--color-surfacelighter);
}
}
.name-container {
margin: 1rem 0;
margin-top: 1rem;
font-size: 1.4rem;
color: var(--color-surfacelighter);
}
.description-container {
margin: 1rem 0;
margin-top: 1rem;
color: var(--color-surfacelighter);
}
.meta-links {
margin: 1rem 0;
&:last-child {
margin-bottom: 0;
}
margin-top: 1rem;
}
}