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:
@@ -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)
|
||||
|
||||
@@ -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%;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user