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

MetaRow see all button moved next to title

Browse source
This commit is contained in:
nklhrstv 2020-03-26 15:50:25 +02:00
parent 2fec013865
commit 78bf3baf26
2 changed files with 78 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/common/MetaRow/MetaRow.js
View file

@ -4,36 +4,22 @@ const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const MetaItem = require('stremio/common/MetaItem');
const CONSTANTS = require('stremio/common/CONSTANTS');
const MetaRowPlaceholder = require('./MetaRowPlaceholder');
const styles = require('./styles');
const MetaRow = ({ className, title, message, items, limit, href }) => {
items = Array.isArray(items) ? items.slice(0, limit) : [];
const MetaRow = ({ className, title, message, items, href }) => {
return (
<div className={classnames(className, styles['meta-row-container'])}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
{
typeof message === 'string' && message.length > 0 ?
<div className={styles['message-container']} title={message}>{message}</div>
:
<div className={styles['content-container']}>
<div className={styles['meta-items-container']}>
{items.map((item, index) => (
<MetaItem
{...item}
key={index}
className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`])}
/>
))}
{Array(limit - items.length).fill(null).map((_, index) => (
<div key={index} className={classnames(styles['meta-item'], styles['poster-shape-poster'])} />
))}
</div>
(typeof title === 'string' && title.length > 0) || (typeof href === 'string' && href.length > 0) ?
<div className={styles['header-container']}>
{
typeof title === 'string' && title.length > 0 ?
<div className={styles['title-container']} title={title}>{title}</div>
:
null
}
{
typeof href === 'string' && href.length > 0 ?
<Button className={styles['see-all-container']} title={'SEE ALL'} href={href}>
@ -44,6 +30,25 @@ const MetaRow = ({ className, title, message, items, limit, href }) => {
null
}
</div>
:
null
}
{
typeof message === 'string' && message.length > 0 ?
<div className={styles['message-container']} title={message}>{message}</div>
:
<div className={styles['meta-items-container']}>
{items.slice(0, CONSTANTS.CATALOG_PREVIEW_SIZE).map((item, index) => (
<MetaItem
{...item}
key={index}
className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`])}
/>
))}
{Array(Math.max(0, CONSTANTS.CATALOG_PREVIEW_SIZE - items.length)).fill(null).map((_, index) => (
<div key={index} className={classnames(styles['meta-item'], styles['poster-shape-poster'])} />
))}
</div>
}
</div>
);
@ -58,7 +63,6 @@ MetaRow.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
posterShape: PropTypes.string
})),
limit: PropTypes.number.isRequired,
href: PropTypes.string
};

102
src/common/MetaRow/styles.less
View file

@ -3,49 +3,19 @@
.meta-row-container {
overflow: visible;
.title-container {
max-height: 2.4em;
padding: 0 1rem;
margin-bottom: 2rem;
font-size: 1.5rem;
color: @color-secondaryvariant2-light1;
}
.message-container {
max-height: 3.6em;
padding: 0 1rem;
font-size: 1.3rem;
color: @color-secondaryvariant2-light1;
}
.content-container {
.header-container {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: visible;
align-items: center;
justify-content: flex-end;
padding: 0 1rem;
margin-bottom: 1rem;
.meta-items-container {
.title-container {
flex: 1;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: visible;
.meta-item {
margin-right: 2rem;
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}
&.poster-shape-square {
flex: 1;
}
&.poster-shape-landscape {
flex: calc(1 / var(--landscape-shape-ratio));
}
}
max-height: 2.4em;
font-size: 1.8rem;
color: @color-secondaryvariant2-light1-90;
}
.see-all-container {
@ -53,30 +23,56 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 1rem;
background-color: @color-background-light1;
max-width: 10rem;
padding: 0.4rem 0.2rem;
&:hover, &:focus {
&:focus {
outline: none;
background-color: @color-background-light3;
}
.label {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
max-height: 2.4em;
font-size: 1.2rem;
text-align: center;
color: @color-surface-light5;
flex: 0 1 auto;
max-height: 1.2em;
font-weight: 500;
color: @color-secondaryvariant2-light1-90;
}
.icon {
flex: none;
width: 1.3rem;
height: 1.3rem;
margin-left: 0.3rem;
fill: @color-surface-light5;
margin-left: 0.5rem;
fill: @color-secondaryvariant2-light1;
}
}
}
.message-container {
max-height: 3.6em;
padding: 0 1rem;
font-size: 1.3rem;
color: @color-secondaryvariant2-light1-90;
}
.meta-items-container {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: visible;
.meta-item {
padding: 1rem;
&.poster-shape-poster {
flex: calc(1 / var(--poster-shape-ratio));
}
&.poster-shape-square {
flex: 1;
}
&.poster-shape-landscape {
flex: calc(1 / var(--landscape-shape-ratio));
}
}
}