Skip to content

E
edx-platform
Commit 267e8c97 by Brian Talbot Committed by cahrens
Options

LMS: adds static cohort group management UI to the Instructor Dashboard

parent f753a09f
Showing with 280 additions and 62 deletions
lms/static/sass/course/instructor/_instructor_2.scss
......@@ -34,7 +34,6 @@
}
// system feedback - messages
.wrapper-msg {
margin-bottom: ($baseline*1.5);
}
......@@ -121,6 +120,8 @@
}
}
// instructor dashboard 2
// ====================
section.instructor-dashboard-content-2 {
@extend .content;
// position: relative;
......@@ -210,35 +211,123 @@ section.instructor-dashboard-content-2 {
}
}
}
}
section.idash-section {
// elements - general
// --------------------
.idash-section {
// messages
.message {
margin-bottom: $baseline;
display: none;
margin-top: ($baseline*1.5);
// background-color: #0f0;
border-radius: ($baseline/$baseline);
padding: ($baseline*0.75) $baseline;
&.active-section {
&.is-shown {
display: block;
// background-color: #ff0;
}
}
.message-title {
@extend %t-title6;
@extend %t-weight4;
margin-bottom: ($baseline/4);
}
.basic-data {
padding: 6px;
.message-copy {
@extend %t-copy-sub1;
}
.message-actions {
margin-top: ($baseline/2);
.action-primary {
@include idashbutton($gray-l4);
}
}
.running-tasks-section {
display: none;
// type - error
.message-error {
border-top: 2px solid $error-color;
background: tint($error-color,95%);
.message-title {
color: $error-color;
}
.no-pending-tasks-message {
display: none;
p {
color: #a2a2a2;
font-style: italic;
}
.message-copy {
color: $base-font-color;
}
}
// type - confirmation
.message-confirmation {
border-top: 2px solid $confirm-color;
background: tint($confirm-color,95%);
.message-title {
color: $confirm-color;
}
.message-copy {
color: $base-font-color;
}
}
// type - error
.message-warning {
border-top: 2px solid $warning-color;
background: tint($warning-color,95%);
}
// grandfathered
display: none;
margin-top: ($baseline*1.5);
&.active-section {
display: block;
}
.basic-data {
padding: 6px;
}
.running-tasks-section {
display: none;
}
.no-pending-tasks-message {
display: none;
p {
color: #a2a2a2;
font-style: italic;
}
}
.section-title {
@include clearfix();
margin-bottom: ($baseline/2);
.value {
float: left;
}
.description {
@extend %t-title7;
float: right;
text-transform: none;
letter-spacing: 0;
text-align: right;
color: $gray;
}
}
}
// view - course info
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#course_info {
.course-errors-wrapper {
margin-top: 2em;
......@@ -301,6 +390,8 @@ section.instructor-dashboard-content-2 {
}
}
// view - bulk email
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#send_email {
// form fields
.list-fields {
......@@ -325,18 +416,138 @@ section.instructor-dashboard-content-2 {
}
}
// view - membership
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#membership {
$half_width: $baseline * 20;
.membership-section {
margin-bottom: $baseline;
margin-bottom: ($baseline*1.5);
&:last-child {
margin-bottom: 0; // last child!
margin-bottom: 0;
}
}
// cohort management
.cohort-management {
}
.cohort-management-nav {
margin-bottom: $baseline;
.cohort-select {
width: 100%;
}
}
.cohort-management-group {
border: 1px solid $gray-l5;
}
.cohort-management-group-header {
border-bottom: ($baseline/10) solid $gray-l4;
background: $gray-l5;
padding: $baseline;
.group-header-title {
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
.title-value, .group-count {
display: inline-block;
vertical-align: middle;
}
.title-value {
@extend %t-title5;
@extend %t-weight4;
margin-right: ($baseline/4);
}
.group-count {
@extend %t-title7;
@extend %t-weight4;
}
}
}
.cohort-management-group-setup {
@include clearfix();
@extend %t-copy-sub1;
color: $gray-l2;
.setup-value {
float: left;
}
.setup-actions {
float: right;
}
}
.cohort-management-group-add {
padding: $baseline;
.message-title {
@extend %t-title7;
}
.form-title {
@extend %t-title6;
@extend %t-weight4;
margin-bottom: ($baseline/4);
}
.form-introduction {
@extend %t-copy-sub1;
margin-bottom: $baseline;
p {
color: $gray-l1;
}
}
.form-fields {
margin-bottom: $baseline;
.label, .input {
display: block;
}
.label {
@extend %t-title7;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
}
.cohort-management-group-add-students {
min-height: ($baseline*10);
width: 100%;
padding: ($baseline/2) ($baseline*0.75);
}
.form-submit {
@include idashbutton($blue);
margin-bottom: 0;
}
}
.cohort-management-supplemental {
@extend %t-copy-sub1;
margin-top: ($baseline/2);
.icon {
margin-right: ($baseline/4);
color: $gray-l1;
}
}
.batch-enrollment, .batch-beta-testers {
textarea {
margin-top: 0.2em;
......@@ -531,7 +742,8 @@ section.instructor-dashboard-content-2 {
}
}
// view - student admin
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#student_admin > {
.action-type-container{
margin-bottom: $baseline * 2;
......@@ -566,7 +778,8 @@ section.instructor-dashboard-content-2 {
}
}
// view - data download
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#data_download {
input {
// display: block;
......@@ -596,7 +809,8 @@ section.instructor-dashboard-content-2 {
}
}
// view - metrics
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#metrics {
.metrics-container, .metrics-header-container {
......
lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
......@@ -75,44 +75,44 @@
<script language="JavaScript" type="text/javascript"></script>
<section class="container">
<div class="instructor-dashboard-wrapper-2">
<section class="instructor-dashboard-content-2" id="instructor-dashboard-content">
<div class="wrap-instructor-info studio-view">
%if studio_url:
<a class="instructor-info-action" href="${studio_url}">${_("View Course in Studio")}</a>
%endif
%if settings.FEATURES.get('ENABLE_INSTRUCTOR_LEGACY_DASHBOARD'):
<a class="instructor-info-action" href="${ old_dashboard_url }"> ${_("Revert to Legacy Dashboard")} </a>
%endif
</div>
<div class="instructor-dashboard-wrapper-2">
<section class="instructor-dashboard-content-2" id="instructor-dashboard-content">
<div class="wrap-instructor-info studio-view">
%if studio_url:
<a class="instructor-info-action" href="${studio_url}">${_("View Course in Studio")}</a>
%endif
%if settings.FEATURES.get('ENABLE_INSTRUCTOR_LEGACY_DASHBOARD'):
<a class="instructor-info-action" href="${ old_dashboard_url }"> ${_("Revert to Legacy Dashboard")} </a>
%endif
</div>
<h1>${_("Instructor Dashboard")}</h1>
<h1>${_("Instructor Dashboard")}</h1>
%if analytics_dashboard_message:
<div class="wrapper-msg urgency-low is-shown">
<p>${analytics_dashboard_message}</p>
</div>
%endif
%if analytics_dashboard_message:
<div class="wrapper-msg urgency-low is-shown">
<p>${analytics_dashboard_message}</p>
</div>
%endif
## links which are tied to idash-sections below.
## the links are activated and handled in instructor_dashboard.coffee
## when the javascript loads, it clicks on the first section
<ul class="instructor-nav">
% for section_data in sections:
## This is necessary so we don't scrape 'section_display_name' as a string.
<% dname = section_data['section_display_name'] %>
<li class="nav-item"><a href="" data-section="${ section_data['section_key'] }">${_(dname)}</a></li>
% endfor
</ul>
## links which are tied to idash-sections below.
## the links are activated and handled in instructor_dashboard.coffee
## when the javascript loads, it clicks on the first section
<ul class="instructor-nav">
% for section_data in sections:
## This is necessary so we don't scrape 'section_display_name' as a string.
<% dname = section_data['section_display_name'] %>
<li class="nav-item"><a href="" data-section="${ section_data['section_key'] }">${_(dname)}</a></li>
% endfor
</ul>
## each section corresponds to a section_data sub-dictionary provided by the view
## to keep this short, sections can be pulled out into their own files
## each section corresponds to a section_data sub-dictionary provided by the view
## to keep this short, sections can be pulled out into their own files
% for section_data in sections:
<section id="${ section_data['section_key'] }" class="idash-section">
<%include file="${ section_data['section_key'] }.html" args="section_data=section_data" />
% for section_data in sections:
<section id="${ section_data['section_key'] }" class="idash-section">
<%include file="${ section_data['section_key'] }.html" args="section_data=section_data" />
</section>
% endfor
</section>
% endfor
</section>
</div>
</div>
</section>
lms/templates/instructor/instructor_dashboard_2/membership.html
......@@ -26,7 +26,7 @@
</div>
</script>
<section class="batch-enrollment membership-section">
<div class="batch-enrollment membership-section">
<h2> ${_("Batch Enrollment")} </h2>
<p>
<label for="student-ids">
......@@ -66,10 +66,12 @@
</div>
<div class="request-response"></div>
<div class="request-response-error"></div>
</section>
</div>
<hr class="divider" />
%if section_data['access']['instructor']:
<section class="batch-beta-testers membership-section">
<div class="batch-beta-testers membership-section">
<h2> ${_("Batch Beta Tester Addition")} </h2>
<p>
<label for="student-ids-for-beta">
......@@ -109,10 +111,12 @@
<div class="request-response"></div>
<div class="request-response-error"></div>
</section>
</div>
<hr class="divider" />
%endif
<section class="member-lists-management membership-section">
<div class="member-lists-management membership-section">
## Translators: an "Administration List" is a list, such as Course Staff, that users can be added to.
<h2> ${_("Administration List Management")} </h2>
......@@ -213,7 +217,7 @@
></div>
%endif
</section>
</div>
%if course.is_cohorted:
<hr class="divider" />
......
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