fix(videodetail): fix posterfading responsiveness

jwplayer · Jun 24, 2021 · aab58bb · aab58bb
1 parent 62406b8
commit aab58bb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -23,6 +23,8 @@
 
 .main {
   display: flex;
+  max-width: 100vw;
+  overflow: hidden;
 
   &.hidden {
     display: none;
@@ -177,14 +179,19 @@
   }
 
   &.fading {
-    width: 100vw;
-    height: 100vh;
-    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%);
-    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 50%); /* stylelint-disable-line */
+    width: 80vw;
+    height: calc(85vw / 16 * 9);
+    mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%);
+    -webkit-mask-image: radial-gradient(farthest-corner at 80% 20%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 60%); /* stylelint-disable-line */
+
+    @include responsive.tablet-only() {
+      width: 80vw;
+      height: calc(140vw / 16 * 9);
+    }
 
     @include responsive.mobile-only() {
-      mask-image: radial-gradient(farthest-corner at 70% 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%);
-      -webkit-mask-image: radial-gradient(farthest-corner at 70% 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 65%); /* stylelint-disable-line */
+      width: 110vw;
+      height: calc(180vw / 16 * 9);
     }
   }
 }

diff --git a/src/screens/Movie/Movie.module.scss b/src/screens/Movie/Movie.module.scss
@@ -4,8 +4,8 @@
 .related {
   display: flex;
   align-items: center;
-  margin: 16px 0;
   > h3 {
+    padding-bottom: 16px;
     font-family: var(--body-alt-font-family);
     font-weight: 700;
     font-size: 24px;

diff --git a/src/screens/Series/Series.module.scss b/src/screens/Series/Series.module.scss
@@ -5,8 +5,8 @@
 .episodes {
   display: flex;
   align-items: center;
-  margin: 16px 0;
   > h3 {
+    padding-bottom: 16px;
     font-family: var(--body-alt-font-family);
     font-weight: 700;
     font-size: 24px;