Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

MainNavBars implemented and applied in Board

Browse source
This commit is contained in:
nklhrstv 2020-02-25 16:49:50 +02:00
parent 818f6c20ca
commit 88075232bc
8 changed files with 82 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/common/MainNavBars/MainNavBars.js Normal file
View file

@ -0,0 +1,43 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { VerticalNavBar, HorizontalNavBar } = require('stremio/common/NavBar');
const styles = require('./styles');
const TABS = [
{ id: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ id: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ id: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
];
const MainNavBars = React.memo(({ className, route, children }) => {
return (
<div className={classnames(className, styles['main-nav-bars-container'])}>
<HorizontalNavBar
className={styles['horizontal-nav-bar']}
route={route}
backButton={false}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
navMenu={true}
/>
<VerticalNavBar
className={styles['vertical-nav-bar']}
selected={route}
tabs={TABS}
/>
<div className={styles['nav-content-container']}>{children}</div>
</div>
);
});
MainNavBars.displayName = 'MainNavBars';
MainNavBars.propTypes = {
className: PropTypes.string,
route: PropTypes.string,
children: PropTypes.node
};
module.exports = MainNavBars;

3
src/common/MainNavBars/index.js Normal file
View file

@ -0,0 +1,3 @@
const MainNavBars = require('./MainNavBars');
module.exports = MainNavBars;

29
src/common/MainNavBars/styles.less Normal file
View file

@ -0,0 +1,29 @@
.main-nav-bars-container {
position: relative;
z-index: 0;
.horizontal-nav-bar {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
.vertical-nav-bar {
position: absolute;
top: var(--horizontal-nav-bar-size);
bottom: 0;
left: 0;
z-index: 1;
}
.nav-content-container {
position: absolute;
top: var(--horizontal-nav-bar-size);
right: 0;
bottom: 0;
left: var(--vertical-nav-bar-size);
z-index: 0;
}
}

28
src/common/MainVerticalNavBar/MainVerticalNavBar.js
View file

@ -1,28 +0,0 @@
const React = require('react');
const PropTypes = require('prop-types');
const { VerticalNavBar } = require('stremio/common/NavBar');
const TABS = [
{ route: 'board', label: 'Board', icon: 'ic_board', href: '#/' },
{ route: 'discover', label: 'Discover', icon: 'ic_discover', href: '#/discover' },
{ route: 'library', label: 'Library', icon: 'ic_library', href: '#/library' }
];
const MainVerticalNavBar = React.memo(({ className, route }) => {
return (
<VerticalNavBar
className={className}
route={route}
tabs={TABS}
/>
);
});
MainVerticalNavBar.displayName = 'MainVerticalNavBar';
MainVerticalNavBar.propTypes = {
className: PropTypes.string,
route: PropTypes.string
};
module.exports = MainVerticalNavBar;

3
src/common/MainVerticalNavBar/index.js
View file

@ -1,3 +0,0 @@
const MainVerticalNavBar = require('./MainVerticalNavBar');
module.exports = MainVerticalNavBar;

4
src/common/index.js
View file

@ -3,7 +3,7 @@ const Button = require('./Button');
const Checkbox = require('./Checkbox');
const ColorInput = require('./ColorInput');
const Image = require('./Image');
const MainVerticalNavBar = require('./MainVerticalNavBar');
const MainNavBars = require('./MainNavBars');
const MetaItem = require('./MetaItem');
const MetaPreview = require('./MetaPreview');
const MetaRow = require('./MetaRow');
@ -35,7 +35,7 @@ module.exports = {
Checkbox,
ColorInput,
Image,
MainVerticalNavBar,
MainNavBars,
MetaItem,
MetaPreview,
MetaRow,

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

@ -1,5 +1,5 @@
const React = require('react');
const { HorizontalNavBar, MainVerticalNavBar, MetaRow } = require('stremio/common');
const { MainNavBars, MetaRow } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatching = require('./useContinueWatching');
const useItemOptions = require('./useItemOptions');
@ -10,18 +10,7 @@ const Board = () => {
const continueWatching = useContinueWatching();
const [options, optionOnSelect] = useItemOptions();
return (
<div className={styles['board-container']}>
<HorizontalNavBar
className={styles['horizontal-nav-bar']}
route={'board'}
backButton={false}
searchBar={true}
addonsButton={true}
fullscreenButton={true}
notificationsMenu={true}
navMenu={true}
/>
<MainVerticalNavBar className={styles['vertical-nav-bar']} route={'board'} />
<MainNavBars className={styles['board-container']} route={'board'}>
<div className={styles['board-content']}>
{
continueWatching.lib_items.length > 0 ?
@ -79,7 +68,7 @@ const Board = () => {
}
})}
</div>
</div>
</MainNavBars>
);
};

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

@ -12,26 +12,13 @@
}
.board-container {
display: grid;
width: 100%;
height: 100%;
grid-template-columns: var(--vertical-nav-bar-size) calc(100% - var(--vertical-nav-bar-size));
grid-template-rows: var(--horizontal-nav-bar-size) calc(100% - var(--horizontal-nav-bar-size));
grid-template-areas:
"horizontal-nav-bar horizontal-nav-bar"
"vertical-nav-bar board-content";
background-color: @color-background-dark2;
.horizontal-nav-bar {
grid-area: horizontal-nav-bar;
}
.vertical-nav-bar {
grid-area: vertical-nav-bar;
}
.board-content {
grid-area: board-content;
width: 100%;
height: 100%;
overflow-y: auto;
.board-row, .board-row-placeholder {