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

Board adapted to css modules

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-11 16:39:00 +03:00
parent 5768d9cdc6
commit e7287381d6
3 changed files with 30 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,7 +4,7 @@ const { MainNavBar, placeholderStyles } = require('stremio/common');
const BoardRow = require('./BoardRow');
const BoardRowPlaceholder = require('./BoardRowPlaceholder');
const useCatalogs = require('./useCatalogs');
require('./styles');
const styles = require('./styles');
const CONTINUE_WATCHING_MENU = [
{
@ -20,16 +20,16 @@ const CONTINUE_WATCHING_MENU = [
const Board = () => {
const catalogs = useCatalogs();
return (
<div className={'board-container'}>
<MainNavBar className={'nav-bar'} />
<div className={'board-content'}>
<div className={styles['board-container']}>
<MainNavBar className={styles['nav-bar']} />
<div className={styles['board-content']}>
{catalogs.map(([request, response], index) => {
switch (response.type) {
case 'Ready':
return (
<BoardRow
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
className={styles['board-row']}
title={`${request.resource_ref.id} - ${request.resource_ref.type_name}`}
items={response.content.map((item) => ({
...item,
@ -41,7 +41,7 @@ const Board = () => {
return (
<BoardRow
key={`${index}${request.transport_url}${response.type}`}
className={'board-row'}
className={styles['board-row']}
title={`${request.resource_ref.id} - ${request.resource_ref.type_name}`}
message={response.content}
/>
@ -50,7 +50,7 @@ const Board = () => {
return (
<BoardRowPlaceholder
key={`${index}${request.transport_url}${response.type}`}
className={classnames('board-row-placeholder', placeholderStyles['placeholder-container'])}
className={classnames(styles['board-row-placeholder'], placeholderStyles['placeholder-container'])}
/>
);
}

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

@ -3,50 +3,50 @@ const PropTypes = require('prop-types');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom');
const { Button, MetaItem } = require('stremio/common');
require('./styles');
const styles = require('./styles');
const BoardRow = ({ className, title, message, items, itemMenuOptions }) => {
return (
<div className={classnames(className, 'board-row-container')}>
<div className={classnames(className, styles['board-row-container'])}>
{
typeof title === 'string' && title.length > 0 ?
<div className={'title-container'}>{title}</div>
<div className={styles['title-container']}>{title}</div>
:
null
}
{
typeof message === 'string' && message.length > 0 ?
<div className={'message-container'}>{message}</div>
<div className={styles['message-container']}>{message}</div>
:
null
}
{
Array.isArray(items) && items.length > 0 ?
<React.Fragment>
<div className={'meta-items-container'}>
<div className={styles['meta-items-container']}>
{items.map((item) => (
<MetaItem
{...item}
key={item.id}
className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${item.posterShape}`)}
className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${item.posterShape}`])}
title={item.name}
menuOptions={itemMenuOptions}
/>
))}
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames('meta-item', 'poster-shape-poster', `poster-shape-${items[0].posterShape}`)} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
<div className={classnames(styles['meta-item'], styles['poster-shape-poster'], styles[`poster-shape-${items[0].posterShape}`])} />
</div>
<Button className={'see-all-container'} title={'SEE ALL'}>
<div className={'see-all-label'}>SEE ALL</div>
<Icon className={'icon'} icon={'ic_arrow_thin_right'} />
<Button className={styles['see-all-container']} title={'SEE ALL'}>
<div className={styles['see-all-label']}>SEE ALL</div>
<Icon className={styles['icon']} icon={'ic_arrow_thin_right'} />
</Button>
</React.Fragment>
:

4
src/routes/Board/styles.less
View file

@ -1,5 +1,9 @@
@import (reference) 'common/screen-sizes.less';
:import('./BoardRow/styles.less') {
meta-item: meta-item;
}
.board-container {
display: flex;
flex-direction: column;