Skip to content

E
edx-platform
Commit 28382316 by frances botsford
Options

Merge pull request #2867 from edx/frances/feature/lms-inst-dash-cleanup 

cleanup of instructor dash membership
parents 654239dc fd101445
Showing with 179 additions and 180 deletions
lms/static/coffee/src/instructor_dashboard/membership.coffee
...@@ -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
......
lms/static/sass/course.scss.mako
...@@ -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';
......
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -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,114 +280,197 @@ section.instructor-dashboard-content-2 { ...@@ -280,114 +280,197 @@ 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; .vert-right {
width: $half_width; display: inline-block;
vertical-align: top;
width: 48%;
margin-right: 2%;
} }
.vert-right { .vert-right {
float: right; margin-right: 0;
width: $half_width;
} }
select { .batch-enrollment {
margin-bottom: 1em; textarea {
margin-top: 0.2em;
height: auto;
width: 90%;
} }
.revoke-link { input {
color: $danger-red; margin-right: 5px;
text-decoration: underline;
cursor: pointer;
} }
label[for="auto-enroll"]:hover + .auto-enroll-hint { .request-res-section {
display: block; margin-top: 1.5em;
h3 {
color: #646464;
} }
.auto-enroll-hint { ul {
position: absolute; margin: 0;
margin-top: 0.5em;
padding: 0;
list-style-type: none;
line-height: 1.5em;
li {
}
}
}
}
.enroll-option {
margin-bottom: ($baseline/2);
position: relative;
label {
border-bottom: 1px dotted $base-font-color;
}
.hint {
@extend %t-copy-sub2;
display: none; display: none;
padding: $baseline; position: absolute;
width: $half_width; top: 15px;
border: 1px solid $light-gray; right: 0;
background-color: $white; padding: ($baseline/2);
width: 50%;
background-color: $light-gray;
span.emph { .hint-caret {
font-weight: bold; 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;
}
label[for="email-students"]:hover + .email-students-hint { label[for="email-students"]:hover + .email-students-hint {
display: block; display: block;
} }
.email-students-hint { .enroll-actions {
position: absolute; margin-top: $baseline;
}
.member-lists-management {
.wrapper-member-select {
background-color: $light-gray;
padding: ($baseline/2);
}
.member-lists-selector {
display: block;
margin: ($baseline/4) 0;
padding: ($baseline/4);
}
.auth-list-container {
display: none; display: none;
padding: $baseline; margin-bottom: ($baseline*1.5);
width: $half_width;
border: 1px solid $light-gray;
background-color: $white;
span.emph { &.active {
font-weight: bold; display: block;
} }
.member-list-widget {
.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
} }
.batch-enrollment { .title {
textarea { @include font-size(16);
margin-top: 0.2em; }
margin-bottom: 1em;
width: 500px;
height: 100px; .label {
@extend %t-copy-sub1;
color: $lighter-base-font-color;
} }
input { .info {
margin-right: 5px; @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;
} }
.request-res-section { .member-list {
margin-top: 1.5em; @include box-sizing(border-box);
h3 { table {
color: #646464; width: 100%;
} }
ul { thead {
margin: 0; background-color: $light-gray;
margin-top: 0.5em;
padding: 0;
list-style-type: none;
line-height: 1.5em;
li {
} }
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;
} }
} }
.auth-list-container { .bottom-bar {
display: none; @include box-sizing(border-box);
margin-bottom: 1.5em; @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;
}
&.active { // .add-field
display: block;
input[type="button"].add {
@include idashbutton($blue);
position: absolute;
right: $baseline;
}
} }
.revoke { .revoke {
width: 10px; color: $lighter-base-font-color;
height: 10px; cursor: pointer;
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); &:hover {
// line-height: 0.6em; color: $alert-color;
// margin-top: 5px; }
// padding: 6px 9px; }
// font-size: 9pt;
// border-radius: 10px;
} }
} }
} }
...@@ -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;
} }
lms/templates/instructor/instructor_dashboard_2/membership.html
...@@ -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>
<div class="enroll-option">
<input type="checkbox" name="auto-enroll" value="Auto-Enroll" style="margin-top: 1em;"> <input type="checkbox" name="auto-enroll" value="Auto-Enroll" style="margin-top: 1em;">
<label for="auto-enroll">${_("Auto Enroll")}</label> <label for="auto-enroll">${_("Auto Enroll")}</label>
<div class="auto-enroll-hint"> <div class="hint auto-enroll-hint">
<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.")} <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.")} ${_("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>
</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,11 +64,16 @@ ...@@ -61,11 +64,16 @@
<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"> <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> <option> ${_("Getting available lists...")} </option>
</select> </select>
<div class="request-response-error"></div> </div>
%if not section_data['access']['instructor']: %if not section_data['access']['instructor']:
<p> <p>
......
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