Skip to content

E
edx-platform
Commit 9b85ac1f by Chris Committed by Andy Armstrong
Options

UX for associating content groups with cohorts in the instructor dashboard.

parent ce71a940
Showing with 398 additions and 50 deletions
lms/static/sass/base/_variables.scss
......@@ -38,7 +38,7 @@ $base-font-color: rgb(60,60,60);
$baseFontColor: rgb(60,60,60);
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff;
$very-light-text: rgb(255,255,255); // #ffffff
// ====================
......@@ -145,58 +145,58 @@ $dark-gray: rgb(51, 51, 51);
$border-color: rgb(200, 200, 200);
$sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
$light-gray: #ddd;
$light-gray: rgb(221,221,221); // #dddddd
// used by descriptor css
$lightGrey: #edf1f5;
$darkGrey: #8891a1;
$lightGrey: rgb(237,241,245); // #edf1f5
$darkGrey: rgb(136,145,161); // #8891a1
$lightGrey1: $gray-l3;
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d4: shade($blue,80%);
// edx.org marketing site variables
$m-gray: #8A8C8F;
$m-gray-l1: #97999B;
$m-gray-l2: #A4A6A8;
$m-gray-l3: #B1B2B4;
$m-gray-l4: #F5F5F5;
$m-gray-d1: #7D7F83;
$m-gray-d2: #707276;
$m-gray-d3: #646668;
$m-gray-d4: #050505;
$m-gray: rgb(138,140,143); // #8A8C8F
$m-gray-l1: rgb(151,153,155); // #97999B
$m-gray-l2: rgb(164,166,168); // #A4A6A8
$m-gray-l3: rgb(177,178,180); // #B1B2B4
$m-gray-l4: rgb(245,245,245); // #F5F5F5
$m-gray-d1: rgb(125,127,131); // #7D7F83
$m-gray-d2: rgb(112,114,118); // #707276
$m-gray-d3: rgb(100,102,104); // #646668
$m-gray-d4: rgb(5,5,5); // #050505
$m-gray-t0: rgba($m-gray,0.125);
$m-gray-t1: rgba($m-gray,0.25);
$m-gray-t2: rgba($m-gray,0.50);
$m-gray-t3: rgba($m-gray,0.75);
$m-blue: #1AA1DE;
$m-blue-l1: #2BACE6;
$m-blue-l2: #42B5E9;
$m-blue-l3: #59BEEC;
$m-blue: rgb(26,161,222); // #1AA1DE
$m-blue-l1: rgb(43,172,230); // #2BACE6
$m-blue-l2: rgb(66,181,233); // #42B5E9
$m-blue-l3: rgb(89,190,236); // #59BEEC
$m-blue-l4: tint($m-blue,90%);
$m-blue-l5: tint($m-blue,95%);
$m-blue-l6: #4bb4fb;
$m-blue-d1: #1790C7;
$m-blue-d2: #1580B0;
$m-blue-d3: #126F9A;
$m-blue-d4: #0A4A67;
$m-blue-d5: #009EE7;
$m-blue-d1: rgb(23,144,199); // #1790C7
$m-blue-d2: rgb(21,128,176); // #1580B0
$m-blue-d3: rgb(18,111,154); // #126F9A
$m-blue-d4: rgb(10,74,103); // #0A4A67
$m-blue-d5: rgb(0,158,231); // #009EE7
$m-blue-d6: #256A97;
$m-blue-t0: rgba($m-blue,0.125);
$m-blue-t1: rgba($m-blue,0.25);
$m-blue-t2: rgba($m-blue,0.50);
$m-blue-t3: rgba($m-blue,0.75);
$m-pink: #B52A67;
$m-pink-l1: #CA2F73;
$m-pink-l2: #D33F80;
$m-pink-l3: #D7548E;
$m-pink: rgb(181,42,103); // #B52A67
$m-pink-l1: rgb(202,47,115); //#CA2F73
$m-pink-l2: rgb(211,63,128); //#D33F80
$m-pink-l3: rgb(215,84,142); //#D7548E
$m-pink-l4: tint($m-pink,75%);
$m-pink-l5: tint($m-pink,85%);
$m-pink-d1: #A0255B;
$m-pink-d2: #8C204F;
$m-pink-d3: #771C44;
$m-pink-d1: rgb(160,37,91); // #A0255B
$m-pink-d2: rgb(140,32,79); // #8C204F
$m-pink-d3: rgb(119,28,68); // #771C44
$m-green: rgb(0, 136, 1);
$m-green-s1: rgb(96, 188, 97);
......@@ -238,16 +238,16 @@ $body-bg: rgb(250,250,250);
$container-bg: $white;
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
$header-bg: $white;
$courseware-header-image: linear-gradient(top, #fff, #eee);
$courseware-header-image: linear-gradient(top, rgb(255,255,255), rgb(238,238,238));
$courseware-header-bg: transparent;
$footer-bg: $white;
$courseware-footer-border: none;
$courseware-footer-shadow: none;
$courseware-footer-margin: 0;
$courseware-border-bottom-color: #44a2de;
$courseware-button-border-color: #e6e6e6;
$courseware-hover-color: #333435;
$courseware-navigation-color: #009ee7;
$courseware-footer-margin: 0px;
$courseware-border-bottom-color: rgb(68,162,222); // #44a2de
$courseware-button-border-color: rgb(230,230,230); // #e6e6e6
$courseware-hover-color: rgb(51,52,53); // #333435
$courseware-navigation-color: rgb(0,158,231); // #009ee7
// ====================
......@@ -277,7 +277,7 @@ $audit-color-lvl2: tint($audit-color-lvl1, 33%);
// ====================
// ACTIONS: general
$button-bg-image: linear-gradient(#fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-image: linear-gradient(rgb(255,255,255) 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%);
$button-bg-color: transparent;
$button-bg-hover-color: $white;
......@@ -361,6 +361,7 @@ $dashboard-course-cover-border: $light-gray;
// MISC: course assets
$content-wrapper-bg: $white;
$course-bg-color: #f2f2f2;
$course-bg-image: url(../images/bg-texture.png);
$account-content-wrapper-bg: shade($body-bg, 2%);
$course-profile-bg: rgb(245,245,245);
$course-header-bg: rgba(255,255,255, 0.93);
......@@ -384,7 +385,7 @@ $link-color-d1: $m-blue-d2;
$link-hover: $pink;
$site-status-color: $pink;
$button-color: $blue;
$button-archive-color: #eee;
$button-archive-color: rgb(238,238,238); // #eeeeee
// MISC: shadow, form, modal
$shadow-color: $blue;
......@@ -394,8 +395,8 @@ $modal-bg-color: rgb(245,245,245);
// MISC: sidebar
$sidebar-chapter-bg-top: rgba(255, 255, 255, .6);
$sidebar-chapter-bg-bottom: rgba(255, 255, 255, 0);
$sidebar-chapter-bg: #eee;
$sidebar-active-image: linear-gradient(top, #e6e6e6, #d6d6d6);
$sidebar-chapter-bg: rgb(238,238,238); // #eeeeee
$sidebar-active-image: linear-gradient(top, rgb(230,230,230), rgb(214,214,214));
// TOP HEADER IMAGE MARGIN
$header_image_margin: -69px;
......@@ -438,16 +439,15 @@ $header-sans-serif: 'Open Sans', Arial, Helvetica, sans-serif;
$msg-bg: $action-primary-bg;
// New Shopping Cart
$dark-gray1: #4a4a4a;
$light-gray1: #f2f2f2;
$light-gray2: #ababab;
$dark-gray2: #979797;
$blue1: #4A90E2;
$blue2: #00A1E5;
$green1: #61A12E;
$red1: #D0021B;
$dark-gray1: rgb(74,74,74); // #
$light-gray1: rgb(242,242,242); // #f2f2f2
$light-gray2: rgb(171,171,171); // #ababab
$light-gray3: rgb(249,249,249); // #f9f9f9
$dark-gray2: rgb(151,151,151); // #979797
$blue1: rgb(74,144,226); // #4A90E2
$blue2: rgb(0,161,229); // #00A1E5
$green1: rgb(97,161,46); // #61A12E
$red1: rgb(208,2,27); // #D0021B
// +case: search/result highlight
// --------------------
......
lms/static/sass/course/instructor/_cohort-management.scss 0 → 100644
.msg {
&.inline {
@extend %t-copy-sub2;
display: inline-block;
margin: 0 0 0 $baseline;
padding: 0;
}
&.error {
@extend %t-copy-sub2;
color: $error-red;
}
}
.cohort-management {
.has-option-unavailable { // Given to <selects> that have some options that are unavailable
.option-unavailable { // Allows granular styling (i.e., red) for those unavailable options
background: $red-l5;
color: $error-red;
}
}
.has-other { // Given to groups which have an 'other' input that appears when needed
display: inline-block;
label {
display: inline-block;
}
.input-group-other {
display: none;
&.is-visible {
display: inline;
position: relative;
overflow: auto;
width: 100%;
height: auto;
margin: 0 0 0 $baseline;
padding: inherit;
border: inherit;
clip: auto;
}
}
}
.cohort-management-nav {
margin-bottom: $baseline;
.action-create {
margin-top: $baseline;
}
}
.cohort-management-settings {
@include clearfix();
background: $gray-l5;
.group-header-title {
padding: $baseline;
margin-bottom: 0;
border-bottom: 1px solid $gray-l3;
text-transform: none;
letter-spacing: normal;
}
.cohort-management-group-setup {
padding: $baseline;
.cohort-management-group-text {
display: inline-block;
width: flex-grid(9);
}
.cohort-management-group-actions {
display: inline-block;
width: flex-grid(3);
vertical-align: top;
.float-right {
float: right;
}
}
}
.cohort-management-details {
border-top: ($baseline/5) solid $gray-l4;
background: $white;
.cohort-details-name {
@extend %t-action1;
display: block;
width: 100%;
padding: ($baseline/2);
margin-bottom: ($baseline*2);
}
.cohort-section-header {
margin-top: ($baseline*1.5);
padding: $baseline 0 ($baseline/2) 0;
}
.cohort-section-header > .form-fields {
padding-bottom: $baseline;
}
}
}
.form-actions:last-child {
margin-top: $baseline;
.action-primary {
@include idashbutton($blue);
padding: 7px $baseline;
text-shadow: none;
}
}
.wrapper-tabs { // This applies to the tab-like interface that toggles between the student management and the group settings
@extend %ui-no-list;
@extend %ui-depth1;
position: relative;
top: ($baseline/5);
padding: 0 $baseline;
.tab {
position: relative;
display: inline-block;
a {
display: inline-block;
padding: $baseline;
}
&.is-selected { // Active or selected tabs (<li>) get this class. Also useful for aria stuff if ever implemented in the future.
a {
padding-bottom: ($baseline+($baseline/5));
border-style: solid;
border-width: ($baseline/5) ($baseline/5) 0 ($baseline/5);
border-color: $gray-l4;
background: $white;
color: inherit;
cursor: default;
}
}
}
}
}
\ No newline at end of file
lms/static/sass/course/instructor/_instructor_2.scss
......@@ -426,7 +426,6 @@ section.instructor-dashboard-content-2 {
}
// view - membership
// --------------------
.instructor-dashboard-wrapper-2 section.idash-section#membership {
.membership-section {
......@@ -1772,3 +1771,5 @@ input[name="subject"] {
left: 2em;
right: auto;
}
@import '_cohort-management';
\ No newline at end of file
lms/templates/ux/reference/instructor_dashboard/cohorts.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">Instructor Dashboard</%block>
<%block name="nav_skip">#instructor-dashboard-content</%block>
<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-vendor-tinymce-content'/>
<%static:css group='style-vendor-tinymce-skin'/>
<%static:css group='style-course'/>
<script type="text/javascript">
// This is a hack to get tinymce to work correctly in Firefox until the annotator tool is refactored to not include
// tinymce globally.
if (typeof window.Range.prototype === "undefined") {
window.Range.prototype = { };
}
</script>
<script type="text/javascript" src="${static.url('js/vendor/mustache.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.axislabels.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/jquery-jvectormap-1.1.1/jquery-jvectormap-1.1.1.min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/jquery-jvectormap-1.1.1/jquery-jvectormap-world-mill-en.js')}"></script>
<script type="text/javascript" src="${static.url('js/course_groups/cohorts.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/jquery.event.drag-2.2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/jquery.event.drop-2.2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/slick.core.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/slick.grid.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/tinymce/js/tinymce/tinymce.full.min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/tinymce/js/tinymce/jquery.tinymce.min.js')}"></script>
<link type="text/css" href="${static.url('css/vendor/slickgrid/smoothness/jquery-ui-1.8.16.custom.css')}" rel="stylesheet">
<link type="text/css" href="${static.url('css/vendor/slickgrid/slick.grid.css')}" rel="stylesheet">
<%static:js group='module-descriptor-js'/>
<%static:js group='instructor_dash'/>
</%block>
<section class="container">
<div class="instructor-dashboard-wrapper-2">
<section class="instructor-dashboard-content-2" id="instructor-dashboard-content">
<h1>Instructor Dashboard</h1>
<section class="idash-section active-section" id="membership">
<div class="cohort-management membership-section">
<h2 class="section-title">
<span class="value">Cohort Group Management</span>
<span class="description">Cohorts are such and such and are used for this and that to do all the things</span>
</h2>
<div class="cohort-management-nav">
<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">
<label for="cohort-select" class="label">Assign students to cohort groups manually</label>
<select class="input input-lg cohort-select" name="cohort-select" id="cohort-select">
<option>Select a cohort group</option>
<option value="cohort-name-1" selected="selected">Cohort Name is Placed Here and Should Accommodate Almost Everything (12,546)</option>
<option value="cohort-name-2">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>
</select>
</div>
</div>
</form>
<button type="button" class="action-primary action-create"><i class="icon-plus"></i> New Cohort Group</button>
</div>
<!-- Message: Warning -->
<div class="msg msg-warning">
<h3 class="message-title">You currently have no cohort groups configured</h3>
<div class="message-copy">
<p>Please complete your cohort group configuration by creating groups within Studio</p>
</div>
<div class="message-actions">
<button class="action-primary action-create"><i class="icon icon-plus"></i> Add a Cohort Group</button>
</div>
</div>
<!-- Message: Error -->
<div class="msg msg-error">
<h3 class="message-title">There's currently an error with your cohorts configuration within this course.</h3>
<div class="message-copy">
<p>Error output (if any and near-human legible/comprehendable can be displayed here)</p>
</div>
<div class="message-actions">
<a href="#" class="action-primary action-review">Review Configuration in Studio</a>
</div>
</div>
<!-- Managing cohorts -->
<section class="cohort-management-settings has-tabs">
<h2 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></h2>
<div class="cohort-management-group-setup">
<p class="cohort-management-group-text">Students are added to this group only when you provide their email addresses or usernames on this page.<br /><a href="#">What does this mean?</a></p>
<div class="cohort-management-group-actions">
<span class="float-right"><a href="#">Edit settings in Studio</a></a>
</div>
</div>
<ul class="wrapper-tabs">
<li class="tab"><a href="#">Manage Students in Cohort Groups</a></li>
<li class="tab is-selected"><a href="#">Cohort Group Settings</a></li>
</ul>
<div class="cohort-management-details">
<form action="" method="post" name="" id="cohort-management-details-form" class="cohort-management-details-form">
<h3 class="form-title sr">Cohort Group Details</h3>
<div class="form-fields">
<div class="cohort-management-details-name field field-text">
<h4 class="cohort-section-header no-top-margin">Cohort Group Name:</h4>
<label for="cohort-details-name" class="label sr">Cohort Group Name</label>
<input type="text" name="cohort-details-name" value="Cohort Name is Placed Here and Should Accommodate Almost Everything" class="input cohort-details-name" id="cohort-details-name" placeholder="Enter Your Cohort's Name" required />
</div>
</div>
<h4 class="cohort-section-header divider-lv2">Students in this cohort group are:</h4>
<div class="form-fields">
<div class="cohort-management-details-assignment field field-radio">
<label for="cohort-assign-random"><input type="radio" name="cohort-assignment" value="random" /> Randomly Assigned</label>
<label for="cohort-assign-manual"><input type="radio" name="cohort-assignment" value="menual" checked="checked" /> Manually Assigned</label>
</div>
</div>
<!-- When options are available but a deleted one is selected. -->
<h4 class="cohort-section-header divider-lv2">Is this cohort group associated with course-based content groups?</h4>
<div class="form-fields">
<div class="cohort-management-details-assn-course field field-radio">
<label for="cohort-assn-course-no"><input type="radio" name="cohort-assn-course" value="no" /> No</label>
<div class="input-group has-other">
<label for="cohort-assn-course-yes"><input type="radio" name="cohort-assn-course" value="yes" checked="checked" /> Yes</label>
<div class="input-group-other is-visible">
<label class="sr" for="cohort-group-assn">Choose a content group to associate</label>
<select name="cohort-group-assn" id="cohort-group-assn" class="input input-lg has-option-unavailable">
<optgroup label="Available content groups">
<option>Choose a content group to associate</option>
</optgroup>
<optgroup label="Deleted content groups">
<option class="option-unavailable" selected="selected">Some content group that's been deleted</option>
<option class="option-unavailable">Another deleted content group</option>
</optgroup>
</select>
<div class="msg error inline">
<p class="copy-error"><i class="icon icon-warning-sign"></i> The selected content group has been deleted, you may wish to reassign this cohort group.</p>
</div>
</div>
</div>
</div>
<!-- // -->
<!-- When no options are available. -->
<h4 class="cohort-section-header divider-lv2">Is this cohort group associated with course-based content groups?</h4>
<div class="form-fields">
<div class="cohort-management-details-assn-course field field-radio">
<label for="cohort-assn-course-no"><input type="radio" name="cohort-assn-course-2" value="no" /> No</label>
<div class="input-group has-other">
<label for="cohort-assn-course-yes"><input type="radio" name="cohort-assn-course-2" value="yes" checked="checked" /> Yes</label>
<div class="input-group-other is-visible">
<div class="msg error inline">
<p class="copy-error"><i class="icon icon-warning-sign"></i> You haven't configured any content groups yet. You need to create a content group before you can create assignments. <a href="#">Create a content group</a></p>
</div>
</div>
</div>
</div>
<!-- // -->
<div class="form-actions">
<button type="submit" class="form-submit action-primary">Save</button>
<button type="button" class="button-link action-tertiary">Cancel</button>
</div>
</div>
<div class="wrapper-cohort-supplemental">
<hr class="divider divider-lv1">
<a class="toggle-cohort-management-secondary" href="#cohort-management-file-upload">Assign students to cohort groups by uploading a CSV file</a>
<div class="cohort-management-file-upload csv-upload is-hidden" id="cohort-management-file-upload"></div>
<div class="cohort-management-supplemental">
<p class=""><i class="icon icon-info-sign"></i> To review student cohort group assignments or see the results of uploading a CSV file, download course profile information or cohort results on <a href="" class="link-cross-reference" data-section="data_download"> the Data Download page</a>.</p>
</div>
</div>
</section>
</div>
</section>
</section>
</div>
</section>
test_root/uploads/nonunique_store.txt 0 → 100755
copy
\ No newline at end of file
test_root/uploads/nonunique_store_keDQRg1.txt 0 → 100755
copy
\ No newline at end of file
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