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

MetaRow placeholder adapted to changes in layout and color

Browse source
This commit is contained in:
nklhrstv 2020-03-26 15:51:12 +02:00
parent 1a9eb42ddc
commit f7a8a298ad
2 changed files with 92 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/common/MetaRow/MetaRowPlaceholder/MetaRowPlaceholder.js
View file

@ -1,22 +1,37 @@
const React = require('react'); const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const CONSTANTS = require('stremio/common/CONSTANTS');
const styles = require('./styles'); const styles = require('./styles');
const MetaRowPlaceholder = ({ className, title, limit }) => { const MetaRowPlaceholder = ({ className, title, href }) => {
return ( return (
<div className={classnames(className, styles['meta-row-placeholder-container'])}> <div className={classnames(className, styles['meta-row-placeholder-container'])}>
<div className={styles['title-container']} title={title}>{title}</div> <div className={styles['header-container']}>
<div className={styles['content-container']}> <div className={styles['title-container']} title={typeof title === 'string' && title.length > 0 ? title : null}>
<div className={styles['meta-items-container']}> {typeof title === 'string' && title.length > 0 ? title : null}
{Array(limit).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>
<div className={styles['see-all-container']} /> {
typeof href === 'string' && href.length > 0 ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={href}>
<div className={styles['label']}>SEE ALL</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
:
null
}
</div>
<div className={styles['meta-items-container']}>
{Array(CONSTANTS.CATALOG_PREVIEW_SIZE).fill(null).map((_, index) => (
<div key={index} className={styles['meta-item']}>
<div className={styles['poster-container']} />
<div className={styles['title-bar-container']}>
<div className={styles['title-label']} />
</div>
</div>
))}
</div> </div>
</div> </div>
); );
@ -25,7 +40,7 @@ const MetaRowPlaceholder = ({ className, title, limit }) => {
MetaRowPlaceholder.propTypes = { MetaRowPlaceholder.propTypes = {
className: PropTypes.string, className: PropTypes.string,
title: PropTypes.string, title: PropTypes.string,
limit: PropTypes.number.isRequired href: PropTypes.string
}; };
module.exports = MetaRowPlaceholder; module.exports = MetaRowPlaceholder;

100
src/common/MetaRow/MetaRowPlaceholder/styles.less
View file

@ -1,50 +1,80 @@
@import (reference) '~stremio-colors/dist/less/stremio-colors.less';
.meta-row-placeholder-container { .meta-row-placeholder-container {
.title-container { .header-container {
max-height: 2.4em;
padding: 0 1rem;
margin-bottom: 2rem;
font-size: 1.5rem;
color: @color-surface;
&:empty {
height: 1.2em;
background: linear-gradient(to right, var(--color-placeholder) 0 40%, transparent 40% 100%);
}
}
.content-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: center;
justify-content: flex-end;
padding: 0 1rem;
margin-bottom: 1rem;
.meta-items-container { .title-container {
flex: 1; flex: 1;
display: flex; max-height: 2.4em;
flex-direction: row; font-size: 1.8rem;
align-items: stretch; color: var(--color-placeholder-text);
.meta-item { &:empty {
flex: 1; height: 1.2em;
margin: 1rem 3rem 1rem 1rem; background: linear-gradient(to right, var(--color-placeholder-background) 0 40%, transparent 40% 100%);
background-color: var(--color-placeholder);
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
}
.title-bar-container {
height: 2.8rem;
background-color: var(--color-placeholder);
}
} }
} }
.see-all-container { .see-all-container {
flex: none; flex: none;
display: flex;
flex-direction: row;
align-items: center;
max-width: 10rem;
padding: 0.4rem 0.2rem;
&:focus, &:hover {
outline: none;
background-color: var(--color-placeholder-background);
}
.label {
flex: 0 1 auto;
max-height: 1.2em;
font-weight: 500;
color: var(--color-placeholder-text);
}
.icon {
flex: none;
height: 1.3rem;
margin-left: 0.5rem;
fill: var(--color-placeholder-text);
}
}
}
.meta-items-container {
display: flex;
flex-direction: row;
align-items: stretch;
.meta-item {
flex: 1;
margin: 1rem; margin: 1rem;
background-color: var(--color-placeholder);
.poster-container {
padding-bottom: calc(100% * var(--poster-shape-ratio));
background-color: var(--color-placeholder-background);
}
.title-bar-container {
display: flex;
flex-direction: row;
align-items: center;
height: 2.8rem;
.title-label {
flex: none;
width: 60%;
height: 1.2rem;
background-color: var(--color-placeholder-background);
}
}
} }
} }
} }