Studio: adding rendering/styling of course start date on outline view

This commit is contained in:
Brian Talbot
2014-08-18 14:37:27 -04:00
parent 0d63d0c1c1
commit 71e5195170
2 changed files with 60 additions and 1 deletions

View File

@@ -171,6 +171,49 @@
@extend %expand-collapse;
}
// course status
// --------------------
.course-status {
margin-bottom: $baseline;
.status-release {
@extend %t-copy-base;
display: inline-block;
color: $color-copy-base;
}
.status-release-label,
.status-release-value,
.status-actions {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
}
.status-release-label {
margin-right: ($baseline/4);
}
.status-release-value {
@extend %t-strong;
}
.status-actions {
@extend %actions-list;
@include transition(opacity $tmg-f1 ease-in-out 0);
margin-left: ($baseline/4);
opacity: 0.0;
}
// STATE: hover
&:hover {
.status-actions {
opacity: 1.0;
}
}
}
// outline
// --------------------
.outline {

View File

@@ -42,7 +42,6 @@ from contentstore.utils import reverse_usage_url
<h1 class="page-header">
<small class="subtitle">${_("Content")}</small>
<span class="sr">&gt; </span>${_("Course Outline")}
<span><a href="${settings_url}">${course_release_date}</a></span>
</h1>
<nav class="nav-actions">
@@ -71,10 +70,27 @@ from contentstore.utils import reverse_usage_url
<div class="wrapper-content wrapper">
<section class="content">
<article class="content-primary" role="main">
<div class="course-status">
<div class="status-release">
<h2 class="status-release-label">${_("Course Start Date:")}</h2>
<p class="status-release-value">${course_release_date}</p>
<ul class="status-actions">
<li class="action-item action-edit">
<a href="${settings_url}" class="edit-button action-button" data-tooltip="${_("Edit Start Date")}">
<i class="icon-pencil"></i>
<span class="action-button-text sr">${_("Edit Start Date")}</span>
</a>
</li>
</ul>
</div>
</div>
<div class="wrapper-dnd">
<%
course_locator = context_course.location
%>
<h2 class="sr">${_("Course Outline")}</h2>
<article class="outline outline-course" data-locator="${course_locator}" data-course-key="${course_locator.course_key}">
</article>
</div>