Skip to content

Commit

Permalink
feat: course about page markup and styles improvements (#33712)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@bydawen @dyudyunov @ihor-romaniuk
3 people authored Sep 9, 2024
1 parent 7292cab commit 483315c
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 8 deletions.
10 changes: 8 additions & 2 deletions lms/djangoapps/courseware/tests/test_about.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down Expand Up @@ -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)
Expand Down
24 changes: 24 additions & 0 deletions lms/static/sass/multicourse/_course_about.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
Expand All @@ -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%;
Expand Down
19 changes: 13 additions & 6 deletions lms/templates/courseware/course_about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 483315c

Please sign in to comment.