Video Component Styling fix (#1875)

* movin video around * add to base and css * final pass for just font changes * percentages, obviously * Fix spacing per new change * update to 1320 + keep blue box outside like design * feedback from Collin * feedback from Collin * feedback update * feedback update * Update home-page-video-component.scss
mitodl · Sep 15, 2023 · 317e399 · 317e399
1 parent 161b1bc
commit 317e399
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 104 deletions.
diff --git a/cms/templates/home_page.html b/cms/templates/home_page.html
@@ -130,13 +130,13 @@ <h2 class="course-card-title">
   </div>
 {% endif %}
 {% if show_home_page_video_component and page.video_component_title %}
-<div class="home-page-video-row d-flex justify-content-center row">
-  <div class="home-page-video-container">
-    <div class="home-page-video-description">
+<div class="home-page-video-row d-flex justify-content-center container">
+  <div class="home-page-video-container row">
+    <div class="home-page-video-description col-12 col-xl-5">
       <h3>{{ page.video_component_title }}</h3>
-      <p>{{ page.video_component_description|richtext }}</p>
+      {{ page.video_component_description|richtext }}
     </div>
-      <div class="home-page-video-wrapper">
+      <div class="home-page-video-wrapper col-12 col-xl-7">
         <div class="home-page-video-player">
           {% if page.video_url %}
             <video-js
@@ -145,10 +145,7 @@ <h3>{{ page.video_component_title }}</h3>
                   data-setup="{{page.video_player_config}}"
                   preload="metadata"
                 >
-              </video-js>
-            <div class="home-page-video-underlay">
-
-            </div>
+            </video-js>
             {% endif %}
           </div>
         </div>

diff --git a/frontend/public/scss/home-page/home-page-contact-row.scss b/frontend/public/scss/home-page/home-page-contact-row.scss
@@ -13,6 +13,10 @@ body.new-design {
   @include media-breakpoint-down(lg) {
     background: $home-page-grey-lite;
   }
+
+  @include media-breakpoint-down(sm) {
+    margin-top: 3rem;
+  }
   h1, h2, h3, h4, h5, h6 {
     font-family: Poppins, sans-serif;
     font-style: normal;

diff --git a/frontend/public/scss/home-page/home-page-video-component.scss b/frontend/public/scss/home-page/home-page-video-component.scss
@@ -1,10 +1,7 @@
 .home-page-video-row {
-  width: 100%;
+  max-width: 100%;
   margin: 0;
   padding: 0;
-  display: flex;
-  justify-content: center;
-  align-content: center;
 
   h1, h2, h3, h4, h5, h6 {
     font-family: Poppins, sans-serif;
@@ -21,36 +18,40 @@
   }
 
   .home-page-video-container {
-    margin-top: -60px;
-    width: 100%;
-    max-width: 1440px;
+    margin-top: 60px;
+    width: 95%;
+    max-width: 1320px;
     flex-shrink: 0;
     display: flex;
-    @include media-breakpoint-down(lg) {
+    padding: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    @include media-breakpoint-down(xl) {
       flex-direction: column;
       width: 100%;
+      padding: 0 40px 0 40px;
+      margin-top: 2rem;
+    }
+    @include media-breakpoint-down(md) {
+      padding: 0 2.44rem 0 2.44rem;
+      margin-top: 1rem;
     }
 
     .home-page-video-description {
-      width: 36%;
-      max-width: 517px;
-      display: flex;
-      flex-direction: column;
-      padding: 140px 23px 0 60px;
-      @include media-breakpoint-down(lg) {
-        width: 100%;
-        max-width: 100%;
-        padding: 100px 0 0 60px;
-      }
-      @include media-breakpoint-down(md) {
-        padding-left: 20px;
+      padding: 0 4.62rem 0 0;
+      @include media-breakpoint-down(xl) {
+        padding: 0;
       }
 
       h3 {
         color: $home-page-header-blue;
         font-size: 36px;
         line-height: 45px;
-        align-self: stretch;
+        margin-bottom: 1rem;
+        @include media-breakpoint-down(md) {
+          margin-bottom: .25rem;
+        }
         @include media-breakpoint-down(sm) {
           font-size: 18px;
           line-height: normal;
@@ -61,7 +62,7 @@
         color: $home-page-header-blue;
         font-size: 20px;
         line-height: 32px;
-        align-self: stretch;
+        margin-bottom: 0;
         @include media-breakpoint-down(sm) {
           font-size: 13px;
           line-height: 24px;
@@ -70,49 +71,24 @@
     }
 
     .home-page-video-wrapper {
-      max-width: 900px;
-      width: 64%;
-      height: 500px;
-      @include media-breakpoint-down(lg) {
-        width: 100%;
-        max-width: 100%;
-        padding: 0 0 0 60px;
-      }
-      @include media-breakpoint-down(md) {
-        padding-left: 20px;
-      }
-      @include media-breakpoint-down(sm) {
-        height: 200px;
-      }
-
+      padding: 0;
       .home-page-video-player {
-        width: 100%;
-        max-width: 900px;
-        height: inherit;
-        position: relative;
+        @include media-breakpoint-down(xl) {
+          padding-top: 1.5rem;
+        }
 
         .vjs-default-skin {
-          width: 863px;
-          height: 485px;
-          position: absolute;
-          top: 120px;
-          left: 0;
-          z-index: 99;
-          @include media-breakpoint-down(xl) {
-            top: 180px;
-            width: 574px;
-            height: 322px;
-          }
-          @include media-breakpoint-down(lg) {
-            top: 0;
-          }
-          @include media-breakpoint-down(md) {
-            width: 574px;
-            height: 322px;
-          }
-          @include media-breakpoint-down(sm) {
-            width: 319px;
-            height: 179px;
+          width: 100%;
+          height: 0;
+          padding-bottom: 56.25%;
+          &:before{
+            background: $home-page-video-player-blue;
+            width: 100%;
+            height: 100%;
+            top: 5.62%;
+            left: 3.158%;
+            content: '';
+            position: absolute;
           }
         }
 
@@ -140,43 +116,11 @@
         }
 
         .vjs-youtube {
-
           .vjs-big-play-button {
             display: none;
           }
         }
-
-        .home-page-video-underlay {
-          position: absolute;
-          left: 307px;
-          top: 175px;
-          width: 586px;
-          height: 460px;
-          background: $home-page-video-player-blue;
-          @include media-breakpoint-down(xl) {
-            width: 490px;
-            height: 319px;
-            top: 210px;
-            left: 113px;
-          }
-          @include media-breakpoint-down(lg) {
-            top: 30px;
-            left: 113px;
-          }
-          @include media-breakpoint-down(md) {
-            width: 420px;
-            height: 269px;
-            top: 83px;
-            left: 185px;
-          }
-          @include media-breakpoint-down(sm) {
-            width: 239px;
-            height: 159px;
-            top: 41px;
-            left: 101px;
-          }
-        }
       }
     }
   }
-}
+}