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

2014-09-08 08:47:15 -04:00
parent f753a09fbd
commit 267e8c97f1
3 changed files with 282 additions and 64 deletions
--- 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);
+  }
+
+  .message-copy {
+    @extend %t-copy-sub1;
+  }
+
+  .message-actions {
+    margin-top: ($baseline/2);
+
+    .action-primary {
+      @include idashbutton($gray-l4);
+    }
+  }
+
+  // type - error
+  .message-error {
+    border-top: 2px solid $error-color;
+    background: tint($error-color,95%);
+
+    .message-title {
+      color: $error-color;
    }

-    .basic-data {
-      padding: 6px;
+    .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;
    }

-    .running-tasks-section {
-      display: none;
+    .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;
    }

-    .no-pending-tasks-message {
-      display: none;
-      p {
-        color: #a2a2a2;
-        font-style: italic;
-      }
+    .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 {
--- 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>
-
-  <h1>${_("Instructor Dashboard")}</h1>
-
-    %if analytics_dashboard_message:
-      <div class="wrapper-msg urgency-low is-shown">
-          <p>${analytics_dashboard_message}</p>
+  <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>
-    %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">
+    <h1>${_("Instructor Dashboard")}</h1>
+
+      %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>
+
+    ## 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:
-      ## 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
-
-  % 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 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>
--- 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" />