mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-03-11 21:27:05 +00:00
horizontal/vertical nav bar used in Board
This commit is contained in:
svetlagasheva
parent
8b1c71bc7c
commit
8ead652d4e
3 changed files with 126 additions and 97 deletions
|
|
@ -3,6 +3,7 @@ const Button = require('./Button');
|
|||
const Checkbox = require('./Checkbox');
|
||||
const ColorInput = require('./ColorInput');
|
||||
const Image = require('./Image');
|
||||
const HorizontalNavBar = require('./HorizontalNavBar');
|
||||
const MainVerticalNavBar = require('./MainVerticalNavBar');
|
||||
const MetaItem = require('./MetaItem');
|
||||
const MetaPreview = require('./MetaPreview');
|
||||
|
|
@ -32,6 +33,7 @@ module.exports = {
|
|||
Checkbox,
|
||||
ColorInput,
|
||||
Image,
|
||||
HorizontalNavBar,
|
||||
MainVerticalNavBar,
|
||||
MetaItem,
|
||||
MetaPreview,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
const React = require('react');
|
||||
const { MainNavBar, MetaRow } = require('stremio/common');
|
||||
const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
|
||||
const useBoard = require('./useBoard');
|
||||
const useContinueWatching = require('./useContinueWatching');
|
||||
const useItemOptions = require('./useItemOptions');
|
||||
|
|
@ -11,63 +11,75 @@ const Board = () => {
|
|||
const [options, optionOnSelect] = useItemOptions();
|
||||
return (
|
||||
<div className={styles['board-container']}>
|
||||
<MainNavBar className={styles['nav-bar']} route={'board'} />
|
||||
<div className={styles['board-content']}>
|
||||
{
|
||||
continueWatching.lib_items.length > 0 ?
|
||||
<MetaRow
|
||||
className={styles['board-row']}
|
||||
title={'Continue Watching'}
|
||||
items={continueWatching.lib_items.map(({ id, videoId, ...libItem }) => ({
|
||||
...libItem,
|
||||
dataset: { id, videoId, type: libItem.type },
|
||||
options,
|
||||
optionOnSelect
|
||||
}))}
|
||||
limit={10}
|
||||
/>
|
||||
:
|
||||
null
|
||||
}
|
||||
{board.catalog_resources.map((catalog_resource, index) => {
|
||||
const title = `${catalog_resource.addon_name} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
|
||||
switch (catalog_resource.content.type) {
|
||||
case 'Ready': {
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['board-row']}
|
||||
title={title}
|
||||
items={catalog_resource.content.content}
|
||||
href={catalog_resource.href}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'Err': {
|
||||
const message = `Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`;
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['board-row']}
|
||||
title={title}
|
||||
message={message}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'Loading': {
|
||||
return (
|
||||
<MetaRow.Placeholder
|
||||
key={index}
|
||||
className={styles['board-row-placeholder']}
|
||||
title={title}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
<HorizontalNavBar
|
||||
className={styles['horizontal-nav-bar']}
|
||||
route={'board'}
|
||||
backButton={false}
|
||||
searchBar={true}
|
||||
addonsButton={true}
|
||||
fullscreenButton={true}
|
||||
notificationsMenu={true}
|
||||
navMenu={true}
|
||||
/>
|
||||
<div className={styles['board-content-container']}>
|
||||
<MainVerticalNavBar className={styles['nav-bar']} route={'board'} />
|
||||
<div className={styles['board-content']}>
|
||||
{
|
||||
continueWatching.lib_items.length > 0 ?
|
||||
<MetaRow
|
||||
className={styles['board-row']}
|
||||
title={'Continue Watching'}
|
||||
items={continueWatching.lib_items.map(({ id, videoId, ...libItem }) => ({
|
||||
...libItem,
|
||||
dataset: { id, videoId, type: libItem.type },
|
||||
options,
|
||||
optionOnSelect
|
||||
}))}
|
||||
limit={10}
|
||||
/>
|
||||
:
|
||||
null
|
||||
}
|
||||
})}
|
||||
{board.catalog_resources.map((catalog_resource, index) => {
|
||||
const title = `${catalog_resource.addon_name} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
|
||||
switch (catalog_resource.content.type) {
|
||||
case 'Ready': {
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['board-row']}
|
||||
title={title}
|
||||
items={catalog_resource.content.content}
|
||||
href={catalog_resource.href}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'Err': {
|
||||
const message = `Error(${catalog_resource.content.content.type})${typeof catalog_resource.content.content.content === 'string' ? ` - ${catalog_resource.content.content.content}` : ''}`;
|
||||
return (
|
||||
<MetaRow
|
||||
key={index}
|
||||
className={styles['board-row']}
|
||||
title={title}
|
||||
message={message}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case 'Loading': {
|
||||
return (
|
||||
<MetaRow.Placeholder
|
||||
key={index}
|
||||
className={styles['board-row-placeholder']}
|
||||
title={title}
|
||||
limit={10}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,29 +17,34 @@
|
|||
height: 100%;
|
||||
background-color: var(--color-background);
|
||||
|
||||
.nav-bar {
|
||||
.horizontal-nav-bar {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.board-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
overflow-y: auto;
|
||||
.board-content-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.board-row, .board-row-placeholder {
|
||||
margin: 4rem 2rem;
|
||||
.board-content {
|
||||
flex: 1;
|
||||
align-self: stretch;
|
||||
overflow-y: auto;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.board-row, .board-row-placeholder {
|
||||
margin: 4rem 2rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.see-all-container, .see-all-container-placeholder {
|
||||
width: 12rem;
|
||||
&:last-child {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.see-all-container, .see-all-container-placeholder {
|
||||
width: 12rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -47,11 +52,13 @@
|
|||
|
||||
@media only screen and (min-width: @large) {
|
||||
.board-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+9) {
|
||||
display: none;
|
||||
.board-content-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+9) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -61,11 +68,13 @@
|
|||
|
||||
@media only screen and (max-width: @large) {
|
||||
.board-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+8) {
|
||||
display: none;
|
||||
.board-content-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+8) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -75,11 +84,13 @@
|
|||
|
||||
@media only screen and (max-width: @medium) {
|
||||
.board-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
.board-content-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+7) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,11 +100,13 @@
|
|||
|
||||
@media only screen and (max-width: @small) {
|
||||
.board-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+6) {
|
||||
display: none;
|
||||
.board-content-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -103,11 +116,13 @@
|
|||
|
||||
@media only screen and (max-width: @xsmall) {
|
||||
.board-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
.board-content-container {
|
||||
.board-content {
|
||||
.board-row, .board-row-placeholder {
|
||||
.meta-item, .meta-item-placeholder {
|
||||
&:nth-child(n+5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue