fix(project): unify breakpoints js and css

jwplayer · Jun 3, 2021 · deb2e56 · deb2e56
1 parent bded9bf
commit deb2e56
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 23 deletions.
diff --git a/src/components/Shelf/Shelf.module.scss b/src/components/Shelf/Shelf.module.scss
@@ -1,19 +1,5 @@
-@use '../../styles/variables';
-@use '../../styles/theme';
-@use '../../styles/mixins/responsive';
-
 .shelf {
-  @include responsive.mobile-only() {
-    margin: 24px 60px 24px variables.$base-spacing;
-    &.featured {
-      margin: 24px variables.$base-spacing;
-    }
-  }
-
-  @include responsive.tablet-only() {
-    margin: 0 variables.$base-spacing * 2;
-  }
-  margin: 12px 0px;
+  margin: 0px 0px;
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
 

diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 
-const XS_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (max-width: 540px)');
-const SM_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 541px) and (max-width: 960px)');
-const MD_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 961px) and (max-width: 1280px)');
-const LG_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 1281px) and (max-width: 1680px)');
+const XS_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (max-width: 599px)');
+const SM_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 600px) and (max-width: 959px)');
+const MD_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 960px) and (max-width: 1279px)');
+const LG_MATCH_MEDIA: MediaQueryList = window.matchMedia('screen and (min-width: 1280px) and (max-width: 1919px)');
 
 export enum Breakpoint {
   xs,

diff --git a/src/screens/Home/Home.module.scss b/src/screens/Home/Home.module.scss
@@ -1,5 +1,6 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
+@use '../../styles/mixins/responsive';
 
 .list {
   overflow: visible !important;
@@ -8,5 +9,15 @@
   }
 }
 .shelfContainer {
-  padding: 0px 56px;
+  padding: 12px 56px;
+
+  @include responsive.mobile-only() {
+    padding: 24px 60px 24px variables.$base-spacing;
+    &.featured {
+      padding: 24px variables.$base-spacing;
+    }
+  }
+  @include responsive.tablet-only() {
+    padding: 0 variables.$base-spacing * 2;
+  }
 }
diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -5,6 +5,7 @@ import List from 'react-virtualized/dist/commonjs/List';
 import { useHistory } from 'react-router-dom';
 import type { Config, Content } from 'types/Config';
 import type { PlaylistItem } from 'types/playlist';
+import classNames from 'classnames';
 
 import { featuredTileBreakpoints, tileBreakpoints } from '../../components/Shelf/Shelf';
 import { UIStateContext } from '../../providers/uiStateProvider';
@@ -52,7 +53,11 @@ const Home = (): JSX.Element => {
     const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image);
 
     return (
-      <div key={key} style={style} className={styles.shelfContainer}>
+      <div
+        key={key}
+        style={style}
+        className={classNames(styles.shelfContainer, { [styles.featured]: contentItem.featured })}
+      >
         <Shelf
           key={contentItem.playlistId}
           playlistId={contentItem.playlistId}

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -33,8 +33,8 @@ $container-width-desktop: 800px !default;
 // Responsive
 // --------------------------------
 
-$mobile-max-width: 767px !default;
-$tablet-max-width: 1023px !default;
+$mobile-max-width: 595px !default;
+$tablet-max-width: 959px !default;
 
 $tablet-min-width: $mobile-max-width + 1 !default;
 $desktop-min-width: $tablet-max-width + 1 !default;