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

layout navbars in board using grid

Browse source
This commit is contained in:
nklhrstv 2020-02-19 13:19:47 +02:00
parent fe2dc62f9a
commit 1464044561
2 changed files with 104 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,65 +21,63 @@ const Board = () => {
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}
/>
);
}
<MainVerticalNavBar className={styles['vertical-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}
/>
);
}
})}
</div>
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>
);

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

@ -11,41 +11,41 @@
}
.board-container {
display: flex;
flex-direction: column;
display: grid;
width: 100%;
height: 100%;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"horizontal-nav-bar horizontal-nav-bar"
"vertical-nav-bar board-content";
background-color: var(--color-background);
.horizontal-nav-bar {
flex: none;
align-self: stretch;
grid-area: horizontal-nav-bar;
}
.board-content-container {
display: flex;
flex-direction: row;
height: 100%;
.vertical-nav-bar {
grid-area: vertical-nav-bar;
}
.board-content {
flex: 1;
align-self: stretch;
overflow-y: auto;
.board-content {
grid-area: board-content;
overflow-y: auto;
.board-row, .board-row-placeholder {
margin: 4rem 2rem;
.board-row, .board-row-placeholder {
margin: 4rem 2rem;
&:first-child {
margin-top: 2rem;
}
&:first-child {
margin-top: 2rem;
}
&:last-child {
margin-bottom: 2rem;
}
&:last-child {
margin-bottom: 2rem;
}
.see-all-container, .see-all-container-placeholder {
width: 12rem;
}
.see-all-container, .see-all-container-placeholder {
width: 12rem;
}
}
}
@ -53,13 +53,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 {
&:nth-child(n+9) {
display: none;
}
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
}
}
}
@ -69,13 +67,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 {
&:nth-child(n+8) {
display: none;
}
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
}
}
}
@ -85,13 +81,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 {
&:nth-child(n+7) {
display: none;
}
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
}
}
}
@ -101,13 +95,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 {
&:nth-child(n+6) {
display: none;
}
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
@ -117,13 +109,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 {
&:nth-child(n+5) {
display: none;
}
.board-content {
.board-row, .board-row-placeholder {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
}
}
}