feat: course about page markup and styles improvements

openedx · Apr 18, 2024 · 6a3a69e · 6a3a69e
1 parent a6bd0e2
commit 6a3a69e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
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>
-          <br />
+          <h1>${course.display_name_with_default}</h1>
           <span>${course.display_org_with_default}</span>
+          <br />
+          <p>${get_course_about_section(request, course, 'short_description')}</p>
         </div>
 
         <div class="main-cta">
@@ -219,7 +218,6 @@ <h1>
             <span class="icon fa fa-list-ul" aria-hidden="true"></span>
             <p class="important-dates-item-title">${_("Prerequisites")}</p>
             ## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
-            <span class="important-dates-item-text pre-requisite"><a href="${prc_target}">${pre_requisite_courses[0]['display']}</a></span>
             <p class="tip">
             ${Text(_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.")).format(
               link_start=HTML('<a href="{}">').format(prc_target),
@@ -231,7 +229,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>