feat(home): show only 1 tile in featured shelf

jwplayer · Jun 9, 2021 · e7cd1ba · e7cd1ba
1 parent 7ad0361
commit e7cd1ba
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -22,9 +22,9 @@ export const tileBreakpoints: Breakpoints = {
 export const featuredTileBreakpoints: Breakpoints = {
   [Breakpoint.xs]: 1,
   [Breakpoint.sm]: 1,
-  [Breakpoint.md]: 2,
-  [Breakpoint.lg]: 2,
-  [Breakpoint.xl]: 2,
+  [Breakpoint.md]: 1,
+  [Breakpoint.lg]: 1,
+  [Breakpoint.xl]: 1,
 };
 
 export type ShelfProps = {

diff --git a/src/screens/Home/Home.module.scss b/src/screens/Home/Home.module.scss
@@ -10,6 +10,9 @@
 }
 .shelfContainer {
   padding: 12px 56px;
+  &.featured {
+    padding: 12px 20%;
+  }
 
   @include responsive.mobile-only() {
     padding: 24px 60px 24px variables.$base-spacing;
@@ -19,5 +22,8 @@
   }
   @include responsive.tablet-only() {
     padding: 0 variables.$base-spacing * 2;
+    &.featured {
+      padding: 24px variables.$base-spacing * 2;
+    }
   }
 }
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -71,19 +71,33 @@ const Home = (): JSX.Element => {
 
   const calculateHeight = (index: number): number => {
     const item = content[index];
-    const isMobile = tileBreakpoints[breakpoint] <= Breakpoint.sm;
+    const isLargeScreen = breakpoint >= Breakpoint.md;
 
     if (!item) return 0;
 
-    const tilesToShow: number = item.featured ? featuredTileBreakpoints[breakpoint] : tileBreakpoints[breakpoint];
-    const shelfTitlesHeight = config.options.shelveTitles ? 40 : 0;
-    const shelfMetaHeight = item.featured ? 24 : shelfTitlesHeight + 24;
-    const cardMetaHeight = item.featured ? 0 : 40;
-    const shelfHorizontalMargin = (isMobile && item.featured ? 20 : 56) * featuredTileBreakpoints[breakpoint];
-    const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
-    const cardHeight = cardWidth * (9 / 16);
-
-    return cardHeight + shelfMetaHeight + cardMetaHeight;
+    const calculateFeatured = () => {
+      const tilesToShow = featuredTileBreakpoints[breakpoint];
+      const shelfMetaHeight = 24;
+      const cardMetaHeight = 10;
+      const shelfHorizontalMargin = isLargeScreen ? document.body.offsetWidth * 0.4 : 0;
+      const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
+      const cardHeight = cardWidth * (9 / 16);
+
+      return cardHeight + shelfMetaHeight + cardMetaHeight;
+    };
+    const calculateRegular = () => {
+      const tilesToShow = tileBreakpoints[breakpoint];
+      const shelfTitlesHeight = config.options.shelveTitles ? 40 : 0;
+      const shelfMetaHeight = shelfTitlesHeight + 24;
+      const cardMetaHeight = 40;
+      const shelfHorizontalMargin = 0 * featuredTileBreakpoints[breakpoint];
+      const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
+      const cardHeight = cardWidth * (9 / 16);
+
+      return cardHeight + shelfMetaHeight + cardMetaHeight;
+    };
+
+    return item.featured ? calculateFeatured() : calculateRegular();
   };
 
   useEffect(() => {