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

* feat: course about page markup and styles improvements

* test: update tests according to changes

* fix: relocate course organization and return removed prerequisites info

---------

Co-authored-by: Eugene Dyudyunov <evgen.dyudyunov@raccoongang.com>
Co-authored-by: ihor-romaniuk <ihor.romaniuk@raccoongang.com>
This commit is contained in:
bydawen
2024-09-09 12:38:53 +03:00
committed by GitHub
parent 7292cabe32
commit 483315cfe2
3 changed files with 45 additions and 8 deletions

View File

@@ -156,7 +156,10 @@ class AboutTestCase(LoginEnrollmentTestCase, SharedModuleStoreTestCase, EventTra
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 @@ class AboutTestCase(LoginEnrollmentTestCase, SharedModuleStoreTestCase, EventTra
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)

View File

@@ -44,6 +44,11 @@
> div.table {
display: table;
width: 100%;
@include media-breakpoint-down(sm) {
display: flex;
flex-direction: column;
}
}
.intro {
@@ -51,6 +56,11 @@
@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%;

View File

@@ -62,11 +62,10 @@ from openedx.core.lib.courses import course_image_url
<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 @@ from openedx.core.lib.courses import course_image_url
<%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 @@ from openedx.core.lib.courses import course_image_url
% 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>