Commit fd101445 by Frances Botsford

cleanup of instructor dash membership

parent 2c9585ea
...@@ -69,7 +69,7 @@ class AuthListWidget extends MemberListWidget ...@@ -69,7 +69,7 @@ class AuthListWidget extends MemberListWidget
super $container, super $container,
title: $container.data 'display-name' title: $container.data 'display-name'
info: $container.data 'info-text' info: $container.data 'info-text'
labels: ["username", "email", "revoke access"] labels: ["Username", "Email", "Revoke access"]
add_placeholder: "Enter email" add_placeholder: "Enter email"
add_btn_label: $container.data 'add-button-label' add_btn_label: $container.data 'add-button-label'
add_handler: (input) => @add_handler input add_handler: (input) => @add_handler input
...@@ -116,9 +116,9 @@ class AuthListWidget extends MemberListWidget ...@@ -116,9 +116,9 @@ class AuthListWidget extends MemberListWidget
# if there are members, show the list # if there are members, show the list
# create revoke button and insert it into the row # create revoke button and insert it into the row
$revoke_btn = $ '<div/>', $revoke_btn = $ '<div class="revoke"><i class="icon-remove-sign"></i> Revoke access</div>',
class: 'revoke' class: 'revoke'
click: => $revoke_btn.click =>
@modify_member_access member.email, 'revoke', (error) => @modify_member_access member.email, 'revoke', (error) =>
# abort on error # abort on error
return @show_errors error unless error is null return @show_errors error unless error is null
...@@ -271,7 +271,7 @@ class BatchEnrollment ...@@ -271,7 +271,7 @@ class BatchEnrollment
allowed.push student_results allowed.push student_results
# The instructor is trying to unenroll someone who is not enrolled or allowed to enroll; non-sensical action. # The instructor is trying to unenroll someone who is not enrolled or allowed to enroll; non-sensical action.
else if data_from_server.action is 'unenroll' and not (student_results.before.enrollment) and not (student_results.before.allowed) else if data_from_server.action is 'unenroll' and not (student_results.before.enrollment) and not (student_results.before.allowed)
notunenrolled.push student_results notunenrolled.push student_results
else if not student_results.after.enrollment else if not student_results.after.enrollment
......
...@@ -23,6 +23,10 @@ ...@@ -23,6 +23,10 @@
@import 'base/animations'; @import 'base/animations';
@import 'shared/tooltips'; @import 'shared/tooltips';
// base - elements
@import 'elements/typography';
@import 'elements/controls';
// Course base / layout styles // Course base / layout styles
@import 'course/layout/courseware_header'; @import 'course/layout/courseware_header';
@import 'course/layout/footer'; @import 'course/layout/footer';
......
...@@ -111,8 +111,8 @@ section.instructor-dashboard-content-2 { ...@@ -111,8 +111,8 @@ section.instructor-dashboard-content-2 {
// } // }
.request-response-error { .request-response-error {
margin-top: 1em; margin: 0;
margin-bottom: 1em; padding-bottom: ($baseline);
color: $error-red; color: $error-red;
} }
...@@ -280,67 +280,23 @@ section.instructor-dashboard-content-2 { ...@@ -280,67 +280,23 @@ section.instructor-dashboard-content-2 {
.instructor-dashboard-wrapper-2 section.idash-section#membership { .instructor-dashboard-wrapper-2 section.idash-section#membership {
$half_width: $baseline * 20; $half_width: $baseline * 20;
.vert-left { .vert-left,
float: left;
width: $half_width;
}
.vert-right { .vert-right {
float: right; display: inline-block;
width: $half_width; vertical-align: top;
} width: 48%;
margin-right: 2%;
select {
margin-bottom: 1em;
}
.revoke-link {
color: $danger-red;
text-decoration: underline;
cursor: pointer;
}
label[for="auto-enroll"]:hover + .auto-enroll-hint {
display: block;
} }
.auto-enroll-hint { .vert-right {
position: absolute; margin-right: 0;
display: none;
padding: $baseline;
width: $half_width;
border: 1px solid $light-gray;
background-color: $white;
span.emph {
font-weight: bold;
}
}
label[for="email-students"]:hover + .email-students-hint {
display: block;
}
.email-students-hint {
position: absolute;
display: none;
padding: $baseline;
width: $half_width;
border: 1px solid $light-gray;
background-color: $white;
span.emph {
font-weight: bold;
}
} }
.batch-enrollment { .batch-enrollment {
textarea { textarea {
margin-top: 0.2em; margin-top: 0.2em;
margin-bottom: 1em; height: auto;
width: 500px; width: 90%;
height: 100px;
} }
input { input {
...@@ -366,28 +322,155 @@ section.instructor-dashboard-content-2 { ...@@ -366,28 +322,155 @@ section.instructor-dashboard-content-2 {
} }
} }
.auth-list-container { .enroll-option {
display: none; margin-bottom: ($baseline/2);
margin-bottom: 1.5em; position: relative;
label {
border-bottom: 1px dotted $base-font-color;
}
.hint {
@extend %t-copy-sub2;
display: none;
position: absolute;
top: 15px;
right: 0;
padding: ($baseline/2);
width: 50%;
background-color: $light-gray;
.hint-caret {
display: block;
position: absolute;
top: 0;
left: -15px;
border-top: 8px solid $light-gray;
border-right: 8px solid $light-gray;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
}
}
}
label[for="auto-enroll"]:hover + .auto-enroll-hint {
display: block;
}
&.active { label[for="email-students"]:hover + .email-students-hint {
display: block;
}
.enroll-actions {
margin-top: $baseline;
}
.member-lists-management {
.wrapper-member-select {
background-color: $light-gray;
padding: ($baseline/2);
}
.member-lists-selector {
display: block; display: block;
margin: ($baseline/4) 0;
padding: ($baseline/4);
} }
.revoke { .auth-list-container {
width: 10px; display: none;
height: 10px; margin-bottom: ($baseline*1.5);
background: url('../images/moderator-delete-icon.png') left center no-repeat;
opacity: 0.7;
&:hover, &:focus { opacity: 0.8; }
&:active { opacity: 0.9; }
// @include idashbutton($danger-red); &.active {
// line-height: 0.6em; display: block;
// margin-top: 5px; }
// padding: 6px 9px;
// font-size: 9pt; .member-list-widget {
// border-radius: 10px;
.header {
@include box-sizing(border-box);
@include border-top-radius(3);
position: relative;
padding: ($baseline/2);
background-color: #efefef;
border: 1px solid $light-gray;
display: none; // hiding to prefer dropdown as header
}
.title {
@include font-size(16);
}
.label {
@extend %t-copy-sub1;
color: $lighter-base-font-color;
}
.info {
@include box-sizing(border-box);
padding: ($baseline/2);
border: 1px solid $light-gray;
color: $lighter-base-font-color;
line-height: 1.3em;
font-size: .85em;
}
.member-list {
@include box-sizing(border-box);
table {
width: 100%;
}
thead {
background-color: $light-gray;
}
tr {
border-bottom: 1px solid $light-gray;
}
td {
@extend %t-copy-sub1;
vertical-align: middle;
word-wrap: break-word;
padding: ($baseline/2) ($baseline/4);
border-left: 1px solid $light-gray;
border-right: 1px solid $light-gray;
}
}
.bottom-bar {
@include box-sizing(border-box);
@include border-bottom-radius(3);
position: relative;
padding: ($baseline/2);
margin-top: -1px;
border: 1px solid $light-gray;
background-color: #efefef;
box-shadow: inset #bbb 0px 1px 1px 0px;
}
// .add-field
input[type="button"].add {
@include idashbutton($blue);
position: absolute;
right: $baseline;
}
}
.revoke {
color: $lighter-base-font-color;
cursor: pointer;
&:hover {
color: $alert-color;
}
}
} }
} }
} }
...@@ -556,102 +639,6 @@ section.instructor-dashboard-content-2 { ...@@ -556,102 +639,6 @@ section.instructor-dashboard-content-2 {
} }
} }
.member-list-widget {
$width: 20 * $baseline;
$height: 25 * $baseline;
$header-height: 3 * $baseline;
$bottom-bar-height: 3 * $baseline;
$content-height: $height - $header-height - $bottom-bar-height;
$border-radius: 3px;
width: $width;
height: $height;
.header {
@include box-sizing(border-box);
@include border-top-radius($border-radius);
position: relative;
padding: $baseline;
width: $width;
height: $header-height;
background-color: #efefef;
border: 1px solid $light-gray;
}
.title {
@include font-size(16);
}
.label {
color: $lighter-base-font-color;
font-size: $body-font-size * 4/5;
}
.info {
@include box-sizing(border-box);
max-height: $content-height;
padding: $baseline;
border: 1px solid $light-gray;
color: $lighter-base-font-color;
line-height: 1.3em;
font-size: .85em;
}
.member-list {
@include box-sizing(border-box);
overflow: auto;
padding-top: 0;
width: $width;
max-height: $content-height;
table {
width: 100%;
}
tr {
border-bottom: 1px solid $light-gray;
}
td {
table-layout: fixed;
vertical-align: middle;
word-wrap: break-word;
padding-left: 15px;
border-left: 1px solid $light-gray;
border-right: 1px solid $light-gray;
font-size: 3/4 *$body-font-size;
}
}
.bottom-bar {
@include box-sizing(border-box);
@include border-bottom-radius($border-radius);
position: relative;
width: $width;
height: $bottom-bar-height;
padding: $baseline / 2;
// border-top: none;
margin-top: -1px;
border: 1px solid $light-gray;
background-color: #efefef;
box-shadow: inset #bbb 0px 1px 1px 0px;
}
// .add-field
input[type="button"].add {
@include idashbutton($blue);
position: absolute;
right: $baseline;
}
}
input[name="subject"] { input[name="subject"] {
width:600px; width:600px;
} }
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<div class="header"> <div class="header">
<div class="title"> {{title}} </div> <div class="title"> {{title}} </div>
</div> </div>
<div class="info"> {{info}} </div>
<div class="member-list"> <div class="member-list">
<table> <table>
<thead> <thead>
...@@ -18,7 +19,6 @@ ...@@ -18,7 +19,6 @@
<tbody></tbody> <tbody></tbody>
</table> </table>
</div> </div>
<div class="info"> {{info}} </div>
<div class="bottom-bar"> <div class="bottom-bar">
<input type="text" name="add-field" class="add-field" placeholder="{{add_placeholder}}"> <input type="text" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
<input type="button" name="add" class="add" value="{{add_btn_label}}"> <input type="button" name="add" class="add" value="{{add_btn_label}}">
...@@ -28,28 +28,31 @@ ...@@ -28,28 +28,31 @@
<div class="vert-left batch-enrollment"> <div class="vert-left batch-enrollment">
<h2> ${_("Batch Enrollment")} </h2> <h2> ${_("Batch Enrollment")} </h2>
<p> ${_("Enter student emails separated by new lines or commas.")} </p> <p>
<textarea rows="6" cols="50" name="student-emails" placeholder="${_("Student Emails")}" spellcheck="false"></textarea> <label for="student-emails">${_("Enter student emails separated by new lines or commas.")} </label>
<br> <textarea rows="6" name="student-emails" placeholder="${_("Student Emails")}" spellcheck="false"></textarea>
</p>
<input type="checkbox" name="auto-enroll" value="Auto-Enroll" style="margin-top: 1em;">
<label for="auto-enroll">${_("Auto Enroll")}</label> <div class="enroll-option">
<div class="auto-enroll-hint"> <input type="checkbox" name="auto-enroll" value="Auto-Enroll" style="margin-top: 1em;">
<p> ${_("If auto enroll is <em>checked</em>, students who have not yet registered for edX will be automatically enrolled.")} <label for="auto-enroll">${_("Auto Enroll")}</label>
${_("If auto enroll is left <em>unchecked</em>, students who have not yet registered for edX will not be enrolled, but will be allowed to enroll.")} <div class="hint auto-enroll-hint">
</p> <span class="hint-caret"></span>
<p> ${_("If auto enroll is <em>checked</em>, students who have not yet registered for edX will be automatically enrolled.")}
${_("If auto enroll is left <em>unchecked</em>, students who have not yet registered for edX will not be enrolled, but will be allowed to enroll.")}</p>
</div>
</div> </div>
<div> <div class="enroll-option">
<input type="checkbox" name="email-students" value="Notify-students-by-email"> <input type="checkbox" name="email-students" value="Notify-students-by-email">
<label for="email-students">${_("Notify students by email")}</label> <label for="email-students">${_("Notify students by email")}</label>
<div class="email-students-hint"> <div class="hint email-students-hint">
<p> ${_("If email students is <em>checked</em> students will receive an email notification.")} <span class="hint-caret"></span>
</p> <p> ${_("If email students is <em>checked</em> students will receive an email notification.")}</p>
</div> </div>
</div> </div>
<div> <div class="enroll-actions actions">
<input type="button" name="enroll" value="${_("Enroll")}" data-endpoint="${ section_data['enroll_button_url'] }" > <input type="button" name="enroll" value="${_("Enroll")}" data-endpoint="${ section_data['enroll_button_url'] }" >
<input type="button" name="unenroll" value="${_("Unenroll")}" data-endpoint="${ section_data['unenroll_button_url'] }" > <input type="button" name="unenroll" value="${_("Unenroll")}" data-endpoint="${ section_data['unenroll_button_url'] }" >
</div> </div>
...@@ -61,12 +64,17 @@ ...@@ -61,12 +64,17 @@
<div class="vert-right member-lists-management"> <div class="vert-right member-lists-management">
<h2> ${_("Administration List Management")} </h2> <h2> ${_("Administration List Management")} </h2>
<select id="member-lists-selector">
<option> ${_("Getting available lists...")} </option>
</select>
<div class="request-response-error"></div> <div class="request-response-error"></div>
<div class="wrapper-member-select">
<label for="member-lists-selector">Select an Administrator Group:</label>
<select id="member-lists-selector" class="member-lists-selector">
<option> ${_("Getting available lists...")} </option>
</select>
</div>
%if not section_data['access']['instructor']: %if not section_data['access']['instructor']:
<p> <p>
${_("Staff cannot modify staff or beta tester lists. To modify these lists, " ${_("Staff cannot modify staff or beta tester lists. To modify these lists, "
......
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