Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 15:52:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

horizontal/vertical nav bar used in Board

Browse source
This commit is contained in:
svetlagasheva 2020-01-03 15:57:08 +02:00
parent 8b1c71bc7c
commit 8ead652d4e
3 changed files with 126 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/index.js
View file

@ -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,

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

@ -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,7 +11,18 @@ const Board = () => {
const [options, optionOnSelect] = useItemOptions();
return (
<div className={styles['board-container']}>
<MainNavBar className={styles['nav-bar']} route={'board'} />
<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 ?
@ -70,6 +81,7 @@ const Board = () => {
})}
</div>
</div>
</div>
);
};

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

@ -17,11 +17,15 @@
height: 100%;
background-color: var(--color-background);
.nav-bar {
.horizontal-nav-bar {
flex: none;
align-self: stretch;
}
.board-content-container {
display: flex;
flex-direction: row;
.board-content {
flex: 1;
align-self: stretch;
@ -44,9 +48,11 @@
}
}
}
}
@media only screen and (min-width: @large) {
.board-container {
.board-content-container {
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
@ -58,9 +64,11 @@
}
}
}
}
@media only screen and (max-width: @large) {
.board-container {
.board-content-container {
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
@ -72,9 +80,11 @@
}
}
}
}
@media only screen and (max-width: @medium) {
.board-container {
.board-content-container {
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
@ -86,9 +96,11 @@
}
}
}
}
@media only screen and (max-width: @small) {
.board-container {
.board-content-container {
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
@ -100,9 +112,11 @@
}
}
}
}
@media only screen and (max-width: @xsmall) {
.board-container {
.board-content-container {
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
@ -114,3 +128,4 @@
}
}
}
}