Skip to content

E
edx-platform
Commit 3aa842db by Brian Talbot Committed by cahrens
Options

Adding static rendering for cohort group creation UI 

* adding styling/markup for "add new group" controls, messages, and form
* small FED and UI changes to overall cohort management UI
parent b4c826e7
Showing with 224 additions and 37 deletions
lms/static/sass/course/instructor/_instructor_2.scss
......@@ -6,6 +6,10 @@
padding: 8px 17px 8px 17px;
font-size: em(13);
line-height: 1.3em;
.icon {
margin-right: ($baseline/5);
}
}
.instructor-dashboard-wrapper-2 {
......@@ -419,7 +423,6 @@ section.instructor-dashboard-content-2 {
// view - membership
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#membership {
$half_width: $baseline * 20;
.membership-section {
margin-bottom: ($baseline*1.5);
......@@ -430,18 +433,109 @@ section.instructor-dashboard-content-2 {
}
// cohort management
.cohort-management {
%cohort-management-form {
.form-fields {
.label, .input, .tip {
display: block;
}
.label {
@extend %t-title7;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
.tip {
@extend %t-copy-sub1;
margin-top: ($baseline/4);
color: $gray-l3;
}
.field-text {
// needed to reset poor input styling
input[type="text"] {
height: auto;
}
.input {
width: 100%;
padding: ($baseline/2) ($baseline*0.75);
}
}
}
.form-submit, .form-cancel {
display: inline-block;
vertical-align: middle;
}
.form-submit {
@include idashbutton($blue);
margin-right: ($baseline/2);
margin-bottom: 0;
}
.form-cancel {
@extend %t-copy-sub1;
}
}
.cohort-management-nav {
@include clearfix();
margin-bottom: $baseline;
.cohort-management-nav-form {
width: 60%;
float: left;
}
.cohort-select {
width: 100%;
margin-top: ($baseline/4);
}
.action-create {
@include idashbutton($blue);
float: right;
text-align: right;
}
}
.cohort-management {
// specific message actions
.message .action-create {
@include idashbutton($blue);
}
}
// create or edit cohort group
.cohort-management-create, .cohort-management-edit {
@extend %cohort-management-form;
border: 1px solid $gray-l5;
margin-bottom: $baseline;
.form-title {
@extend %t-title5;
@extend %t-weight4;
border-bottom: ($baseline/10) solid $gray-l4;
background: $gray-l5;
padding: $baseline;
}
.form-fields {
padding: $baseline;
}
.form-actions {
padding: 0 $baseline $baseline $baseline;
}
}
// cohort group
.cohort-management-group {
border: 1px solid $gray-l5;
}
......@@ -455,9 +549,17 @@ section.instructor-dashboard-content-2 {
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
&:hover, &:active, &:focus {
.action-edit-name {
opacity: 1.0;
pointer-events: auto;
}
}
}
.title-value, .group-count {
.title-value, .group-count, .action-edit {
display: inline-block;
vertical-align: middle;
}
......@@ -472,6 +574,18 @@ section.instructor-dashboard-content-2 {
@extend %t-title7;
@extend %t-weight4;
}
.action-edit-name {
@include idashbutton($gray-l3);
@include transition(opacity 0.25s ease-in-out);
@include font-size(14);
@include line-height(14);
margin-left: ($baseline/2);
margin-bottom: 0;
opacity: 0.0;
pointer-events: none;
padding: ($baseline/4) ($baseline/2);
}
}
.cohort-management-group-setup {
......@@ -489,7 +603,8 @@ section.instructor-dashboard-content-2 {
}
.cohort-management-group-add {
padding: $baseline;
@extend %cohort-management-form;
padding: $baseline $baseline 0 $baseline;
.message-title {
@extend %t-title7;
......@@ -511,17 +626,11 @@ section.instructor-dashboard-content-2 {
}
.form-fields {
margin-bottom: $baseline;
.label, .input {
display: block;
}
padding: $baseline 0;
}
.label {
@extend %t-title7;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
.form-actions {
padding: 0 0 $baseline 0;
}
.cohort-management-group-add-students {
......@@ -529,11 +638,6 @@ section.instructor-dashboard-content-2 {
width: 100%;
padding: ($baseline/2) ($baseline*0.75);
}
.form-submit {
@include idashbutton($blue);
margin-bottom: 0;
}
}
......@@ -548,6 +652,7 @@ section.instructor-dashboard-content-2 {
}
.batch-enrollment, .batch-beta-testers {
textarea {
margin-top: 0.2em;
......
lms/templates/ux/reference/instructor_dashboard/membership.html
......@@ -242,21 +242,30 @@
<div class="cohort-management-nav">
<form action="" method="post" name="" id="cohort-management-nav-form" class="cohort-management-nav-form">
<div class="cohort-management-nav-form-select field field-select">
<label for="cohort-select" class="label sr">Select a cohort to manage</label>
<select class="input cohort-select" name="cohort-select" id="cohort-select">
<option value="cohort-name-1">Cohort Name is Placed Here and Should Accommodate Almost Everything (12,546)</option>
<option value="cohort-name-2" selected>Cras mattis consectetur purus sit amet fermentum (8,546)</option>
<option value="cohort-name-3">Donec id elit non mi porta gravida at eget metus. (4)
</option>
<option value="cohort-name-4">Donec id elit non mi porta gravida at eget metus. (4)
</option>
</select>
<div class="form-fields">
<div class="cohort-management-nav-form-select field field-select">
<label for="cohort-select" class="label sr">Select a cohort to manage</label>
<select class="input cohort-select" name="cohort-select" id="cohort-select">
<option value="cohort-name-1">Cohort Name is Placed Here and Should Accommodate Almost Everything (12,546)</option>
<option value="cohort-name-2" selected>Cras mattis consectetur purus sit amet fermentum (8,546)</option>
<option value="cohort-name-3">Donec id elit non mi porta gravida at eget metus. (4)
</option>
<option value="cohort-name-4">Donec id elit non mi porta gravida at eget metus. (4)
</option>
</select>
</div>
</div>
<button class="form-submit button action-primary action-view sr">View cohort group</button>
<div class="form-actions">
<button class="form-submit button action-primary action-view sr">View cohort group</button>
</div>
</form>
<a href="" class="action-primary action-create">
<i class="icon-plus"></i>
Add Cohort Group
</a>
</div>
<!-- message - error - no groups -->
......@@ -268,7 +277,10 @@
</div>
<div class="message-actions">
<a href="" class="action-primary action-review">Revise Configuration in Studio</a>
<button class="action-primary action-create">
<i class="icon icon-plus"></i>
Add a Cohort Group
</button>
</div>
</div>
......@@ -285,12 +297,77 @@
</div>
</div>
<!-- adding new group -->
<div class="cohort-management-create">
<form action="" method="post" name="" id="cohort-management-create-form" class="cohort-management-create-form">
<h3 class="form-title">Add a New Cohort Group</h3>
<div class="form-fields">
<div class="cohort-management-create-form-name field field-text">
<label for="cohort-create-name" class="label">
New Cohort Name *
<span class="sr">(Required Field)</span>
</label>
<input type="text" name="cohort-create-name" value="" class=" input cohort-create-name" id="cohort-create-name" placeholder="Enter Your New Cohort Group's Name" required="required" />
<span class="tip">No special characters or symbols are allowed in group names</span>
</div>
</div>
<div class="form-actions">
<button class="form-submit button action-primary action-save">
<i class="icon icon-plus"></i>
Save
</button>
<a href="" class="form-cancel action-secondary action-cancel">Cancel</a>
</div>
</form>
</div>
<!-- editing group -->
<div class="cohort-management-edit">
<form action="" method="post" name="" id="cohort-management-edit-form" class="cohort-management-edit-form">
<h3 class="form-title">Editing "Cohort Group's Name"</h3>
<div class="form-fields">
<div class="cohort-management-edit-form-name field field-text">
<label for="cohort-create-name" class="label">
Cohort Name *
<span class="sr">(Required Field)</span>
</label>
<input type="text" name="cohort-edit-name" value="" class=" input cohort-edit-name" id="cohort-edit-name" placeholder="Enter Your Cohort Group's Name" required="required" />
<span class="tip">No special characters or symbols are allowed in group names</span>
</div>
</div>
<div class="form-actions">
<button class="form-submit button action-primary action-save">
<i class="icon icon-plus"></i>
Save
</button>
<a href="" class="form-cancel action-secondary action-cancel">Cancel</a>
</div>
</form>
</div>
<!-- create/edit cohort group messages -->
<div class="message message-confirmation is-shown">
<h3 class="message-title">New Cohort Name has been created. You may add students below.</h3>
</div>
<div class="message message-error is-shown">
<h3 class="message-title">Special characters are not allowed in cohort group names</h3>
</div>
<!-- individual group -->
<div class="cohort-management-group">
<header class="cohort-management-group-header">
<h3 class="group-header-title">
<span class="title-value">Cohort Name Can be Placed Here and Should Accommodate Almost Everything</span>
<span class="group-count">(contains 12,546 Students)</span>
<a href="" class="action-secondary action-edit action-edit-name">Edit</a>
</h3>
<div class="cohort-management-group-setup">
......@@ -350,15 +427,20 @@
<div class="form-fields">
<div class="field field-textarea is-required">
<label for="cohort-management-group-add-students" class="label">Student ID or Email Address of Students to be added (one per line or comma-separated)</label>
<label for="cohort-management-group-add-students" class="label">
Student ID or Email Address of Students to be added (one per line or comma-separated) *
<span class="sr">(Required Field)</span>
</label>
<textarea name="cohort-management-group-add-students" id="cohort-management-group-add-students" class="input cohort-management-group-add-students" placeholder="e.g. johndoe@example.com, JaneDoe, joeydoe@example.com"></textarea>
<textarea name="cohort-management-group-add-students" id="cohort-management-group-add-students" class="input cohort-management-group-add-students" placeholder="e.g. johndoe@example.com, JaneDoe, joeydoe@example.com" required="required"></textarea>
</div>
</div>
<button class="form-submit button action-primary action-view">
<i class="button-icon icon icon-plus"></i> Add Students
</button>
<div class="form-actions">
<button class="form-submit button action-primary action-add">
<i class="button-icon icon icon-plus"></i> Add Students
</button>
</div>
</form>
</div>
</div>
......
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