feat: course about page markup and styles improvements (#33791)

* feat: course about page markup and styles improvements * test: update tests according to changes * fix: relocate course organization and return removed prerequisites info * fix: display org info above the course title --------- Co-authored-by: Eugene Dyudyunov <[email protected]> Co-authored-by: ihor-romaniuk <[email protected]>
openedx · Sep 9, 2024 · f70063d · f70063d
1 parent 493e7ef
commit f70063d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/lms/djangoapps/courseware/tests/test_about.py b/lms/djangoapps/courseware/tests/test_about.py
@@ -156,7 +156,10 @@ def test_pre_requisite_course(self):
         assert resp.status_code == 200
         pre_requisite_courses = get_prerequisite_courses_display(course)
         pre_requisite_course_about_url = reverse('about_course', args=[str(pre_requisite_courses[0]['key'])])
-        assert '<span class="important-dates-item-text pre-requisite"><a href="{}">{}</a></span>'.format(pre_requisite_course_about_url, pre_requisite_courses[0]['display']) in resp.content.decode(resp.charset).strip('\n')  # pylint: disable=line-too-long
+        assert (
+            f'You must successfully complete <a href="{pre_requisite_course_about_url}">'
+            f'{pre_requisite_courses[0]["display"]}</a> before you begin this course.'
+        ) in resp.content.decode(resp.charset).strip('\n')
 
     @patch.dict(settings.FEATURES, {'ENABLE_PREREQUISITE_COURSES': True})
     def test_about_page_unfulfilled_prereqs(self):
@@ -190,7 +193,10 @@ def test_about_page_unfulfilled_prereqs(self):
         assert resp.status_code == 200
         pre_requisite_courses = get_prerequisite_courses_display(course)
         pre_requisite_course_about_url = reverse('about_course', args=[str(pre_requisite_courses[0]['key'])])
-        assert '<span class="important-dates-item-text pre-requisite"><a href="{}">{}</a></span>'.format(pre_requisite_course_about_url, pre_requisite_courses[0]['display']) in resp.content.decode(resp.charset).strip('\n')  # pylint: disable=line-too-long
+        assert (
+            f'You must successfully complete <a href="{pre_requisite_course_about_url}">'
+            f'{pre_requisite_courses[0]["display"]}</a> before you begin this course.'
+        ) in resp.content.decode(resp.charset).strip('\n')
 
         url = reverse('about_course', args=[str(pre_requisite_course.id)])
         resp = self.client.get(url)

diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
@@ -44,13 +44,23 @@
       > div.table {
         display: table;
         width: 100%;
+
+        @include media-breakpoint-down(sm) {
+          display: flex;
+          flex-direction: column;
+        }
       }
 
       .intro {
         box-sizing: border-box;
 
         @include clearfix();
 
+        @include media-breakpoint-down(sm) {
+            width: auto;
+            order: 2;
+        }
+
         display: table-cell;
         vertical-align: middle;
         padding: $baseline;
@@ -127,6 +137,10 @@
           a.add-to-cart {
             @include button(shiny, $button-color);
 
+            @include media-breakpoint-down(md) {
+              width: 100%;
+            }
+
             box-sizing: border-box;
             border-radius: 3px;
             display: block;
@@ -189,6 +203,11 @@
             @include float(left);
             @include margin(1px, flex-gutter(8), 0, 0);
             @include transition(none);
+            @include media-breakpoint-down(md) {
+              width: 100%;
+              margin-right: 0;
+              margin-bottom: 10px;
+            }
 
             width: flex-grid(5, 8);
           }
@@ -213,6 +232,11 @@
         width: flex-grid(4);
         z-index: 2;
 
+        @include media-breakpoint-down(sm) {
+          width: auto;
+          order: 1;
+        }
+
         .hero {
           border: 1px solid $border-color-3;
           height: 100%;

diff --git a/lms/templates/courseware/course_about.html b/lms/templates/courseware/course_about.html
@@ -62,11 +62,10 @@
       <div class="table">
       <section class="intro">
         <div class="heading-group">
-          <h1>
-            ${course.display_name_with_default}
-          </h1>
+          <p><small>${course.display_org_with_default}</small></p>
+          <h1>${course.display_name_with_default}</h1>
           <br />
-          <span>${course.display_org_with_default}</span>
+          <p>${get_course_about_section(request, course, 'short_description')}</p>
         </div>
 
         <div class="main-cta">
@@ -160,7 +159,11 @@ <h1>
 
         <%block name="course_about_important_dates">
         <ol class="important-dates">
-          <li class="important-dates-item"><span class="icon fa fa-info-circle" aria-hidden="true"></span><p class="important-dates-item-title">${_("Course Number")}</p><span class="important-dates-item-text course-number">${course.display_number_with_default}</span></li>
+          <li class="important-dates-item">
+              <span class="icon fa fa-info-circle" aria-hidden="true"></span>
+              <p class="important-dates-item-title">${_("Course Number")}</p>
+              <span class="important-dates-item-text course-number">${course.display_number_with_default}</span>
+          </li>
           % if not course.start_date_is_still_default:
               <%
                   course_start_date = course.advertised_start or course.start
@@ -231,7 +234,11 @@ <h1>
           % endif
 
           % if get_course_about_section(request, course, "prerequisites"):
-            <li class="important-dates-item"><span class="icon fa fa-book" aria-hidden="true"></span><p class="important-dates-item-title">${_("Requirements")}</p><span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span></li>
+            <li class="important-dates-item">
+              <span class="icon fa fa-book" aria-hidden="true"></span>
+              <p class="important-dates-item-title">${_("Requirements")}</p>
+              <span class="important-dates-item-text prerequisites">${get_course_about_section(request, course, "prerequisites")}</span>
+            </li>
           % endif
         </ol>
         </%block>