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 209 additions and 22 deletions
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
padding: 8px 17px 8px 17px; padding: 8px 17px 8px 17px;
font-size: em(13); font-size: em(13);
line-height: 1.3em; line-height: 1.3em;
.icon {
margin-right: ($baseline/5);
}
} }
.instructor-dashboard-wrapper-2 { .instructor-dashboard-wrapper-2 {
...@@ -419,7 +423,6 @@ section.instructor-dashboard-content-2 { ...@@ -419,7 +423,6 @@ section.instructor-dashboard-content-2 {
// view - membership // view - membership
// -------------------- // --------------------
.instructor-dashboard-wrapper-2 section.idash-section#membership { .instructor-dashboard-wrapper-2 section.idash-section#membership {
$half_width: $baseline * 20;
.membership-section { .membership-section {
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
...@@ -430,18 +433,109 @@ section.instructor-dashboard-content-2 { ...@@ -430,18 +433,109 @@ section.instructor-dashboard-content-2 {
} }
// cohort management // 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 { .cohort-management-nav {
@include clearfix();
margin-bottom: $baseline; margin-bottom: $baseline;
.cohort-management-nav-form {
width: 60%;
float: left;
}
.cohort-select { .cohort-select {
width: 100%; 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 { .cohort-management-group {
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
} }
...@@ -455,9 +549,17 @@ section.instructor-dashboard-content-2 { ...@@ -455,9 +549,17 @@ section.instructor-dashboard-content-2 {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2); 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; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
...@@ -472,6 +574,18 @@ section.instructor-dashboard-content-2 { ...@@ -472,6 +574,18 @@ section.instructor-dashboard-content-2 {
@extend %t-title7; @extend %t-title7;
@extend %t-weight4; @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 { .cohort-management-group-setup {
...@@ -489,7 +603,8 @@ section.instructor-dashboard-content-2 { ...@@ -489,7 +603,8 @@ section.instructor-dashboard-content-2 {
} }
.cohort-management-group-add { .cohort-management-group-add {
padding: $baseline; @extend %cohort-management-form;
padding: $baseline $baseline 0 $baseline;
.message-title { .message-title {
@extend %t-title7; @extend %t-title7;
...@@ -511,17 +626,11 @@ section.instructor-dashboard-content-2 { ...@@ -511,17 +626,11 @@ section.instructor-dashboard-content-2 {
} }
.form-fields { .form-fields {
margin-bottom: $baseline; padding: $baseline 0;
.label, .input {
display: block;
} }
.label { .form-actions {
@extend %t-title7; padding: 0 0 $baseline 0;
@extend %t-weight4;
margin-bottom: ($baseline/2);
}
} }
.cohort-management-group-add-students { .cohort-management-group-add-students {
...@@ -529,11 +638,6 @@ section.instructor-dashboard-content-2 { ...@@ -529,11 +638,6 @@ section.instructor-dashboard-content-2 {
width: 100%; width: 100%;
padding: ($baseline/2) ($baseline*0.75); padding: ($baseline/2) ($baseline*0.75);
} }
.form-submit {
@include idashbutton($blue);
margin-bottom: 0;
}
} }
...@@ -548,6 +652,7 @@ section.instructor-dashboard-content-2 { ...@@ -548,6 +652,7 @@ section.instructor-dashboard-content-2 {
} }
.batch-enrollment, .batch-beta-testers { .batch-enrollment, .batch-beta-testers {
textarea { textarea {
margin-top: 0.2em; margin-top: 0.2em;
......
lms/templates/ux/reference/instructor_dashboard/membership.html
...@@ -242,6 +242,7 @@ ...@@ -242,6 +242,7 @@
<div class="cohort-management-nav"> <div class="cohort-management-nav">
<form action="" method="post" name="" id="cohort-management-nav-form" class="cohort-management-nav-form"> <form action="" method="post" name="" id="cohort-management-nav-form" class="cohort-management-nav-form">
<div class="form-fields">
<div class="cohort-management-nav-form-select field field-select"> <div class="cohort-management-nav-form-select field field-select">
<label for="cohort-select" class="label sr">Select a cohort to manage</label> <label for="cohort-select" class="label sr">Select a cohort to manage</label>
...@@ -254,9 +255,17 @@ ...@@ -254,9 +255,17 @@
</option> </option>
</select> </select>
</div> </div>
</div>
<div class="form-actions">
<button class="form-submit button action-primary action-view sr">View cohort group</button> <button class="form-submit button action-primary action-view sr">View cohort group</button>
</div>
</form> </form>
<a href="" class="action-primary action-create">
<i class="icon-plus"></i>
Add Cohort Group
</a>
</div> </div>
<!-- message - error - no groups --> <!-- message - error - no groups -->
...@@ -268,7 +277,10 @@ ...@@ -268,7 +277,10 @@
</div> </div>
<div class="message-actions"> <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>
</div> </div>
...@@ -285,12 +297,77 @@ ...@@ -285,12 +297,77 @@
</div> </div>
</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 --> <!-- individual group -->
<div class="cohort-management-group"> <div class="cohort-management-group">
<header class="cohort-management-group-header"> <header class="cohort-management-group-header">
<h3 class="group-header-title"> <h3 class="group-header-title">
<span class="title-value">Cohort Name Can be Placed Here and Should Accommodate Almost Everything</span> <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> <span class="group-count">(contains 12,546 Students)</span>
<a href="" class="action-secondary action-edit action-edit-name">Edit</a>
</h3> </h3>
<div class="cohort-management-group-setup"> <div class="cohort-management-group-setup">
...@@ -350,15 +427,20 @@ ...@@ -350,15 +427,20 @@
<div class="form-fields"> <div class="form-fields">
<div class="field field-textarea is-required"> <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>
</div> </div>
<button class="form-submit button action-primary action-view"> <div class="form-actions">
<button class="form-submit button action-primary action-add">
<i class="button-icon icon icon-plus"></i> Add Students <i class="button-icon icon icon-plus"></i> Add Students
</button> </button>
</div>
</form> </form>
</div> </div>
</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