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

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" />