Skip to content

E
edx-platform
Commit 54a8a4fc by Chris Rodriguez Committed by Andy Armstrong
Options

Addressing items in the latest PR; includes RTL-ifying all SCSS

parent 79cd3210
Showing with 158 additions and 532 deletions
lms/static/js/groups/views/cohorts.js
...@@ -13,8 +13,8 @@ var edx = edx || {}; ...@@ -13,8 +13,8 @@ var edx = edx || {};
events : { events : {
'change .cohort-select': 'onCohortSelected', 'change .cohort-select': 'onCohortSelected',
'click .action-create': 'showAddCohortForm', 'click .action-create': 'showAddCohortForm',
'click .cohort-management-add-modal .action-save': 'saveAddCohortForm', 'click .cohort-management-add-form .action-save': 'saveAddCohortForm',
'click .cohort-management-add-modal .action-cancel': 'cancelAddCohortForm', 'click .cohort-management-add-form .action-cancel': 'cancelAddCohortForm',
'click .link-cross-reference': 'showSection', 'click .link-cross-reference': 'showSection',
'click .toggle-cohort-management-secondary': 'showCsvUpload' 'click .toggle-cohort-management-secondary': 'showCsvUpload'
}, },
...@@ -148,7 +148,7 @@ var edx = edx || {}; ...@@ -148,7 +148,7 @@ var edx = edx || {};
context: this.context context: this.context
}); });
this.cohortFormView.render(); this.cohortFormView.render();
this.$('.cohort-management-add-modal').append(this.cohortFormView.$el); this.$('.cohort-management-add-form').append(this.cohortFormView.$el);
this.setCohortEditorVisibility(false); this.setCohortEditorVisibility(false);
}, },
......
lms/static/js/spec/groups/views/cohorts_spec.js
...@@ -87,7 +87,7 @@ define(['backbone', 'jquery', 'js/common_helpers/ajax_helpers', 'js/common_helpe ...@@ -87,7 +87,7 @@ define(['backbone', 'jquery', 'js/common_helpers/ajax_helpers', 'js/common_helpe
}; };
getAddModal = function() { getAddModal = function() {
return cohortsView.$('.cohort-management-add-modal'); return cohortsView.$('.cohort-management-add-form');
}; };
selectContentGroup = function(groupId, userPartitionId) { selectContentGroup = function(groupId, userPartitionId) {
......
lms/static/sass/course/instructor/_cohort-management.scss deleted 100644 → 0
.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;
.cohort-manage-group-header {
padding: 0;
border-bottom: 0;
.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,
.cohort-management-group-add {
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;
}
}
}
}
}
lms/static/sass/course/instructor/_instructor_2.scss
@mixin idashbutton ($color) { @mixin idashbutton ($color) {
@include button(simple, $color); @include button(simple, $color);
@extend .button-reset; @extend .button-reset;
margin-bottom: 1em; margin-bottom: 1em;
padding: 8px 17px 8px 17px; padding: 8px 17px;
font-size: em(13); font-size: em(13);
line-height: 1.3em; line-height: 1.3em;
...@@ -21,14 +20,14 @@ ...@@ -21,14 +20,14 @@
.olddash-button-wrapper { .olddash-button-wrapper {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 15px; @include right(15px);
@include font-size(16); @include font-size(16);
} }
.studio-edit-link{ .studio-edit-link{
position: absolute; position: absolute;
top: 40px; top: 40px;
right: 15px; @include right(15px);
@include font-size(16); @include font-size(16);
} }
...@@ -57,30 +56,29 @@ ...@@ -57,30 +56,29 @@
// TYPE: inline // TYPE: inline
.msg-inline { .msg-inline {
// @extend %t-copy-sub1;
display: inline-block; display: inline-block;
margin: 0 0 0 $baseline; @include margin-left($baseline);
padding: 0; padding: 0;
.icon, .icon,
.fa { .fa {
margin-right: ($baseline/2); @include margin-right($baseline/2);
} }
} }
// TYPE: warning // TYPE: warning
.msg-warning { .msg-warning {
border-top: 2px solid $warning-color;
background: tint($warning-color,95%);
display: none; display: none;
background: tint($warning-color,95%);
border-top: 2px solid $warning-color;
color: $warning-color; color: $warning-color;
} }
// TYPE: confirm // TYPE: confirm
.msg-confirm { .msg-confirm {
border-top: 2px solid $confirm-color;
background: tint($confirm-color,95%);
display: none; display: none;
background: tint($confirm-color,95%);
border-top: 2px solid $confirm-color;
color: $confirm-color; color: $confirm-color;
} }
...@@ -104,12 +102,14 @@ ...@@ -104,12 +102,14 @@
} }
.copy-error { .copy-error {
@include font-size(14);
color: $error-color; color: $error-color;
} }
.list-advice { .list-advice {
@extend %ui-no-list;
margin: $baseline 0; margin: $baseline 0;
padding: 0;
list-style: none;
.item { .item {
font-weight: 600; font-weight: 600;
...@@ -139,8 +139,8 @@ ...@@ -139,8 +139,8 @@
// ==================== // ====================
.instructor-dashboard-content-2 { .instructor-dashboard-content-2 {
@extend .content; @extend .content;
padding: 40px;
width: 100%; width: 100%;
padding: 40px;
.wrap-instructor-info { .wrap-instructor-info {
display: inline; display: inline;
...@@ -159,14 +159,10 @@ ...@@ -159,14 +159,10 @@
} }
.slickgrid { .slickgrid {
margin-left: 1px; @include margin-left(1px);
color:#333333; @include font-size(12px);
font-size:12px;
font-family: verdana,arial,sans-serif; font-family: verdana,arial,sans-serif;
color: #333333;
.slick-header-column {
// height: 100%
}
.slick-cell { .slick-cell {
border: 1px dotted silver; border: 1px dotted silver;
...@@ -179,25 +175,19 @@ ...@@ -179,25 +175,19 @@
h1 { h1 {
@extend .top-header; @extend .top-header;
display: inline-block; display: inline-block;
margin-bottom: ($baseline*.75);
padding-bottom: 0; padding-bottom: 0;
border-bottom: 0; border-bottom: 0;
margin-bottom: ($baseline*0.75);
} }
input[type="button"] { input[type="button"] {
@include idashbutton(#eee); @include idashbutton(#eee);
&.molly-guard {
// @include idashbutton($danger-red);
// @include idashbutton($black);
// border: 2px solid $danger-red;
}
} }
.instructor_dash_glob_info { .instructor_dash_glob_info {
position: absolute; position: absolute;
@include right(50px);
top: 46px; top: 46px;
right: 50px;
text-align: right; text-align: right;
} }
...@@ -229,11 +219,11 @@ ...@@ -229,11 +219,11 @@
// messages // messages
.message { .message {
display: block;
margin-top: $baseline; margin-top: $baseline;
margin-bottom: $baseline; margin-bottom: $baseline;
display: block;
border-radius: 1px;
padding: ($baseline*0.75) $baseline; padding: ($baseline*0.75) $baseline;
border-radius: 1px;
} }
.message-title { .message-title {
...@@ -322,15 +312,15 @@ ...@@ -322,15 +312,15 @@
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
.value { .value {
float: left; @include float(left);
} }
.description { .description {
@extend %t-title7; @extend %t-title7;
float: right; @include float(right);
@include text-align(right);
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
text-align: right;
color: $gray; color: $gray;
} }
} }
...@@ -368,15 +358,15 @@ ...@@ -368,15 +358,15 @@
width: 300px; width: 300px;
cursor: pointer; cursor: pointer;
div { div {
float:left; @include float(left);
} }
h2 { h2 {
float: left; @include float(left);
} }
.triangle { .triangle {
float: left; @include float(left);
width: 20px; width: 20px;
height: 20px; height: 20px;
background-image: url('/static/images/bullet-closed.png'); background-image: url('/static/images/bullet-closed.png');
...@@ -391,7 +381,7 @@ ...@@ -391,7 +381,7 @@
.course-error { .course-error {
margin-bottom: 1em; margin-bottom: 1em;
margin-left: 0.5em; @include margin-left(0.5em);
code { code {
&.course-error-first { &.course-error-first {
...@@ -426,8 +416,8 @@ ...@@ -426,8 +416,8 @@
.tip { .tip {
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: tint(rgb(127,127,127),50%);
@include font-size(12); @include font-size(12);
color: tint(rgb(127,127,127),50%);
} }
} }
} }
...@@ -450,11 +440,15 @@ ...@@ -450,11 +440,15 @@
.form-fields { .form-fields {
.label, .input, .tip { .label,
.form-label,
.input,
.tip {
display: block; display: block;
} }
.label { .label,
.form-label {
@extend %t-title7; @extend %t-title7;
@extend %t-weight4; @extend %t-weight4;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
...@@ -508,7 +502,7 @@ ...@@ -508,7 +502,7 @@
.cohort-management-nav-form { .cohort-management-nav-form {
width: 60%; width: 60%;
float: left; @include float(left);
} }
.cohort-select { .cohort-select {
...@@ -519,8 +513,8 @@ ...@@ -519,8 +513,8 @@
.action-create { .action-create {
@include idashbutton($blue); @include idashbutton($blue);
@extend %t-weight4; @extend %t-weight4;
float: right; @include float(right);
text-align: right; @include text-align(right);
text-shadow: none; text-shadow: none;
} }
...@@ -550,41 +544,35 @@ ...@@ -550,41 +544,35 @@
.cohort-management-settings, .cohort-management-settings,
.cohort-management-edit { .cohort-management-edit {
@extend %cohort-management-form; @extend %cohort-management-form;
border: 1px solid $gray-l5;
margin-bottom: $baseline; margin-bottom: $baseline;
.message {
margin-left: $baseline;
margin-right: $baseline;
}
.form-title { .form-title {
@extend %t-title5; @extend %t-title5;
@extend %t-weight4; @extend %t-weight4;
border-bottom: ($baseline/10) solid $gray-l4;
background: $gray-l5;
padding: $baseline; padding: $baseline;
background: $gray-l5;
border-bottom: ($baseline/10) solid $gray-l4;
} }
.form-field { .form-field {
padding: $baseline; // padding: $baseline;
} }
.form-actions { .form-actions {
padding: 0 $baseline $baseline $baseline; @include padding($baseline 0 $baseline 0);
} }
} }
// cohort group // cohort group
.cohort-management-group-header { .cohort-management-group-header {
padding: $baseline;
border-bottom: ($baseline/10) solid $gray-l4; border-bottom: ($baseline/10) solid $gray-l4;
background: $gray-l5; background: $gray-l5;
padding: $baseline;
.group-header-title { .group-header-title {
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2); padding-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l4;
&:hover, &:active, &:focus { &:hover, &:active, &:focus {
...@@ -603,7 +591,7 @@ ...@@ -603,7 +591,7 @@
.title-value { .title-value {
@extend %t-title5; @extend %t-title5;
@extend %t-weight4; @extend %t-weight4;
margin-right: ($baseline/4); @include margin-right($baseline/4);
} }
.group-count { .group-count {
...@@ -616,11 +604,11 @@ ...@@ -616,11 +604,11 @@
@include transition(opacity $tmg-f2 ease-in-out); @include transition(opacity $tmg-f2 ease-in-out);
@include font-size(14); @include font-size(14);
@include line-height(14); @include line-height(14);
margin-left: ($baseline/2); @include margin-left($baseline/2);
padding: ($baseline/4) ($baseline/2);
margin-bottom: 0; margin-bottom: 0;
opacity: 0.0; opacity: 0.0;
pointer-events: none; pointer-events: none;
padding: ($baseline/4) ($baseline/2);
} }
} }
...@@ -630,22 +618,21 @@ ...@@ -630,22 +618,21 @@
color: $gray-l2; color: $gray-l2;
.setup-value { .setup-value {
float: left; @include float(left);
@include margin-right(5%);
width: 70%; width: 70%;
margin-right: 5%;
} }
.setup-actions { .setup-actions {
float: right; @include float(right);
@include text-align(right);
width: 20%; width: 20%;
text-align: right;
} }
} }
.cohort-management-group-add { .cohort-management-group-add {
@extend %cohort-management-form; @extend %cohort-management-form;
border: 1px solid $gray-l5; border: 1px solid $gray-l5;
padding: $baseline $baseline 0 $baseline;
.message-title { .message-title {
@extend %t-title7; @extend %t-title7;
...@@ -655,9 +642,9 @@ ...@@ -655,9 +642,9 @@
@extend %t-title6; @extend %t-title6;
@extend %t-weight4; @extend %t-weight4;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
padding: 0;
border: none; border: none;
background: transparent; background: transparent;
padding: 0;
} }
.form-introduction { .form-introduction {
...@@ -731,7 +718,7 @@ ...@@ -731,7 +718,7 @@
.icon { .icon {
margin-right: ($baseline/4); @include margin-right($baseline/4);
color: $gray-l1; color: $gray-l1;
} }
} }
...@@ -762,8 +749,6 @@ ...@@ -762,8 +749,6 @@
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
line-height: 1.5em; line-height: 1.5em;
li {
}
} }
} }
} }
...@@ -773,7 +758,7 @@ ...@@ -773,7 +758,7 @@
} }
.enrollment_signup_button { .enrollment_signup_button {
margin-right: ($baseline/4); @include margin-right($baseline/4);
} }
// Custom File upload // Custom File upload
.customBrowseBtn { .customBrowseBtn {
...@@ -783,18 +768,18 @@ ...@@ -783,18 +768,18 @@
position:relative; position:relative;
overflow:hidden; overflow:hidden;
display: inline; display: inline;
margin-left: -5px; @include margin-left(-5px);
span.browse{ span.browse{
@include button(simple, $blue); @include button(simple, $blue);
@include margin-right($baseline);
padding: 6px ($baseline/2); padding: 6px ($baseline/2);
font-size: 12px; font-size: 12px;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
margin-right: ($baseline);
} }
input.file_field { input.file_field {
position:absolute; position:absolute;
@include right(0);
top:0; top:0;
right:0;
margin:0; margin:0;
padding:0; padding:0;
cursor:pointer; cursor:pointer;
...@@ -806,10 +791,10 @@ ...@@ -806,10 +791,10 @@
vertical-align: middle; vertical-align: middle;
} }
input[disabled] { input[disabled] {
cursor: not-allowed; @include border-radius(4px 0 0 4px);
@include padding(6px 6px 5px);
border: 1px solid $lightGrey1; border: 1px solid $lightGrey1;
border-radius: 4px 0 0 4px; cursor: not-allowed;
padding: 6px 6px 5px;
} }
} }
} }
...@@ -827,7 +812,7 @@ ...@@ -827,7 +812,7 @@
display: none; display: none;
position: absolute; position: absolute;
top: 15px; top: 15px;
left: ($baseline*10); @include left($baseline*10);
padding: ($baseline/2); padding: ($baseline/2);
width: 50%; width: 50%;
background-color: $light-gray; background-color: $light-gray;
...@@ -837,11 +822,11 @@ ...@@ -837,11 +822,11 @@
display: block; display: block;
position: absolute; position: absolute;
top: 0; top: 0;
left: -15px; @include left(-15px);
@include border-right(8px solid $light-gray);
@include border-left(8px solid transparent);
border-top: 8px solid $light-gray; border-top: 8px solid $light-gray;
border-right: 8px solid $light-gray;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
} }
} }
} }
...@@ -872,8 +857,8 @@ ...@@ -872,8 +857,8 @@
.member-lists-management { .member-lists-management {
.wrapper-member-select { .wrapper-member-select {
background-color: $light-gray;
padding: ($baseline/2); padding: ($baseline/2);
background-color: $light-gray;
} }
.member-lists-selector { .member-lists-selector {
...@@ -906,7 +891,8 @@ ...@@ -906,7 +891,8 @@
@include font-size(16); @include font-size(16);
} }
.label { .label,
.form-label {
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $lighter-base-font-color; color: $lighter-base-font-color;
} }
...@@ -938,10 +924,10 @@ ...@@ -938,10 +924,10 @@
td { td {
@extend %t-copy-sub1; @extend %t-copy-sub1;
vertical-align: middle; vertical-align: middle;
word-wrap: break-word;
padding: ($baseline/2) ($baseline/4); padding: ($baseline/2) ($baseline/4);
border-left: 1px solid $light-gray; @include border-left(1px solid $light-gray);
border-right: 1px solid $light-gray; @include border-right(1px solid $light-gray);
word-wrap: break-word;
} }
} }
...@@ -976,12 +962,6 @@ ...@@ -976,12 +962,6 @@
} }
} }
/*
* Begin additional/override styles for cohort management.
* Placed for merge, but will need to be cleaned up and
* refactored in this stylesheet.
*/
.has-other-input-text { // Given to groups which have an 'other' input that appears when needed .has-other-input-text { // Given to groups which have an 'other' input that appears when needed
display: inline-block; display: inline-block;
...@@ -995,7 +975,7 @@ ...@@ -995,7 +975,7 @@
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0 0 0 $baseline; margin: 0;
padding: inherit; padding: inherit;
border: inherit; border: inherit;
clip: auto; clip: auto;
...@@ -1023,8 +1003,8 @@ ...@@ -1023,8 +1003,8 @@
border-bottom: 0; border-bottom: 0;
.group-header-title { .group-header-title {
padding: $baseline;
margin-bottom: 0; margin-bottom: 0;
padding: $baseline;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
...@@ -1042,14 +1022,14 @@ ...@@ -1042,14 +1022,14 @@
display: inline-block; display: inline-block;
width: flex-grid(3); width: flex-grid(3);
vertical-align: top; vertical-align: top;
text-align: right; @include text-align(right);
} }
} }
} }
.cohort-management-details, .cohort-management-details,
.cohort-management-group-add { .cohort-management-group-add {
border-top: ($baseline/5) solid $gray-l4; border-top: 1px solid $gray-l4;
background: $white; background: $white;
.cohort-management-settings { .cohort-management-settings {
...@@ -1068,7 +1048,7 @@ ...@@ -1068,7 +1048,7 @@
.cohort-section-header { .cohort-section-header {
margin-top: ($baseline*1.5); margin-top: ($baseline*1.5);
padding: $baseline 0 ($baseline/2) 0; @include padding($baseline 0 ($baseline/2) 0);
} }
.cohort-section-header > .form-field { .cohort-section-header > .form-field {
...@@ -1081,7 +1061,7 @@ ...@@ -1081,7 +1061,7 @@
@extend %ui-no-list; @extend %ui-no-list;
@extend %ui-depth1; @extend %ui-depth1;
position: relative; position: relative;
top: (($baseline/5)); top: 1px;
padding: 0 $baseline; padding: 0 $baseline;
.tab { .tab {
...@@ -1091,6 +1071,7 @@ ...@@ -1091,6 +1071,7 @@
a { a {
display: inline-block; display: inline-block;
padding: ($baseline - 5); padding: ($baseline - 5);
// These transitions null out previously/globally set transitions
-webkit-transition: none; -webkit-transition: none;
-moz-transition: none; -moz-transition: none;
-ms-transition: none; -ms-transition: none;
...@@ -1103,7 +1084,7 @@ ...@@ -1103,7 +1084,7 @@
a { a {
padding-bottom: ($baseline - 5); padding-bottom: ($baseline - 5);
border-style: solid; border-style: solid;
border-width: ($baseline/5) ($baseline/5) 0 ($baseline/5); @include border-width(1px 1px 0 1px);
border-color: $gray-l4; border-color: $gray-l4;
background: $white; background: $white;
color: inherit; color: inherit;
...@@ -1112,11 +1093,12 @@ ...@@ -1112,11 +1093,12 @@
} }
} }
} }
.tab-content {
@include padding($baseline $baseline 0 $baseline);
border: 1px solid $gray-l5;
}
} }
/*
* End of additions/overrides
* Don't forget to refactor.
*/
// view - student admin // view - student admin
// -------------------- // --------------------
...@@ -1129,28 +1111,14 @@ ...@@ -1129,28 +1111,14 @@
margin-top: 0.7em; margin-top: 0.7em;
} }
// .task-history-single-table { .slickgrid
// max-height: 500px;
// } }
// .running-tasks-table { .slickgrid {
// max-height: 500px;
// } }
.task-history-all-table { .task-history-all-table {
margin-top: 1em; margin-top: 1em;
// height: 300px;
// overflow-y: scroll
} }
.task-history-single-table { .task-history-single-table {
margin-top: 1em; margin-top: 1em;
// height: 300px;
// overflow-y: scroll
} }
.running-tasks-table { .running-tasks-table {
margin-top: 1em; margin-top: 1em;
// height: 500px;
// overflow-y: scroll
} }
} }
...@@ -1158,7 +1126,6 @@ ...@@ -1158,7 +1126,6 @@
// -------------------- // --------------------
.instructor-dashboard-wrapper-2 section.idash-section#data_download { .instructor-dashboard-wrapper-2 section.idash-section#data_download {
input { input {
// display: block;
margin-bottom: 1em; margin-bottom: 1em;
line-height: 1.3em; line-height: 1.3em;
} }
...@@ -1188,16 +1155,16 @@ ...@@ -1188,16 +1155,16 @@
.metrics-container, .metrics-header-container { .metrics-container, .metrics-header-container {
position: relative; position: relative;
width: 100%;
float: left;
clear: both; clear: both;
width: 100%;
@include float(left);
margin-top: 25px; margin-top: 25px;
.metrics-left, .metrics-left-header { .metrics-left, .metrics-left-header {
position: relative; position: relative;
width: 30%; width: 30%;
float: left; @include float(left);
margin-right: 2.5%; @include margin-right(2.5%);
svg { svg {
width: 100%; width: 100%;
...@@ -1210,8 +1177,8 @@ ...@@ -1210,8 +1177,8 @@
.metrics-right, .metrics-right-header { .metrics-right, .metrics-right-header {
position: relative; position: relative;
width: 65%; width: 65%;
float: left; @include float(left);
margin-left: 2.5%; @include margin-left(2.5%);
margin-bottom: 25px; margin-bottom: 25px;
svg { svg {
...@@ -1231,18 +1198,18 @@ ...@@ -1231,18 +1198,18 @@
.metrics-tooltip { .metrics-tooltip {
width: 250px; width: 250px;
background-color: lightgray;
padding: 3px; padding: 3px;
background-color: lightgray;
} }
.metrics-overlay { .metrics-overlay {
position: absolute; position: absolute;
display: none;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(255,255,255, .75); background-color: rgba(255,255,255, .75);
display: none;
.metrics-overlay-content-wrapper { .metrics-overlay-content-wrapper {
position: relative; position: relative;
...@@ -1287,13 +1254,13 @@ ...@@ -1287,13 +1254,13 @@
.download-csv { .download-csv {
position: absolute; position: absolute;
display: none; display: none;
right: 2%; @include right(2%);
bottom: 2%; bottom: 2%;
} }
.close-button { .close-button {
position: absolute; position: absolute;
right: 1.5%; @include right(1.5%);
top: 2%; top: 2%;
font-size: 2em; font-size: 2em;
} }
...@@ -1324,9 +1291,7 @@ ...@@ -1324,9 +1291,7 @@
.profile-distribution-widget { .profile-distribution-widget {
margin-bottom: $baseline * 2; margin-bottom: ($baseline * 2);
.display-text {}
.display-graph .graph-placeholder { .display-graph .graph-placeholder {
width: 750px; width: 750px;
...@@ -1384,7 +1349,7 @@ input[name="subject"] { ...@@ -1384,7 +1349,7 @@ input[name="subject"] {
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
span{ span{
float: right; @include float(right);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
span{ span{
...@@ -1397,8 +1362,8 @@ input[name="subject"] { ...@@ -1397,8 +1362,8 @@ input[name="subject"] {
} }
} }
span.tip{ span.tip{
padding: 10px 15px;
display: block; display: block;
padding: 10px 15px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background: #f8f4ec; background: #f8f4ec;
...@@ -1408,14 +1373,14 @@ input[name="subject"] { ...@@ -1408,14 +1373,14 @@ input[name="subject"] {
@include button(simple, $blue); @include button(simple, $blue);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
float: right; @include float(right);
} }
} }
} }
#e-commerce{ #e-commerce{
input[name='list-order-sale-csv'] { input[name='list-order-sale-csv'] {
margin-right: 14px; @include margin-right(14px);
} }
input { input {
margin-bottom: 1em; margin-bottom: 1em;
...@@ -1444,14 +1409,13 @@ input[name="subject"] { ...@@ -1444,14 +1409,13 @@ input[name="subject"] {
margin-bottom: $baseline; margin-bottom: $baseline;
display: none; display: none;
} }
.content{ .content{
padding: 0 !important; padding: 0 !important;
} }
input[name="download_company_name"], input[name="download_company_name"],
input[name="active_company_name"], input[name="spent_company_name"] { input[name="active_company_name"], input[name="spent_company_name"] {
margin-right: 8px; @include margin-right(8px);
height: 36px; height: 36px;
width: 254px; width: 254px;
border-radius: 3px; border-radius: 3px;
...@@ -1545,35 +1509,35 @@ input[name="subject"] { ...@@ -1545,35 +1509,35 @@ input[name="subject"] {
line-height: normal; line-height: normal;
font-size: 14px; font-size: 14px;
span.old-price{ span.old-price{
left: -75px; top: -1px;
@include left(-75px);
position: relative; position: relative;
text-decoration: line-through; text-decoration: line-through;
color: red; color: red;
font-size: 12px; font-size: 12px;
top: -1px;
} }
} }
td:nth-child(5),td:first-child{ td:nth-child(5),td:first-child{
padding-left: $baseline; @include padding-left($baseline);
} }
td:nth-child(2){ td:nth-child(2){
line-height: 22px; line-height: 22px;
padding-right: 0px; @include padding-right(0px);
word-wrap: break-word; word-wrap: break-word;
} }
td:nth-child(5){ td:nth-child(5){
padding-left: 0; @include padding-left(0);
text-align: center; text-align: center;
} }
td{ td{
a.edit-right{ a.edit-right{
margin-left: ($baseline*0.75); @include margin-left(15px);
} }
} }
} }
} }
section#registration_code_generation_modal { section#registration_code_generation_modal {
margin-left: -442px; @include margin-left(-442px);
width: 930px; width: 930px;
} }
// coupon edit and add modals // coupon edit and add modals
...@@ -1582,14 +1546,14 @@ input[name="subject"] { ...@@ -1582,14 +1546,14 @@ input[name="subject"] {
background: $white; background: $white;
} }
span.tip-text { span.tip-text {
font-size: 12px;
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
font-size: 12px;
color: #646464 color: #646464
} }
top:-95px !important; top:-95px !important;
width: 650px; width: 650px;
margin-left: -325px; @include margin-left(-325px);
border-radius: 2px; border-radius: 2px;
input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button, input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
input[type="button"]#set_course_button { input[type="button"]#set_course_button {
...@@ -1606,12 +1570,12 @@ input[name="subject"] { ...@@ -1606,12 +1570,12 @@ input[name="subject"] {
@extend .button-reset; @extend .button-reset;
} }
.modal-form-error { .modal-form-error {
@include margin($baseline 0 ($baseline/2) 0);
padding: $baseline;
box-shadow: inset 0 -1px 2px 0 #f3d9db; box-shadow: inset 0 -1px 2px 0 #f3d9db;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
margin: 20px 0 10px 0 !important;
padding: 20px;
border: none; border: none;
border-bottom: 3px solid #a0050e; border-bottom: 3px solid #a0050e;
background: #fbf2f3; background: #fbf2f3;
...@@ -1619,18 +1583,18 @@ input[name="subject"] { ...@@ -1619,18 +1583,18 @@ input[name="subject"] {
ol.list-input{ ol.list-input{
li{ li{
width: 278px; width: 278px;
float: left; @include float(left);
label.required:after { label.required:after {
content: "*"; content: "*";
margin-left: ($baseline/4); @include margin-left(5px);
} }
} }
li:nth-child(even){ li:nth-child(even){
margin-left: 30px !important; @include margin-left(30px !important);
} }
li:nth-child(3), li:nth-child(4){ li:nth-child(3), li:nth-child(4){
margin-left: 0px !important;
width: 100%; width: 100%;
@include margin-left(0px !important);
} }
li:nth-child(3) { li:nth-child(3) {
margin-bottom: 0px !important; margin-bottom: 0px !important;
...@@ -1645,10 +1609,10 @@ input[name="subject"] { ...@@ -1645,10 +1609,10 @@ input[name="subject"] {
form#generate_codes ol.list-input{ form#generate_codes ol.list-input{
li{ li{
width: 278px; width: 278px;
float: left; @include float(left);
label.required:after { label.required:after {
content: "*"; content: "*";
margin-left: ($baseline/4); @include margin-left(5px);
} }
min-height: 120px; min-height: 120px;
} }
...@@ -1661,28 +1625,28 @@ input[name="subject"] { ...@@ -1661,28 +1625,28 @@ input[name="subject"] {
} }
li#generate-registration-modal-field-country { li#generate-registration-modal-field-country {
width: 204px; width: 204px;
margin-left: 15px !important; @include margin-left(15px !important);
margin-bottom: $baseline; margin-bottom: $baseline;
} }
li:nth-child(even){ li:nth-child(even){
margin-left: 0px !important; @include margin-left(0px !important);
} }
li:nth-child(3n) { li:nth-child(3n) {
margin-left: 15px !important; @include margin-left(15px !important);
} }
li#generate-registration-modal-field-company-contact-name, li#generate-registration-modal-field-company-contact-name,
li#generate-registration-modal-field-address-line-3, li#generate-registration-modal-field-address-line-3,
li#generate-registration-modal-field-zipcode { li#generate-registration-modal-field-zipcode {
margin-left: 15px !important; @include margin-left(15px !important);
} }
li:last-child{ li:last-child{
label { label {
float: right; @include float(right);
@include right(27px);
margin-top: -5px; margin-top: -5px;
right: 27px;
} }
min-height: 5px; min-height: 5px;
margin-left: 0px !important; @include margin-left(0px !important);
input[type='checkbox'] { input[type='checkbox'] {
width: auto; width: auto;
height: auto; height: auto;
...@@ -1690,8 +1654,8 @@ input[name="subject"] { ...@@ -1690,8 +1654,8 @@ input[name="subject"] {
} }
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-total-price, li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-total-price,
li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference { li#generate-registration-modal-field-country ~ li#generate-registration-modal-field-internal-reference {
margin-left: 0px !important; @include margin-left(0px !important);
margin-right: 15px !important; @include margin-right(15px !important);
} }
li#generate-registration-modal-field-custom-reference-number { li#generate-registration-modal-field-custom-reference-number {
width: auto; width: auto;
...@@ -1705,7 +1669,7 @@ input[name="subject"] { ...@@ -1705,7 +1669,7 @@ input[name="subject"] {
} }
} }
li#set-course-mode-modal-field-currency{ li#set-course-mode-modal-field-currency{
margin-left: 0px !important; @include margin-left(0px !important);
select { select {
width: 100%; width: 100%;
} }
...@@ -1717,7 +1681,7 @@ input[name="subject"] { ...@@ -1717,7 +1681,7 @@ input[name="subject"] {
border-radius: 3px; border-radius: 3px;
} }
#coupon-content, #course-content, #registration-content { #coupon-content, #course-content, #registration-content {
padding: 20px; padding: $baseline;
header { header {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -1725,18 +1689,18 @@ input[name="subject"] { ...@@ -1725,18 +1689,18 @@ input[name="subject"] {
font-size: 24px; font-size: 24px;
font-weight: 100; font-weight: 100;
color: #1580b0; color: #1580b0;
text-align: left; @include text-align(left);
} }
} }
.instructions p { .instructions p {
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
form { form {
margin: 0;
padding: 0;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
margin: 0;
border: none; border: none;
padding: 0;
.group-form { .group-form {
margin: 0; margin: 0;
padding-top: 0; padding-top: 0;
...@@ -1758,10 +1722,10 @@ input[name="subject"] { ...@@ -1758,10 +1722,10 @@ input[name="subject"] {
font-weight: 600; font-weight: 600;
} }
.field label { .field label {
margin: 0 0 5px 0;
-webkit-transition: color 0.15s ease-in-out 0s; -webkit-transition: color 0.15s ease-in-out 0s;
-moz-transition: color 0.15s ease-in-out 0s; -moz-transition: color 0.15s ease-in-out 0s;
transition: color 0.15s ease-in-out 0s; transition: color 0.15s ease-in-out 0s;
margin: 0 0 5px 0;
color: #333; color: #333;
} }
.field.text input { .field.text input {
...@@ -1775,9 +1739,6 @@ input[name="subject"] { ...@@ -1775,9 +1739,6 @@ input[name="subject"] {
} }
} }
} }
#registration-content form .group-form {
}
#registration-content form { #registration-content form {
.field { .field {
margin: 0; margin: 0;
...@@ -1801,9 +1762,7 @@ input[name="subject"] { ...@@ -1801,9 +1762,7 @@ input[name="subject"] {
} }
.profile-distribution-widget { .profile-distribution-widget {
margin-bottom: $baseline * 2; margin-bottom: ($baseline * 2);
.display-text {}
.display-graph .graph-placeholder { .display-graph .graph-placeholder {
width: 750px; width: 750px;
...@@ -1818,7 +1777,7 @@ input[name="subject"] { ...@@ -1818,7 +1777,7 @@ input[name="subject"] {
} }
.grade-distributions-widget { .grade-distributions-widget {
margin-bottom: $baseline * 2; margin-bottom: ($baseline * 2);
.last-updated { .last-updated {
line-height: 2.2em; line-height: 2.2em;
...@@ -1852,23 +1811,23 @@ input[name="subject"] { ...@@ -1852,23 +1811,23 @@ input[name="subject"] {
h2{ h2{
height: 26px; height: 26px;
line-height: 26px; line-height: 26px;
padding-left: 25px; @include padding-left(25px);
span{ span{
float: right; @include float(right);
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
span{ span{
background: #ddd; float: none;
padding: 2px 9px; padding: 2px 9px;
background: #ddd;
border-radius: 2px; border-radius: 2px;
float: none;
font-weight: 400; font-weight: 400;
} }
} }
} }
span.tip{ span.tip{
padding: 10px 15px;
display: block; display: block;
padding: 10px 15px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
background: #f8f4ec; background: #f8f4ec;
...@@ -1878,55 +1837,53 @@ input[name="subject"] { ...@@ -1878,55 +1837,53 @@ input[name="subject"] {
@include button(simple, $blue); @include button(simple, $blue);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
float: right; @include float(right);
} }
} }
span.code_tip { span.code_tip {
display: block;
margin-bottom: 6px;
@include padding(($baseline/2) 15px ($baseline/2) $baseline);
background: none repeat scroll 0 0 #F8F4EC; background: none repeat scroll 0 0 #F8F4EC;
border-bottom: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD; border-top: 1px solid #DDDDDD;
color: #3C3C3C; color: #3C3C3C;
display: block;
line-height: 30px; line-height: 30px;
margin-bottom: 6px;
padding: 10px 15px 10px 20px;
.add{ .add{
@include button(simple, $blue); @include button(simple, $blue);
@extend .button-reset; @extend .button-reset;
@include float(right);
font-size: em(13); font-size: em(13);
float: right;
} }
} }
span.csv_tip { span.csv_tip {
display: block; display: block;
line-height: 30px; line-height: 30px;
margin-bottom: 6px; margin-bottom: 6px;
padding: 10px 15px 10px 1px; @include padding(($baseline/2) 15px ($baseline/2) 1px);
.add{ .add{
font-size: em(13); font-size: em(13);
float: right; @include float(right);
} }
} }
span.invalid_sale { span.invalid_sale {
background: none repeat scroll 0 0 #F8F4EC;
color: #3C3C3C;
display: block; display: block;
line-height: 30px;
height: 37px; height: 37px;
margin-bottom: 6px; margin-bottom: 6px;
padding: 10px 15px 10px 1px; @include padding(($baseline/2) 15px ($baseline/2) 1px);
background: none repeat scroll 0 0 #F8F4EC;
color: #3C3C3C;
line-height: 30px;
.add{ .add{
@include button(simple, $blue); @include button(simple, $blue);
@extend .button-reset; @extend .button-reset;
font-size: em(13); font-size: em(13);
} }
} }
} }
.rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper, .rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper,
.rtl .instructor-dashboard-wrapper-2 .studio-edit-link { .rtl .instructor-dashboard-wrapper-2 .studio-edit-link {
left: 2em; @include left(2em);
right: auto; @include right(auto);
} }
lms/templates/instructor/instructor_dashboard_2/cohort-form.underscore
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
%> %>
<div class="form-field"> <div class="form-field">
<div class="cohort-management-settings-form-name field field-text"> <div class="cohort-management-settings-form-name field field-text">
<label for="cohort-name" class="label"> <label for="cohort-name" class="form-label">
<%- gettext('Cohort Group Name') %> * <%- gettext('Cohort Group Name') %> *
<span class="sr"><%- gettext('(Required Field)')%></span> <span class="sr"><%- gettext('(Required Field)')%></span>
</label> </label>
...@@ -32,9 +32,9 @@ ...@@ -32,9 +32,9 @@
%> %>
<div class="form-field"> <div class="form-field">
<div class="cohort-management-details-association-course field field-radio"> <div class="cohort-management-details-association-course field field-radio">
<label class="label"> <h4 class="form-label">
<%- gettext('Associate this cohort group with a content group') %> <%- gettext('Associate this cohort group with a content group') %>
</label> </h4>
<label><input type="radio" class="radio-no" name="cohort-association-course" value="no" <%- !hasSelectedContentGroup ? 'checked="checked"' : '' %>/> <%- gettext("No Content Group") %></label> <label><input type="radio" class="radio-no" name="cohort-association-course" value="no" <%- !hasSelectedContentGroup ? 'checked="checked"' : '' %>/> <%- gettext("No Content Group") %></label>
<div class="input-group has-other-input-text"> <div class="input-group has-other-input-text">
<label><input type="radio" class="radio-yes" name="cohort-association-course" value="yes" <%- !hasContentGroups ? 'disabled="disabled"' : '' %> <%- hasSelectedContentGroup ? 'checked="checked"' : '' %> /> <%- gettext("Select a Content Group") %></label> <label><input type="radio" class="radio-yes" name="cohort-association-course" value="yes" <%- !hasContentGroups ? 'disabled="disabled"' : '' %> <%- hasSelectedContentGroup ? 'checked="checked"' : '' %> /> <%- gettext("Select a Content Group") %></label>
......
lms/templates/instructor/instructor_dashboard_2/cohorts.underscore
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
</div> </div>
<!-- Add modal --> <!-- Add modal -->
<div class="cohort-management-add-modal"></div> <div class="cohort-management-add-form"></div>
<!-- individual group --> <!-- individual group -->
<div class="cohort-management-group"></div> <div class="cohort-management-group"></div>
......
lms/templates/ux/reference/instructor_dashboard/cohorts.html deleted 100644 → 0
<%! 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>
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