From 267e8c97f1dc0ba24a8e4fb795e90edf79bc82b3 Mon Sep 17 00:00:00 2001
From: Brian Talbot <hello.talbs@gmail.com>
Date: Mon, 8 Sep 2014 08:47:15 -0400
Subject: [PATCH] LMS: adds static cohort group management UI to the Instructor
Dashboard
---
.../sass/course/instructor/_instructor_2.scss | 258 ++++++++++++++++--
.../instructor_dashboard_2.html | 68 ++---
.../instructor_dashboard_2/membership.html | 16 +-
3 files changed, 280 insertions(+), 62 deletions(-)
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index bdd7fd462e6..b9e3837c2f0 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/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 {
diff --git a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
index 19f2a49ab88..fbc5ce4d362 100644
--- a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
+++ b/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>
diff --git a/lms/templates/instructor/instructor_dashboard_2/membership.html b/lms/templates/instructor/instructor_dashboard_2/membership.html
index a4cfa08e5b2..0726eac20f9 100644
--- a/lms/templates/instructor/instructor_dashboard_2/membership.html
+++ b/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" />
--
GitLab