feat(home): add chevron correction for featured shelf

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

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -47,6 +47,16 @@
       transform: none;
     }
   }
+  &.featuredLeftCorrection {
+    position: absolute;
+    left: calc(0px - 100vw * 0.2 + 56px);
+    top: -30px;
+  }
+  &.featuredRightCorrection {
+    position: absolute;
+    top: -30px;
+    right: calc(0px - 100vw * 0.2 + 56px);
+  }
 }
 .error {
   color: var(--card-color);

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -71,6 +71,7 @@ const Shelf: React.FC<ShelfProps> = ({
           <div
             className={classNames(styles.chevron, {
               [styles.disabled]: !didSlideBefore,
+              [styles.featuredLeftCorrection]: featured && isLargeScreen,
             })}
             role="button"
             tabIndex={didSlideBefore ? 0 : -1}
@@ -85,7 +86,9 @@ const Shelf: React.FC<ShelfProps> = ({
         )}
         renderRightControl={(doSlide) => (
           <div
-            className={classNames(styles.chevron)}
+            className={classNames(styles.chevron, {
+              [styles.featuredRightCorrection]: featured && isLargeScreen,
+            })}
             role="button"
             tabIndex={0}
             aria-label="Slide right"

diff --git a/src/components/TileDock/TileDock.module.scss b/src/components/TileDock/TileDock.module.scss
@@ -14,13 +14,6 @@
   list-style-type: none;
   white-space: normal;
 }
-.tileDock .offsetTile {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-}
 .tileDock .leftControl {
   left: -40px;
   position: absolute;