Merge branch 'main' into jw/programs-api-v2

# Conflicts: # courses/views/v1/views_test.py
mitodl · Oct 31, 2023 · cfed566 · cfed566
2 parents 1d3fd59 + 140d0dc
commit cfed566
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 3 deletions.
diff --git a/RELEASE.rst b/RELEASE.rst
@@ -1,6 +1,13 @@
 Release Notes
 =============
 
+Version 0.79.0 (Released October 30, 2023)
+--------------
+
+- Program API test updates (#1963)
+- Instructor popup modal mobile view (#1961)
+- Course API test updates (#1962)
+
 Version 0.78.0 (Released October 23, 2023)
 --------------
 

diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html
@@ -140,7 +140,11 @@ <h5 class="modal-title">{{ member.instructor_name }}</h5>
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                           onClick="$('#instructor-modal-{{ member.id }}').modal('hide');
                                    $('#instructor-name-{{ member.id }}').focus();">
-                    <span aria-hidden="true">&times;</span>
+                    <span aria-hidden="true">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4.1239L8.94245 0.181446C9.18438 -0.0604821 9.57662 -0.0604821 9.81855 0.181446C10.0605 0.423375 10.0605 0.815619 9.81855 1.05755L5.8761 5L9.81855 8.94245C10.0605 9.18438 10.0605 9.57662 9.81855 9.81855C9.57662 10.0605 9.18438 10.0605 8.94245 9.81855L5 5.8761L1.05755 9.81855C0.815619 10.0605 0.423375 10.0605 0.181446 9.81855C-0.0604821 9.57662 -0.0604821 9.18438 0.181446 8.94245L4.1239 5L0.181446 1.05755C-0.0604821 0.815619 -0.0604821 0.423375 0.181446 0.181446C0.423375 -0.0604821 0.815619 -0.0604821 1.05755 0.181446L5 4.1239Z" fill="#03152D"/>
+</svg>
+                    </span>
                   </button>
                 </div>
                 <div class="modal-body">

diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
@@ -361,10 +361,24 @@ body.new-design {
 
   .instructor-modal {
     .modal-dialog {
-      width: 770px;
       max-width: 770px;
       border-radius: 5px;
 
+      @include media-breakpoint-down(md) {
+        width:500px;
+      }
+      @include media-breakpoint-down(sm) {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 20px;
+        display: flex;
+        width: 360px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+        margin: 0;
+      }
+
       .modal-header {
         background-color: #03152d;
         background-image: url('/static/images/instructor-modal-head.jpg');
@@ -373,6 +387,15 @@ body.new-design {
         height: 130px;
         align-items: start;
         padding: 20px;
+        z-index: 9;
+
+        @include media-breakpoint-down(sm) {
+          background-image: none;
+          border-bottom: none;
+          padding: 5px;
+          background-color: transparent;
+          height: 0;
+        }
 
         h5 {
           margin-left: -9999px;
@@ -383,18 +406,34 @@ body.new-design {
           border-radius: 100%;
           width: 30px;
           height: 30px;
+
+          @include media-breakpoint-down(sm) {
+            background-color: transparent;
+            width: 38px;
+            height: 38px;
+          }
         }
       }
 
       .modal-body {
         padding-left: 50px;
         padding-right: 50px;
 
+        @include media-breakpoint-down(sm) {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+
         div.col-instructor-photo {
           margin-top: -50px;
           width: 165px !important;
           max-width: 165px;
 
+          @include media-breakpoint-down(sm) {
+            margin-top: -5px;
+            flex: 0.35 0;
+        }
+
           img.img-thumbnail {
             width: 130px;
             height: 145px;
@@ -404,18 +443,37 @@ body.new-design {
             object-position: 50% 0;
 
             box-shadow: 0px 2px #e1e1e1;
+
+            @include media-breakpoint-down(sm) {
+              width: 80px;
+              height: 90.278px;
+              padding: 5px;
+              margin: 0;
+            }
           }
         }
 
         div.col-instructor-title {
           width: auto;
           margin-left: 10px;
 
+          @include media-breakpoint-down(sm) {
+            width: 218px;
+            padding: 0;
+            margin-left: 0;
+          }
+
           h2 {
             margin-bottom: 0px;
             line-height: 30px;
             font-size: 25px;
             font-weight: 700;
+
+            @include media-breakpoint-down(sm) {
+              font-size: 20px;
+              font-style: normal;
+              font-weight: 700;
+            }
           }
           h3, p {
             font-size: 18px;
@@ -425,6 +483,11 @@ body.new-design {
           }
           h3 {
             font-weight: 600;
+
+            @include media-breakpoint-down(sm) {
+              font-size: 16px;
+              font-weight: 500;
+            }
           }
           p {
             margin-top: 5px;
@@ -433,6 +496,10 @@ body.new-design {
 
         .row-instructor-body {
           padding: 10px 10px;
+
+          @include media-breakpoint-down(sm) {
+            padding: 10px 0;
+          }
         }
       }
     }

diff --git a/main/settings.py b/main/settings.py
@@ -29,7 +29,7 @@
 from main.celery_utils import OffsettingSchedule
 from main.sentry import init_sentry
 
-VERSION = "0.78.0"
+VERSION = "0.79.0"
 
 log = logging.getLogger()