Skip to content

E
edx-platform
Commit 96ca09f4 by Chris Rodriguez
Options

Membership page label additions and fixes

parent 07fb1645
Showing with 129 additions and 131 deletions
common/test/acceptance/pages/lms/instructor_dashboard.py
...@@ -755,7 +755,7 @@ class MembershipPageAutoEnrollSection(PageObject): ...@@ -755,7 +755,7 @@ class MembershipPageAutoEnrollSection(PageObject):
""" """
Fill in the form with the provided email and submit it. Fill in the form with the provided email and submit it.
""" """
email_selector = "{} >p>textarea".format(self.batch_enrollment_selector) email_selector = "{} textarea".format(self.batch_enrollment_selector)
enrollment_button = "{} .enrollment-button[data-action='enroll']".format(self.batch_enrollment_selector) enrollment_button = "{} .enrollment-button[data-action='enroll']".format(self.batch_enrollment_selector)
# Fill the email addresses after the email selector is visible. # Fill the email addresses after the email selector is visible.
......
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -435,6 +435,12 @@ ...@@ -435,6 +435,12 @@
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
legend {
// use the same styles as H3s
font-size: 1.2em;
margin-bottom: 15px;
}
} }
.batch-enrollment, .batch-beta-testers { .batch-enrollment, .batch-beta-testers {
...@@ -478,19 +484,15 @@ ...@@ -478,19 +484,15 @@
margin: ($baseline/2) 0; margin: ($baseline/2) 0;
position: relative; position: relative;
label {
border-bottom: 1px dotted $base-font-color;
}
.hint { .hint {
@extend %t-copy-sub2; @extend %t-copy-sub2;
display: none; display: block;
position: absolute; position: absolute;
top: 15px; top: ($baseline/2);
@include left($baseline*10); left: -9999em;
padding: ($baseline/2); padding: ($baseline/2);
width: 50%; width: 50%;
background-color: $light-gray; background-color: $light-gray3;
box-shadow: 2px 2px 3px $shadow; box-shadow: 2px 2px 3px $shadow;
.hint-caret { .hint-caret {
...@@ -498,30 +500,24 @@ ...@@ -498,30 +500,24 @@
position: absolute; position: absolute;
top: 0; top: 0;
@include left(-15px); @include left(-15px);
@include border-right(8px solid $light-gray); @include border-right(8px solid $light-gray3);
@include border-left(8px solid transparent); @include border-left(8px solid transparent);
border-top: 8px solid $light-gray; border-top: 8px solid $light-gray3;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
} }
}
/* ***
label[for="auto-enroll"]:hover + .auto-enroll-hint { * Ideally we want to handle functionality with JS.
display: block; * This functionality should eventually be moved into CS/JS, and out of here. */
} .has-hint:hover > .hint {
@include left($baseline*10);
label[for="auto-enroll-beta"]:hover + .auto-enroll-beta-hint { }
width: 30%;
display: block; .has-hint input:focus ~ .hint {
} @include left($baseline*10);
}
label[for="email-students"]:hover + .email-students-hint { /* *** */
display: block;
}
label[for="email-students-beta"]:hover + .email-students-beta-hint {
width: 30%;
display: block;
} }
.enroll-actions { .enroll-actions {
...@@ -595,6 +591,7 @@ ...@@ -595,6 +591,7 @@
border-bottom: 1px solid $light-gray; border-bottom: 1px solid $light-gray;
} }
th,
td { td {
@extend %t-copy-sub1; @extend %t-copy-sub1;
vertical-align: middle; vertical-align: middle;
......
lms/templates/instructor/instructor_dashboard_2/membership.html
...@@ -17,7 +17,7 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_ ...@@ -17,7 +17,7 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
<thead> <thead>
<tr> <tr>
{{#labels}} {{#labels}}
<td class="label">{{.}}</td> <th class="label" scope="column">{{.}}</th>
{{/labels}} {{/labels}}
</tr> </tr>
</thead> </thead>
...@@ -25,132 +25,133 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_ ...@@ -25,132 +25,133 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
</table> </table>
</div> </div>
<div class="bottom-bar"> <div class="bottom-bar">
<label for="add-field" class="sr">{{add_placeholder}}</label> <label>
<input type="text" id="add-field" name="add-field" class="add-field" placeholder="{{add_placeholder}}"> <span class="label-text sr">{{add_placeholder}}</span>
<input type="text" id="add-field" name="add-field" class="add-field" placeholder="{{add_placeholder}}">
</label>
<input type="button" name="add" class="add" value="{{add_btn_label}}"> <input type="button" name="add" class="add" value="{{add_btn_label}}">
</div> </div>
</div> </div>
</script> </script>
<div class="batch-enrollment membership-section"> <h2 class="hd hd-2">Enrollment</h2>
<h2> ${_("Batch Enrollment")} </h2> <fieldset class="batch-enrollment membership-section">
<p> <legend id="heading-batch-enrollment" class="hd hd-2">${_("Batch Enrollment")}</legend>
<label for="student-ids"> <label>
${_("Enter email addresses and/or usernames separated by new lines or commas.")} ${_("Enter email addresses and/or usernames separated by new lines or commas.")}
${_("You will not get notification for emails that bounce, so please double-check spelling.")} </label> ${_("You will not get notification for emails that bounce, so please double-check spelling.")}
<textarea rows="6" name="student-ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea> <textarea rows="6" name="student-ids" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
</p> </label>
<input type="hidden" id="is_course_white_label" value="${section_data['is_white_label']}"> <input type="hidden" id="is_course_white_label" value="${section_data['is_white_label']}">
% if section_data['is_white_label']: % if section_data['is_white_label']:
<p> <label>
<label for="reason-field-id"> ${_("Enter the reason why the students are to be manually enrolled or unenrolled.")}
${_("Enter the reason why the students are to be manually enrolled or unenrolled.")} ${_("This cannot be left blank and will be recorded and presented in Enrollment Reports.")}
${_("This cannot be left blank and will be recorded and presented in Enrollment Reports.")} ${_("Therefore, please give enough detail to account for this action.")}
${_("Therefore, please give enough detail to account for this action.")} </label> <textarea rows="2" id="reason-field-id" name="reason-field" placeholder="${_('Reason')}" spellcheck="false"></textarea>
<textarea rows="2" id="reason-field-id" name="reason-field" placeholder="${_('Reason')}" spellcheck="false"></textarea> </label>
</p> %endif
%endif <div class="enroll-option">
<div class="enroll-option"> <label class="has-hint">
<input type="checkbox" name="auto-enroll" value="Auto-Enroll" checked="yes"> <input type="checkbox" name="auto-enroll" id="auto-enroll" value="Auto-Enroll" checked="yes" aria-describedby="heading-batch-enrollment">
<label for="auto-enroll">${_("Auto Enroll")}</label> <span class="label-text">${_("Auto Enroll")}</span>
<div class="hint auto-enroll-hint"> <div class="hint auto-enroll-hint">
<span class="hint-caret"></span> <span class="hint-caret"></span>
<p> <p id="auto-enroll-tip">
${_("If this option is <em>checked</em>, users who have not yet registered for {platform_name} will be automatically enrolled.").format(platform_name=settings.PLATFORM_NAME)} ${_("If this option is <em>checked</em>, users who have not yet registered for {platform_name} will be automatically enrolled.").format(platform_name=settings.PLATFORM_NAME)}
${_("If this option is left <em>unchecked</em>, users who have not yet registered for {platform_name} will not be enrolled, but will be allowed to enroll once they make an account.").format(platform_name=settings.PLATFORM_NAME)} ${_("If this option is left <em>unchecked</em>, users who have not yet registered for {platform_name} will not be enrolled, but will be allowed to enroll once they make an account.").format(platform_name=settings.PLATFORM_NAME)}
<br /><br /> <br /><br />
${_("Checking this box has no effect if 'Unenroll' is selected.")} ${_("Checking this box has no effect if 'Unenroll' is selected.")}
</p> </p>
</div>
</label>
</div> </div>
</div> <div class="enroll-option">
<label class="has-hint">
<div class="enroll-option"> <input type="checkbox" name="email-students" id="email-students" value="Notify-students-by-email" checked="yes" aria-describedby="heading-batch-enrollment">
<input type="checkbox" name="email-students" value="Notify-students-by-email" checked="yes"> <span class="label-text">${_("Notify users by email")}</span>
<label for="email-students">${_("Notify users by email")}</label> <div class="hint email-students-hint">
<div class="hint email-students-hint"> <span class="hint-caret"></span>
<span class="hint-caret"></span> <p id="email-students-tip">
<p> ${_("If this option is <em>checked</em>, users will receive an email notification.")}
${_("If this option is <em>checked</em>, users will receive an email notification.")} </p>
</p> </div>
</label>
</div> </div>
</div> <div>
<input type="button" name="enrollment-button" class="enrollment-button" value="${_("Enroll")}" data-endpoint="${ section_data['enroll_button_url'] }" data-action="enroll" >
<div> <input type="button" name="enrollment-button" class="enrollment-button" value="${_("Unenroll")}" data-endpoint="${ section_data['unenroll_button_url'] }" data-action="unenroll" >
<input type="button" name="enrollment-button" class="enrollment-button" value="${_("Enroll")}" data-endpoint="${ section_data['enroll_button_url'] }" data-action="enroll" > </div>
<input type="button" name="enrollment-button" class="enrollment-button" value="${_("Unenroll")}" data-endpoint="${ section_data['unenroll_button_url'] }" data-action="unenroll" > <div class="request-response"></div>
</div> <div class="request-response-error"></div>
<div class="request-response"></div> </fieldset>
<div class="request-response-error"></div>
</div>
%if static.get_value('ALLOW_AUTOMATED_SIGNUPS', settings.FEATURES.get('ALLOW_AUTOMATED_SIGNUPS', False)): %if static.get_value('ALLOW_AUTOMATED_SIGNUPS', settings.FEATURES.get('ALLOW_AUTOMATED_SIGNUPS', False)):
<hr class="divider" /> <hr class="divider" />
<div class="auto_enroll auto_enroll_csv"> <div class="auto_enroll auto_enroll_csv">
<h2> ${_("Register/Enroll Students")} </h2> <h2>${_("Register/Enroll Students")}</h2>
<p> <p>${_("To register and enroll a list of users in this course, choose a CSV file that contains the following columns in this exact order: email, username, name, and country. Please include one student per row and do not include any headers, footers, or blank lines.")}</p>
${_("To register and enroll a list of users in this course, choose a CSV file that contains the following columns in this exact order: email, username, name, and country. Please include one student per row and do not include any headers, footers, or blank lines.")}
</p>
<form id="student-auto-enroll-form" method="post" action="${ section_data['upload_student_csv_button_url'] }" enctype="multipart/form-data"> <form id="student-auto-enroll-form" method="post" action="${ section_data['upload_student_csv_button_url'] }" enctype="multipart/form-data">
<div class="customBrowseBtn"> <div class="customBrowseBtn">
<label for="browseFile" class="sr">${_("Upload a CSV for bulk enrollment")}</label>
<input disabled="disabled" id="browseFile" placeholder="choose file" /> <input disabled="disabled" id="browseFile" placeholder="choose file" />
<div class="file-browse btn btn-primary"> <div class="file-browse btn btn-primary">
<span class="browse"> Browse </span> <span class="browse"> Browse </span>
<label for="browseBtn" class="sr">${_("Upload a CSV for bulk enrollment")}</label>
<input class="file_field" id="browseBtn" name="students_list" type="file" accept=".csv"/> <input class="file_field" id="browseBtn" name="students_list" type="file" accept=".csv"/>
</div> </div>
</div> </div>
<button type="submit" name="enrollment_signup_button">${_("Upload CSV")}</button> <button type="submit" name="enrollment_signup_button">${_("Upload CSV")}</button>
<input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
</form> </form>
<div class="results"></div> <div class="results"></div>
</div> </div>
%endif %endif
<hr class="divider" /> <hr class="divider" />
%if section_data['access']['instructor']: %if section_data['access']['instructor']:
<div class="batch-beta-testers membership-section"> <fieldset class="batch-beta-testers membership-section">
<h2> ${_("Batch Beta Tester Addition")} </h2> <legend id="heading-batch-beta-testers" class="hd hd-2">${_("Batch Beta Tester Addition")}</legend>
<p> <label>
<label for="student-ids-for-beta"> ${_("Enter email addresses and/or usernames separated by new lines or commas.")}<br/>
${_("Enter email addresses and/or usernames separated by new lines or commas.")}<br/> ${_("Note: Users must have an activated {platform_name} account before they can be enrolled as beta testers.").format(platform_name=settings.PLATFORM_NAME)}
${_("Note: Users must have an activated {platform_name} account before they can be enrolled as beta testers.").format(platform_name=settings.PLATFORM_NAME)} <textarea rows="6" cols="50" name="student-ids-for-beta" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea>
</label> </label>
<div class="enroll-option">
<textarea rows="6" cols="50" name="student-ids-for-beta" placeholder="${_("Email Addresses/Usernames")}" spellcheck="false"></textarea> <label class="has-hint">
</p> <input type="checkbox" name="auto-enroll-beta" id="auto-enroll-beta" value="Auto-Enroll" checked="yes" aria-describedby="heading-batch-beta-testers">
<span class="label-text">${_("Auto Enroll")}</span>
<div class="enroll-option"> <div class="hint auto-enroll-beta-hint">
<input type="checkbox" name="auto-enroll" value="Auto-Enroll" checked="yes"> <span class="hint-caret"></span>
<label for="auto-enroll-beta">${_("Auto Enroll")}</label> <p id="auto-enroll-beta-tip">
<div class="hint auto-enroll-beta-hint"> ${_("If this option is <em>checked</em>, users who have not enrolled in your course will be automatically enrolled.")}
<span class="hint-caret"></span> <br /><br />
<p> ${_("Checking this box has no effect if 'Remove beta testers' is selected.")}
${_("If this option is <em>checked</em>, users who have not enrolled in your course will be automatically enrolled.")} </p>
<br /><br /> </div>
${_("Checking this box has no effect if 'Remove beta testers' is selected.")} </label>
</p>
</div> </div>
</div> <div class="enroll-option">
<label class="has-hint">
<div class="enroll-option"> <input type="checkbox" name="email-students-beta" id="email-students-beta" value="Notify-students-by-email" checked="yes" aria-describedby="heading-batch-beta-testers">
<input type="checkbox" name="email-students-beta" value="Notify-students-by-email" checked="yes"> <span class="label-text">${_("Notify users by email")}</span>
<label for="email-students-beta">${_("Notify users by email")}</label> <div class="hint email-students-beta-hint">
<div class="hint email-students-beta-hint"> <span class="hint-caret"></span>
<span class="hint-caret"></span> <p id="email-students-beta-tip">
<p> ${_("If this option is <em>checked</em>, users will receive an email notification.")}</p> ${_("If this option is <em>checked</em>, users will receive an email notification.")}
</p>
</div>
</label>
</div> </div>
</div> <div>
<input type="button" name="beta-testers" class="enrollment-button" value="${_("Add beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="add" >
<div> <input type="button" name="beta-testers" class="enrollment-button" value="${_("Remove beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="remove" >
<input type="button" name="beta-testers" class="enrollment-button" value="${_("Add beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="add" > </div>
<input type="button" name="beta-testers" class="enrollment-button" value="${_("Remove beta testers")}" data-endpoint="${ section_data['modify_beta_testers_button_url'] }" data-action="remove" > <div class="request-response"></div>
</div> <div class="request-response-error"></div>
</fieldset>
<div class="request-response"></div>
<div class="request-response-error"></div>
</div>
<hr class="divider" /> <hr class="divider" />
%endif %endif
...@@ -163,11 +164,11 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_ ...@@ -163,11 +164,11 @@ from openedx.core.djangoapps.course_groups.partition_scheme import get_cohorted_
<div class="wrapper-member-select"> <div class="wrapper-member-select">
## Translators: an "Administrator Group" is a group, such as Course Staff, that users can be added to. ## Translators: an "Administrator Group" is a group, such as Course Staff, that users can be added to.
<label for="member-lists-selector">${_("Select a course team role:")}</label> <label>${_("Select a course team role:")}
<select id="member-lists-selector" class="member-lists-selector"> <select id="member-lists-selector" class="member-lists-selector">
<option> ${_("Getting available lists...")} </option> <option> ${_("Getting available lists...")} </option>
</select> </select>
</label>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment