Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MetaRowPlaceholder moved to MetaRow

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-10-10 18:47:24 +03:00
parent 73ffe01549
commit ed534b22b8
5 changed files with 48 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js Normal file
View file

@ -0,0 +1,30 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const styles = require('./styles');
const MetaRowPlaceholder = ({ className, title, maximumItemsCount }) => {
maximumItemsCount = maximumItemsCount !== null && isFinite(maximumItemsCount) ? maximumItemsCount : 20;
return (
<div className={classnames(className, styles['meta-row-placeholder-container'])}>
<div className={styles['title-container']} title={title}>{title}</div>
<div className={styles['meta-items-container']}>
{Array(maximumItemsCount).fill(null).map((_, index) => (
<div key={index} className={styles['meta-item']}>
<div className={styles['poster-container']} />
<div className={styles['title-bar-container']} />
</div>
))}
</div>
<div className={styles['see-all-container']} />
</div>
);
};
MetaRowPlaceholder.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
maximumItemsCount: PropTypes.number
};
module.exports = MetaRowPlaceholder;

0
src/common/MetaRowPlaceholder/index.js → src/common/MetaRow/MetaRowPlaceholder/index.js
View file

21
src/common/MetaRowPlaceholder/styles.less → src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -7,13 +7,14 @@
.title-container {
grid-area: title-area;
height: 2.4rem;
max-height: 2.4em;
margin-bottom: 2rem;
font-size: 1.5rem;
color: var(--color-surface);
.title-label-container {
width: 60%;
height: 100%;
background-color: var(--color-placeholder);
&:empty {
height: 1.2em;
background: linear-gradient(to right, var(--color-placeholder) 0 40%, transparent 40% 100%);
}
}
@ -30,6 +31,16 @@
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
}
.title-bar-container {
height: 2.8rem;
background-color: var(--color-placeholder);
}
}
}
.see-all-container {
grid-area: see-all-area;
background-color: var(--color-placeholder);
}
}

52
src/common/MetaRowPlaceholder/MetaRowPlaceholder.js
View file

@ -1,52 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const styles = require('./styles');
const MetaRowPlaceholder = ({ className }) => {
return (
<div className={classnames(className, styles['meta-row-placeholder-container'])}>
<div className={styles['title-container']}>
<div className={styles['title-label-container']} />
</div>
<div className={styles['meta-items-container']}>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
<div className={styles['meta-item']}>
<div className={styles['poster-container']} />
</div>
</div>
</div>
);
};
MetaRowPlaceholder.propTypes = {
className: PropTypes.string
};
module.exports = MetaRowPlaceholder;

6
src/common/index.js
View file

@ -1,13 +1,12 @@
const Button = require('./Button');
const Checkbox = require('./Checkbox');
const ColorInput = require('./ColorInput');
const Multiselect = require('./Multiselect');
const Image = require('./Image');
const MainNavBar = require('./MainNavBar');
const MetaPreview = require('./MetaPreview');
const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
const MetaRow = require('./MetaRow');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const Multiselect = require('./Multiselect');
const NavBar = require('./NavBar');
const Popup = require('./Popup');
const ScrollEventEmitter = require('./ScrollEventEmitter');
@ -27,13 +26,12 @@ module.exports = {
Button,
Checkbox,
ColorInput,
Multiselect,
Image,
MainNavBar,
MetaPreview,
MetaPreviewPlaceholder,
MetaRow,
MetaRowPlaceholder,
Multiselect,
NavBar,
Popup,
ScrollEventEmitter,