Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: course about page markup and styles improvements #34892

Merged
merged 4 commits into from
Sep 9, 2024
Merged

feat: course about page markup and styles improvements #34892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c82e1a
feat: course about page markup and styles improvements
bydawen Nov 1, 2023
da3ccf7
test: update tests according to changes
dyudyunov Nov 23, 2023
2038ca7
fix: relocate course organization and return removed prerequisites info
ihor-romaniuk Apr 18, 2024
53f2ec2
fix: display org info above the course title
ihor-romaniuk May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions lms/djangoapps/courseware/tests/test_about.py
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading