Skip to content

E
edx-platform
Commit b24fdd9e by chrisndodge
Options

Merge pull request #576 from edx/feature/cdodge/display-location-information-in-course-listings 

Feature/cdodge/display location information in course listings
parents 4d5727a2 22d33db5
Showing with 118 additions and 48 deletions
cms/djangoapps/contentstore/tests/test_contentstore.py
...@@ -1141,7 +1141,7 @@ class ContentStoreTest(ModuleStoreTestCase): ...@@ -1141,7 +1141,7 @@ class ContentStoreTest(ModuleStoreTestCase):
resp = self.client.get(reverse('index')) resp = self.client.get(reverse('index'))
self.assertContains( self.assertContains(
resp, resp,
'<span class="class-name">Robot Super Educational Course</span>', '<h3 class="course-title">Robot Super Educational Course</h3>',
status_code=200, status_code=200,
html=True html=True
) )
......
cms/djangoapps/contentstore/views/user.py
...@@ -54,6 +54,9 @@ def index(request): ...@@ -54,6 +54,9 @@ def index(request):
course.location, course.location,
course_id=course.location.course_id, course_id=course.location.course_id,
), ),
course.display_org_with_default,
course.display_number_with_default,
course.location.name
) )
return render_to_response('index.html', { return render_to_response('index.html', {
......
cms/static/sass/views/_dashboard.scss
...@@ -291,7 +291,7 @@ body.dashboard { ...@@ -291,7 +291,7 @@ body.dashboard {
// ==================== // ====================
// course listings // ELEM: course listings
.courses { .courses {
margin: $baseline 0; margin: $baseline 0;
} }
...@@ -304,61 +304,110 @@ body.dashboard { ...@@ -304,61 +304,110 @@ body.dashboard {
box-shadow: 0 1px 2px $shadow-l1; box-shadow: 0 1px 2px $shadow-l1;
.course-item { .course-item {
@include box-sizing(border-box);
width: flex-grid(9, 9);
position: relative; position: relative;
border-bottom: 1px solid $gray-l1; border-bottom: 1px solid $gray-l1;
padding: $baseline;
&:last-child { // STATE: hover/focus
border-bottom: none; &:hover {
} background: $paleYellow;
.class-link { .course-actions .view-live-button {
z-index: 100; opacity: 1.0;
display: block; pointer-events: auto;
padding: 20px 25px; }
line-height: 1.3;
&:hover { .course-title {
background: $paleYellow; color: $orange-d1;
}
+ .view-live-button { .course-metadata {
opacity: 1.0; opacity: 1.0;
pointer-events: auto; }
} }
}
}
}
.class-name { .course-link, .course-actions {
display: block; @include box-sizing(border-box);
font-size: 19px; display: inline-block;
font-weight: 300; vertical-align: middle;
} }
.detail { // encompassing course link
font-size: 14px; .course-link {
font-weight: 400; @extend .ui-depth2;
margin-right: 20px; width: flex-grid(7, 9);
color: #3c3c3c; margin-right: flex-gutter();
} }
// view live button // course title
.view-live-button { .course-title {
z-index: 10000; @extend .t-title4;
position: absolute; margin: 0 ($baseline*2) ($baseline/4) 0;
top: ($baseline*0.75); font-weight: 300;
right: $baseline; }
padding: ($baseline/4) ($baseline/2);
opacity: 0.0;
pointer-events: none;
&:hover { // course metadata
opacity: 1.0; .course-metadata {
pointer-events: auto; @extend .t-copy-sub1;
} @include transition(opacity $tmg-f1 ease-in-out 0);
color: $gray;
opacity: 0.75;
.metadata-item {
display: inline-block;
&:after {
content: "/";
margin-left: ($baseline/10);
margin-right: ($baseline/10);
color: $gray-l4;
}
&:last-child {
&:after {
content: "";
margin-left: 0;
margin-right: 0;
}
}
.label {
@extend .cont-text-sr;
}
}
}
.course-actions {
@extend .ui-depth3;
position: static;
width: flex-grid(2, 9);
text-align: right;
// view live button
.view-live-button {
@extend .ui-depth3;
@include transition(opacity $tmg-f2 ease-in-out 0);
@include box-sizing(border-box);
padding: ($baseline/2);
opacity: 0.0;
pointer-events: none;
&:hover {
opacity: 1.0;
pointer-events: auto;
}
}
&:last-child {
border-bottom: none;
}
}
} }
} }
// ELEM: new user form // ELEM: new user form
.wrapper-create-course { .wrapper-create-course {
......
cms/templates/index.html
...@@ -133,12 +133,30 @@ ...@@ -133,12 +133,30 @@
%if len(courses) > 0: %if len(courses) > 0:
<div class="courses"> <div class="courses">
<ul class="list-courses"> <ul class="list-courses">
%for course, url, lms_link in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''): %for course, url, lms_link, org, num, run in sorted(courses, key=lambda s: s[0].lower() if s[0] is not None else ''):
<li class="course-item"> <li class="course-item">
<a class="class-link" href="${url}" class="class-name"> <a class="course-link" href="${url}">
<span class="class-name">${course}</span> <h3 class="course-title">${course}</h3>
<div class="course-metadata">
<span class="course-org metadata-item">
<span class="label">${_("Organization:")}</span> <span class="value">${org}</span>
</span>
<span class="course-num metadata-item">
<span class="label">${_("Course Number:")}</span>
<span class="value">${num}</span>
</span>
<span class="course-run metadata-item">
<span class="label">${_("Course Run:")}</span> <span class="value">${run}</span>
</span>
</div>
</a> </a>
<a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
<ul class="item-actions course-actions">
<li class="action">
<a href="${lms_link}" rel="external" class="button view-button view-live-button">${_("View Live")}</a>
</li>
</ul>
</li> </li>
%endfor %endfor
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment