From 96c5897a85ad162d8ee2dfe37e4d7646a76fe668 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Sat, 28 Mar 2020 20:34:53 +0200
Subject: [PATCH] items count changed for rows with landscape posters and
 continue watching row

---
 src/routes/Board/Board.js    |  11 ++--
 src/routes/Board/styles.less | 100 ++++++++++++++++++++++++++++++++---
 2 files changed, 102 insertions(+), 9 deletions(-)

diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 2c724e4bd..9cc5f26e5 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -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}
                                 />
diff --git a/src/routes/Board/styles.less b/src/routes/Board/styles.less
index 1ae54fbde..38542adfd 100644
--- a/src/routes/Board/styles.less
+++ b/src/routes/Board/styles.less
@@ -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;
+                    }
+                }
+            }
         }
     }
 }
\ No newline at end of file