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

items count changed for rows with landscape posters and continue watching row

Browse source
This commit is contained in:
nklhrstv 2020-03-28 20:34:53 +02:00
parent 3b6736e864
commit 96c5897a85
2 changed files with 102 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,5 @@
const React = require('react');
const classnames = require('classnames');
const { MainNavBars, MetaRow, LibItem, MetaItem } = require('stremio/common');
const useBoard = require('./useBoard');
const useContinueWatchingPreview = require('./useContinueWatchingPreview');
@ -13,7 +14,7 @@ const Board = () => {
{
continueWatchingPreview.lib_items.length > 0 ?
<MetaRow
className={styles['board-row']}
className={classnames(styles['board-row'], styles['continue-watching-row'])}
title={'Continue Watching'}
items={continueWatchingPreview.lib_items}
itemComponent={LibItem}
@ -27,10 +28,14 @@ const Board = () => {
const title = `${catalog_resource.origin} - ${catalog_resource.request.path.id} ${catalog_resource.request.path.type_name}`;
switch (catalog_resource.content.type) {
case 'Ready': {
const posterShape = catalog_resource.content.content.length > 0 ?
catalog_resource.content.content[0].posterShape
:
null;
return (
<MetaRow
key={index}
className={styles['board-row']}
className={classnames(styles['board-row'], styles['board-row-poster'], { [styles[`board-row-${posterShape}`]]: typeof posterShape === 'string' })}
title={title}
items={catalog_resource.content.content}
itemComponent={MetaItem}
@ -54,7 +59,7 @@ const Board = () => {
return (
<MetaRow.Placeholder
key={index}
className={styles['board-row']}
className={classnames(styles['board-row'], styles['board-row-poster'])}
title={title}
href={href}
/>

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

@ -36,13 +36,21 @@
@media only screen and (max-width: @large) {
.board-container {
.board-content {
.board-row {
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+10) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
}
}
}
}
}
}
@ -50,13 +58,29 @@
@media only screen and (max-width: @normal) {
.board-container {
.board-content {
.board-row {
.continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+10) {
display: none;
}
}
}
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
}
}
}
}
}
}
@ -64,13 +88,29 @@
@media only screen and (max-width: @medium) {
.board-container {
.board-content {
.board-row {
.continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+9) {
display: none;
}
}
}
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
}
}
}
}
}
}
@ -78,13 +118,29 @@
@media only screen and (max-width: @small) {
.board-container {
.board-content {
.board-row {
.continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+8) {
display: none;
}
}
}
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
}
}
}
@ -92,13 +148,29 @@
@media only screen and (max-width: @xsmall) {
.board-container {
.board-content {
.board-row {
.continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+7) {
display: none;
}
}
}
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
}
}
}
}
}
}
@ -106,13 +178,29 @@
@media only screen and (max-width: @minimum) {
.board-container {
.board-content {
.board-row {
.continue-watching-row {
.meta-item, .meta-item-placeholder {
&:nth-child(n+6) {
display: none;
}
}
}
.board-row-poster, .board-row-square {
.meta-item, .meta-item-placeholder {
&:nth-child(n+5) {
display: none;
}
}
}
.board-row-landscape {
.meta-item, .meta-item-placeholder {
&:nth-child(n+4) {
display: none;
}
}
}
}
}
}