fix(project): fix styling for mobile

jwplayer · Jun 19, 2021 · 8196aa3 · 8196aa3
1 parent 6fa73e9
commit 8196aa3
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 53 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -21,6 +21,7 @@ $large-button-height: 40px;
   text-decoration: none;
   border-radius: 4px;
   cursor: pointer;
+  outline: none;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
   &.large {

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -10,16 +10,18 @@
   flex-direction: column;
   justify-content: flex-start;
 
-  &:focus,
-  &:hover {
-    z-index: 1;
-    outline: none;
-    transform: scale(1.05);
-    position: relative;
-
-    & .poster {
-      box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%),
-        0 3px 14px rgb(0 0 0 / 12%), 0 4px 5px rgb(0 0 0 / 20%);
+  @media (hover: hover) and (pointer: fine) {
+    &:focus,
+    &:hover {
+      z-index: 1;
+      outline: none;
+      transform: scale(1.05);
+      position: relative;
+
+      & .poster {
+        box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
+          0 4px 5px rgb(0 0 0 / 20%);
+      }
     }
   }
 

diff --git a/src/components/IconButton/IconButton.module.scss b/src/components/IconButton/IconButton.module.scss
@@ -12,6 +12,7 @@
   cursor: pointer;
   opacity: 0.7;
   transition: transform 0.1s ease;
+  outline: none;
 
   &:hover {
     transform: scale(1.1);

diff --git a/src/components/TileDock/TileDock.module.scss b/src/components/TileDock/TileDock.module.scss
@@ -11,6 +11,12 @@
   list-style-type: none;
   white-space: normal;
 }
+.notInView {
+  opacity: 0.5;
+  @media (hover: hover) and (pointer: fine) {
+    opacity: 0.3;
+  }
+}
 .tileDock .leftControl {
   left: 0px;
   position: absolute;

diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import styles from './TileDock.module.scss';
@@ -27,7 +28,7 @@ type Tile<T> = {
   key: string;
 };
 
-const makeTiles = <T, > (originalList: T[], slicedItems: T[]): Tile<T>[] => {
+const makeTiles = <T,>(originalList: T[], slicedItems: T[]): Tile<T>[] => {
   const itemIndices: string[] = [];
 
   return slicedItems.map((item) => {
@@ -40,13 +41,7 @@ const makeTiles = <T, > (originalList: T[], slicedItems: T[]): Tile<T>[] => {
   });
 };
 
-const sliceItems = <T, > (
-  items: T[],
-  isMultiPage: boolean,
-  index: number,
-  tilesToShow: number,
-  cycleMode: CycleMode,
-): Tile<T>[] => {
+const sliceItems = <T,>(items: T[], isMultiPage: boolean, index: number, tilesToShow: number, cycleMode: CycleMode): Tile<T>[] => {
   if (!isMultiPage) return makeTiles(items, items);
 
   const sliceFrom: number = index;
@@ -60,22 +55,20 @@ const sliceItems = <T, > (
   return makeTiles(items, itemsSlice);
 };
 
-const TileDock = <T extends unknown> (
-  {
-    items,
-    tilesToShow = 6,
-    cycleMode = 'endless',
-    spacing = 12,
-    minimalTouchMovement = 30,
-    showControls = true,
-    animated = !window.matchMedia('(prefers-reduced-motion)').matches,
-    transitionTime = '0.6s',
-    wrapWithEmptyTiles = false,
-    renderTile,
-    renderLeftControl,
-    renderRightControl,
-  }: TileDockProps<T>
-) => {
+const TileDock = <T extends unknown>({
+  items,
+  tilesToShow = 6,
+  cycleMode = 'endless',
+  spacing = 12,
+  minimalTouchMovement = 30,
+  showControls = true,
+  animated = !window.matchMedia('(prefers-reduced-motion)').matches,
+  transitionTime = '0.6s',
+  wrapWithEmptyTiles = false,
+  renderTile,
+  renderLeftControl,
+  renderRightControl,
+}: TileDockProps<T>) => {
   const [index, setIndex] = useState<number>(0);
   const [slideToIndex, setSlideToIndex] = useState<number>(0);
   const [transform, setTransform] = useState<number>(-100);
@@ -109,8 +102,7 @@ const TileDock = <T extends unknown> (
     }
     if (nextIndex > items.length - tilesToShow) {
       if (cycleMode === 'stop') nextIndex = items.length - tilesToShow;
-      if (cycleMode === 'restart')
-        nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow;
+      if (cycleMode === 'restart') nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow;
     }
 
     const steps: number = Math.abs(index - nextIndex);
@@ -172,7 +164,7 @@ const TileDock = <T extends unknown> (
   const ulStyle = {
     transform: `translate3d(${transformWithOffset}%, 0, 0)`,
     // prettier-ignore
-    WebkitTransform: `translate3d(${transformWithOffset}%, 0, 0)`,
+    webkitTransform: `translate3d(${transformWithOffset}%, 0, 0)`,
     transition: transitionBasis,
     marginLeft: -spacing / 2,
     marginRight: -spacing / 2,
@@ -182,16 +174,8 @@ const TileDock = <T extends unknown> (
 
   return (
     <div className={styles.tileDock}>
-      {showLeftControl && !!renderLeftControl && (
-        <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>
-      )}
-      <ul
-        ref={frameRef}
-        style={ulStyle}
-        onTouchStart={handleTouchStart}
-        onTouchEnd={handleTouchEnd}
-        onTransitionEnd={handleTransitionEnd}
-      >
+      {showLeftControl && !!renderLeftControl && <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>}
+      <ul ref={frameRef} style={ulStyle} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} onTransitionEnd={handleTransitionEnd}>
         {wrapWithEmptyTiles ? (
           <li
             className={styles.emptyTile}
@@ -204,18 +188,18 @@ const TileDock = <T extends unknown> (
           />
         ) : null}
         {tileList.map((tile: Tile<T>, listIndex) => {
-          const isInView =
-            !isMultiPage || (listIndex > tilesToShow - slideOffset && listIndex < tilesToShow * 2 + 1 - slideOffset);
+          const isInView = !isMultiPage || (listIndex > tilesToShow - slideOffset && listIndex < tilesToShow * 2 + 1 - slideOffset);
 
           return (
             <li
               key={tile.key}
+              className={classNames({ [styles.notInView]: !isInView })}
               style={{
                 width: `${tileWidth}%`,
                 paddingLeft: spacing / 2,
                 paddingRight: spacing / 2,
                 boxSizing: 'border-box',
-                opacity: isInView ? 1 : 0.1,
+                // opacity: isInView ? 1 : 0.3,
                 transition: 'opacity .2s ease-in 0s',
               }}
             >
@@ -235,9 +219,7 @@ const TileDock = <T extends unknown> (
           />
         ) : null}
       </ul>
-      {showRightControl && !!renderRightControl && (
-        <div className={styles.rightControl}>{renderRightControl(() => slide('right'))}</div>
-      )}
+      {showRightControl && !!renderRightControl && <div className={styles.rightControl}>{renderRightControl(() => slide('right'))}</div>}
     </div>
   );
 };