feat(project): update styling to meet designs

jwplayer · May 26, 2021 · df01d5a · df01d5a
1 parent 8fab1dd
commit df01d5a
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 48 deletions.
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -9,31 +9,46 @@
   &:hover {
     z-index: 10;
     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%);
     }
   }
-}
 
-.featured {
-  &:hover {
-    transform: scale(1.02);
-  }
+  &.featured {
+    &:hover {
+      transform: scale(1.02);
+    }
 
-  .meta {
-    padding: 12px;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+    .title {
+      font-size: 34px;
+      font-family: var(--body-font-family);
+      @include responsive.mobile-only {
+        font-size: 24px;
+      }
+    }
+    .tag {
+      font-size: 16px;
+      padding: 9px 16px;
+      @include responsive.mobile-only {
+        padding: 4px 8px;
+      }
+    }
+    .meta {
+      padding: 16px;
+      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+    }
   }
-}
 
-.disabled {
-  &:hover {
-    transform: scale(1);
-    cursor: default;
-    & .poster {
-      box-shadow: none;
+  &.disabled {
+    &:hover {
+      transform: scale(1);
+      cursor: default;
+      & .poster {
+        box-shadow: none;
+      }
     }
   }
 }
@@ -58,29 +73,32 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   }
 }
 
-.tag {
-  @include responsive.mobile-only {
-    font-size: 14px;
-  }
-  padding: 4px 8px;
-  color: var(--card-color);
-  font-family: var(--body-font-family);
-  font-size: 13px;
-  font-weight: 600;
-  background-color: rgba(variables.$black, 0.7);
-  border-radius: 4px;
+.titleContainer {
+  width: 100%;
+  min-height: 19px;
+  margin-top: 8px;
+  margin-bottom: 0;
+  overflow: hidden;
 }
 
 .title {
   @include responsive.mobile-only {
     font-size: 14px;
   }
+  flex: 1;
   color: var(--card-color);
   font-family: var(--body-alt-font-family);
   font-weight: 700;
-  white-space: nowrap;
+  font-size: 16px;
   text-align: left;
-  text-overflow: ellipsis;
+  overflow: hidden;
+  @supports (-webkit-line-clamp: 2) {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  height: 2.3em;
 }
 
 .meta {
@@ -97,10 +115,15 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
   }
 }
 
-.titleContainer {
-  width: 100%;
-  min-height: 19px;
-  margin-top: 8px;
-  margin-bottom: 0;
-  overflow: hidden;
+.tag {
+  @include responsive.mobile-only {
+    font-size: 14px;
+  }
+  padding: 4px 8px;
+  color: var(--card-color);
+  font-family: var(--body-font-family);
+  font-size: 13px;
+  font-weight: 600;
+  background-color: rgba(variables.$black, 0.6);
+  border-radius: 4px;
 }
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -48,7 +48,13 @@ function Card({
       </div>
       {!featured && (
         <div className={styles.titleContainer}>
-          <div className={styles.title}>{title}</div>
+          <div className={styles.title}>
+            {title}
+            {title}
+            {title}
+            {title}
+            {title}
+          </div>
         </div>
       )}
     </div>

diff --git a/src/components/Dropdown/Dropdown.module.scss b/src/components/Dropdown/Dropdown.module.scss
@@ -13,10 +13,10 @@ $select-focus: theme.$primary-color;
   min-width: 10ch;
   max-width: 20ch;
   margin-left: 24px;
-  padding: 0.2em 0.4em;
+  padding: 9px;
   font-size: 1.25rem;
   line-height: 1.1;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(0, 0, 0, 0.54);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 0.25em;
   cursor: pointer;
@@ -25,8 +25,8 @@ $select-focus: theme.$primary-color;
   // Custom arrow
   &::after {
     z-index: 1;
-    width: 0.4em;
-    height: 0.3em;
+    width: 10px;
+    height: 5px;
     background-color: $select-arrow;
     clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     content: '';
@@ -43,7 +43,7 @@ $select-focus: theme.$primary-color;
     font-weight: 700;
     font-size: 1rem;
     line-height: inherit;
-    background-color: rgba(0, 0, 0, 1);
+    background: none;
     border: none;
     outline: none;
     cursor: inherit;

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
@@ -1,6 +1,6 @@
 import React, { useState, Fragment, FC } from 'react';
-import MenuButton from '../../components/MenuButton/MenuButton';
 
+import MenuButton from '../../components/MenuButton/MenuButton';
 import Dropdown from '../Dropdown/Dropdown';
 import FilterModal from '../FilterModal/FilterModal';
 import Button from '../Button/Button';

diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -32,6 +32,7 @@
 
 .arrow {
   cursor: pointer;
+  padding: 12px 0px;
   transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
   > svg {
     width: 30px;

diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -61,7 +61,7 @@ const Shelf: React.FC<ShelfProps> = ({
         cycleMode={'restart'}
         showControls={!matchMedia('(hover: none)').matches}
         transitionTime={loading ? '0s' : '0.3s'}
-        spacing={12}
+        spacing={8}
         renderLeftControl={(handleClick) => (
           <div
             className={didSlideBefore ? styles.arrow : styles.arrowDisabled}

diff --git a/src/components/TileDock/TileDock.css → src/components/TileDock/TileDock.module.scss b/src/components/TileDock/TileDock.css → src/components/TileDock/TileDock.module.scss
@@ -1,3 +1,5 @@
+@use "../../styles/mixins/responsive";
+
 .tileDock {
   position: relative;
 }
@@ -25,10 +27,17 @@
   top: calc(50% + 20px);
   transform: translateY(-100%);
   z-index: 1;
+  @include responsive.tablet-only {
+    left: -32px;
+  }
 }
 .tileDock .rightControl {
   position: absolute;
   right: -40px;
   top: calc(50% + 20px);
   transform: translateY(-100%);
+
+  @include responsive.tablet-only {
+    right: -32px;
+  }
 }
diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx
@@ -1,5 +1,7 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import './TileDock.css';
+
+// import './TileDock.css';
+import styles from './TileDock.module.scss';
 
 export type CycleMode = 'stop' | 'restart' | 'endless';
 type Direction = 'left' | 'right';
@@ -176,9 +178,9 @@ const TileDock = <T extends unknown>({
   const slideOffset = index - slideToIndex;
 
   return (
-    <div className="tileDock">
+    <div className={styles.tileDock}>
       {showLeftControl && !!renderLeftControl && (
-        <div className="leftControl">{renderLeftControl(() => slide('left'))}</div>
+        <div className={styles.leftControl}>{renderLeftControl(() => slide('left'))}</div>
       )}
       <ul
         ref={frameRef}
@@ -212,7 +214,7 @@ const TileDock = <T extends unknown>({
         })}
       </ul>
       {showRightControl && !!renderRightControl && (
-        <div className="rightControl">{renderRightControl(() => slide('right'))}</div>
+        <div className={styles.rightControl}>{renderRightControl(() => slide('right'))}</div>
       )}
     </div>
   );

diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -78,7 +78,7 @@ const Home = (): JSX.Element => {
     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 : 27;
+    const cardMetaHeight = item.featured ? 0 : 40;
     const shelfHorizontalMargin = (isMobile && item.featured ? 20 : 56) * featuredTileBreakpoints[breakpoint];
     const cardHorizontalMargin = 0;
     const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow - cardHorizontalMargin;

diff --git a/src/screens/Playlist/Playlist.tsx b/src/screens/Playlist/Playlist.tsx
@@ -85,7 +85,7 @@ function Playlist({
         <Filter name="categories" value={filter} defaultLabel="All" options={categories} setValue={setFilter} />
       </header>
       <main className={styles.main}>
-        <VirtualizedGrid rowCount={playlistRows.length} cols={cols} cellRenderer={cellRenderer} spacing={30} />
+        <VirtualizedGrid rowCount={playlistRows.length} cols={cols} cellRenderer={cellRenderer} spacing={50} />
       </main>
     </div>
   );