fix(project): update breakpoints to meet designs

jwplayer · Aug 2, 2021 · 880a1aa · 880a1aa
1 parent 6c65bee
commit 880a1aa
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 15 deletions.
diff --git a/src/components/Shelf/Shelf.tsx b/src/components/Shelf/Shelf.tsx
@@ -14,10 +14,10 @@ import styles from './Shelf.module.scss';
 
 export const tileBreakpoints: Breakpoints = {
   [Breakpoint.xs]: 1,
-  [Breakpoint.sm]: 3,
-  [Breakpoint.md]: 4,
-  [Breakpoint.lg]: 5,
-  [Breakpoint.xl]: 6,
+  [Breakpoint.sm]: 2,
+  [Breakpoint.md]: 3,
+  [Breakpoint.lg]: 4,
+  [Breakpoint.xl]: 5,
 };
 
 export const featuredTileBreakpoints: Breakpoints = {

diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
@@ -2,10 +2,10 @@ import { useState, useEffect } from 'react';
 
 import { addMediaQueryListChangeListener, removeMediaQueryListChangeListener } from '../utils/matchMedia';
 
-const XS_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (max-width: 599px)');
-const SM_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 600px) and (max-width: 959px)');
-const MD_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 960px) and (max-width: 1279px)');
-const LG_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 1280px) and (max-width: 1919px)');
+const XS_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (max-width: 479px)'); // mobile
+const SM_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 480px) and (max-width: 767px)'); // tablet
+const MD_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 768px) and (max-width: 1023px)'); // tablet large
+const LG_MATCH_MEDIA: MediaQueryList = matchMedia('screen and (min-width: 1024px) and (max-width: 1199px)'); // desktop
 
 export enum Breakpoint {
   xs,

diff --git a/src/screens/Home/Home.module.scss b/src/screens/Home/Home.module.scss
@@ -34,7 +34,7 @@
     padding: 0 variables.$base-spacing * 2;
 
     &.featured {
-      padding: 24px variables.$base-spacing * 2;
+      padding: 24px 10%;
     }
   }
 }
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -95,8 +95,9 @@ const Home = (): JSX.Element => {
 
   const calculateHeight = (index: number): number => {
     const item = content[index];
-    const isDesktop = breakpoint > Breakpoint.sm;
+    const isDesktop = breakpoint >= Breakpoint.lg;
     const isMobile = breakpoint === Breakpoint.xs;
+    const isTablet = !isDesktop && !isMobile;
 
     if (!item) return 0;
     if (item.playlistId === PersonalShelf.ContinueWatching && !watchHistory.playlist.length) return 0;
@@ -105,7 +106,7 @@ const Home = (): JSX.Element => {
     const calculateFeatured = () => {
       const tilesToShow = featuredTileBreakpoints[breakpoint];
       const shelfMetaHeight = 50;
-      const shelfHorizontalMargin = isDesktop ? document.body.offsetWidth * 0.4 : 0;
+      const shelfHorizontalMargin = isDesktop ? document.body.offsetWidth * 0.4 : isTablet ? document.body.offsetWidth * 0.2 : 0;
       const cardWidth = (document.body.offsetWidth - shelfHorizontalMargin) / tilesToShow;
       const cardHeight = cardWidth * (9 / 16);
 

diff --git a/src/screens/Playlist/Playlist.module.scss b/src/screens/Playlist/Playlist.module.scss
@@ -3,7 +3,6 @@
 @use '../../styles/mixins/responsive';
 
 .playlist {
-
   margin: 0 variables.$base-spacing * 4;
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
@@ -19,14 +18,17 @@
   @include responsive.tablet-only() {
     margin: 0 variables.$base-spacing * 2;
   }
+
+  @include responsive.desktop-small-only() {
+    margin: 0 variables.$base-spacing * 3;
+  }
 }
 
 .main {
   margin: -8px;
 }
 
 .header {
-
   display: flex;
   align-items: center;
   height: 36px;

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -34,11 +34,12 @@ $container-width-desktop: 800px !default;
 // Responsive
 // --------------------------------
 
-$mobile-max-width: 595px !default;
-$tablet-max-width: 959px !default;
+$mobile-max-width: 479px !default;
+$tablet-max-width: 1023px !default;
 
 $tablet-min-width: $mobile-max-width + 1 !default;
 $desktop-min-width: $tablet-max-width + 1 !default;
+$desktop-large-min-width: 1200px !default;
 
 //
 // Header

diff --git a/src/styles/mixins/_responsive.scss b/src/styles/mixins/_responsive.scss
@@ -30,6 +30,12 @@
   }
 }
 
+@mixin desktop-small-only {
+  @media screen and (min-width: variables.$desktop-min-width) and (max-width: variables.$desktop-large-min-width) {
+    @content;
+  }
+}
+
 @mixin desktop-only {
   @media screen and (min-width: variables.$desktop-min-width) {
     @content;