refactor: responsive fixes for featured shelf

jwplayer · Nov 1, 2024 · 9266168 · 9266168
1 parent 38677f1
commit 9266168
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 25 deletions.
diff --git a/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss b/packages/ui-react/src/components/FeaturedShelf/FeaturedShelf.module.scss
@@ -3,17 +3,28 @@
 @use '@jwp/ott-ui-react/src/styles/theme';
 @use '@jwp/ott-ui-react/src/styles/mixins/typography';
 
+$desktop-height: 56.25vw;
+$desktop-max-height: 700px;
+$desktop-min-height: 275px;
+
+$tablet-height: 70vw;
+$tablet-min-height: 375x;
+
+$mobile-height: 70vh;
+$mobile-min-height: 450px;
+$mobile-landscape-height: 100vh;
+
 .shelf {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: flex-start;
   width: 100%;
-  height: calc(56.25vw - variables.$header-height);
-  min-height: 275px;
-  max-height: calc(700px - variables.$header-height);
-  margin: 0 0 24px 0;
-  padding: 100px calc(variables.$base-spacing * 3);
+  height: calc($desktop-height - variables.$header-height);
+  min-height: calc($desktop-min-height - variables.$header-height);
+  max-height: calc($desktop-max-height - variables.$header-height);
+  margin-bottom: calc(variables.$base-spacing * 2);
+  padding-bottom: 100px;
 
   color: var(--primary-color);
   font-family: var(--body-alt-font-family);
@@ -26,15 +37,22 @@
     opacity: 0.8;
   }
 
+  @include responsive.mobile-and-small-tablet() {
+    padding: 0;
+  }
+
   @include responsive.tablet-only() {
-    height: calc(70vw - variables.$header-height);
+    height: calc($tablet-height - variables.$header-height);
+    min-height: calc($tablet-min-height - variables.$header-height);
   }
 
   @include responsive.mobile-only() {
-    height: calc(70vh - variables.$header-height);
+    height: calc($mobile-height - variables.$header-height);
+    min-height: calc($mobile-min-height - variables.$header-height);
   }
 
-  @include responsive.mobile-and-small-tablet() {
+  @include responsive.mobile-only-landscape() {
+    height: calc($mobile-landscape-height - variables.$header-height);
     padding: 0;
   }
 }
@@ -81,11 +99,17 @@
   background-color: var(--featured-shelf-background-color);
 
   @include responsive.tablet-only() {
-    height: calc(70vw);
+    height: $tablet-height;
+    min-height: $tablet-min-height;
   }
 
   @include responsive.mobile-only() {
-    height: calc(101.25vw);
+    height: $mobile-height;
+    min-height: $mobile-min-height;
+  }
+
+  @include responsive.mobile-only-landscape() {
+    height: $mobile-landscape-height;
   }
 }
 
@@ -108,8 +132,8 @@
   height: 100%;
   justify-self: flex-end;
 
-  -webkit-mask-image: linear-gradient(to right, #0000 0, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.8) 80%);
-  mask-image: linear-gradient(to right, #0000 0, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.8) 80%);
+  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.8) 80%);
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.8) 80%);
 
   > div {
     position: absolute;
@@ -145,10 +169,6 @@
   bottom: 0;
   left: 0;
   background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.8) 95%, rgba(0, 0, 0, 1) 100%);
-
-  @include responsive.mobile-and-small-tablet() {
-    display: none;
-  }
 }
 
 .fade2 {
@@ -160,11 +180,7 @@
   background: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.15) 100%);
 
   @include responsive.mobile-and-small-tablet() {
-    background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.3) 100%);
-  }
-
-  @include responsive.mobile-only() {
-    height: 70vh;
+    background: linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 20%, rgba(0, 0, 0, 0.3) 95%, rgba(0, 0, 0, 0.3) 100%);
   }
 }
 
@@ -179,8 +195,7 @@
   flex-direction: column;
   gap: 24px;
   max-width: 46%;
-  margin-top: 5%;
-  padding-left: calc(variables.$base-spacing * 3);
+  padding-left: calc(variables.$base-spacing * 4);
 
   > h2 {
     margin: 0;
@@ -194,6 +209,10 @@
     gap: 12px;
   }
 
+  @include responsive.tablet-only() {
+    max-width: 60%;
+  }
+
   @include responsive.mobile-and-small-tablet() {
     bottom: 0;
     align-items: center;
@@ -213,6 +232,20 @@
       }
     }
   }
+
+  @include responsive.mobile-only-landscape() {
+    max-width: 70%;
+    padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+  }
+
+  @include responsive.tablet-small-only() {
+    padding: 0 calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3) calc(variables.$base-spacing * 3);
+  }
+
+  @include responsive.mobile-only() {
+    padding: calc(variables.$base-spacing * 3) variables.$base-spacing;
+    text-align: center;
+  }
 }
 
 .error {
@@ -275,7 +308,7 @@
 
 .dots {
   position: absolute;
-  bottom: 32px;
+  bottom: 24px;
   left: 50%;
   display: flex;
   gap: 12px;

diff --git a/packages/ui-react/src/styles/mixins/_responsive.scss b/packages/ui-react/src/styles/mixins/_responsive.scss
@@ -7,7 +7,7 @@
 }
 
 @mixin mobile-only-landscape {
-  @media screen and (max-width: variables.$mobile-max-width) and (orientation: landscape) {
+  @media screen and (max-width: variables.$tablet-max-width) and (max-height: 520px) and (orientation: landscape) {
     @content;
   }
 }