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

board row title added

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-07-23 16:19:56 +03:00
parent d686b25bc9
commit 4b0186f347
4 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/routes/Board/Board.js
View file

@ -17,6 +17,7 @@ const Board = () => {
className={classnames(styles['board-row'], styles['addon-catalog-row'])}
metaItemClassName={styles['meta-item']}
menuClassName={styles['menu-container']}
title={catalog.title}
items={catalog.items}
/>
))}

11
src/routes/Board/BoardRow/BoardRow.js
View file

@ -16,16 +16,19 @@ const CONTINUE_WATCHING_MENU = [
}
];
const BoardRow = ({ className, metaItemClassName, menuClassName, items }) => {
const BoardRow = ({ className, metaItemClassName, menuClassName, title, items }) => {
return (
<div className={classnames(styles['board-row-container'], className)}>
<div className={classnames(className, styles['board-row-container'])}>
<div className={styles['title-container']}>
<div className={styles['title']}>{title}</div>
</div>
<div className={styles['meta-items-container']}>
{items.map((item) => (
<MetaItem
{...item}
key={item.id}
className={classnames(styles['meta-item'], styles[`poster-shape-${item.posterShape}`], metaItemClassName)}
menuClassName={classnames(styles['menu-container'], menuClassName)}
className={classnames(metaItemClassName, styles['meta-item'], styles[`poster-shape-${item.posterShape}`])}
menuClassName={classnames(menuClassName, styles['menu-container'])}
title={item.name}
menuOptions={CONTINUE_WATCHING_MENU}
/>

26
src/routes/Board/BoardRow/styles.less
View file

@ -1,15 +1,29 @@
.board-row-container {
display: grid;
padding: 0 1em;
display: flex;
flex-direction: row;
align-items: stretch;
grid-template-columns: 6fr 1fr;
grid-template-areas:
"title-area title-area"
"meta-items-area show-more-area";
.title-container {
grid-area: title-area;
padding: 0 1em;
.title {
font-size: 1.5em;
line-height: 1.2em;
max-height: 2.4em;
color: var(--color-surfacelighter);
text-transform: capitalize;
}
}
.meta-items-container {
flex: 8;
grid-area: meta-items-area;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
.meta-item {
margin: 1em;
@ -29,7 +43,7 @@
}
.show-more-container {
flex: 1;
grid-area: show-more-area;
display: flex;
flex-direction: row;
align-items: center;

1
src/routes/Board/useCatalogs.js
View file

@ -9,6 +9,7 @@ const useCatalogs = () => {
if (response.type === 'Ready') {
catalogs.push({
id: `${index}${request.transport_url}`,
title: `${request.resource_ref.id} - ${request.resource_ref.type_name}`,
items: response.content.map((item) => {
return {
...item,