Skip to content

E
edx-platform
Commit d64894de by Brian Talbot
Options

Studio: revises markup and visual styling for course listings metadata

parent ef53e8df
Showing with 112 additions and 53 deletions
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,66 +304,110 @@ body.dashboard { ...@@ -304,66 +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: 22px; display: inline-block;
font-weight: 300; vertical-align: middle;
} }
.class-listing-info { // encompassing course link
color: #989898; .course-link {
margin-right: 15px; @extend .ui-depth2;
} width: flex-grid(7, 9);
margin-right: flex-gutter();
}
.detail { // course title
font-size: 14px; .course-title {
font-weight: 400; @extend .t-title4;
margin-right: 20px; margin: 0 ($baseline*2) ($baseline/4) 0;
color: #3c3c3c; font-weight: 300;
} }
// view live button // course metadata
.view-live-button { .course-metadata {
z-index: 10000; @extend .t-copy-sub1;
position: absolute; @include transition(opacity $tmg-f1 ease-in-out 0);
top: ($baseline*0.75); color: $gray;
right: $baseline; opacity: 0.75;
padding: ($baseline/4) ($baseline/2);
opacity: 0.0; .metadata-item {
pointer-events: none; display: inline-block;
&:after {
content: "/";
margin-left: ($baseline/10);
margin-right: ($baseline/10);
color: $gray-l4;
}
&:hover { &:last-child {
opacity: 1.0;
pointer-events: auto; &: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
...@@ -135,13 +135,28 @@ ...@@ -135,13 +135,28 @@
<ul class="list-courses"> <ul class="list-courses">
%for course, url, lms_link, org, num, run 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>
<span class="class-listing-info class-org"><label>${_("Organization")}:&nbsp;</label>${org}</span>
<span class="class-listing-info class-num"><label>${_("Course Number")}:&nbsp;</label>${num}</span> <div class="course-metadata">
<span class="class-listing-info class-run"><label>${_("Course Run")}:&nbsp;</label>${run}</span> <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