diff --git a/cms/static/sass/elements/_modal-window.scss b/cms/static/sass/elements/_modal-window.scss
index a2904f038df62e4369f2322065d75f24e73ebad5..a12a04c5f372fb0b642d6a9fc50dc45bc7ef7095 100644
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -579,18 +579,22 @@
.wrapper-modal-window-bulkpublish-subsection,
.wrapper-modal-window-bulkpublish-unit,
.course-outline-modal {
- .exam-time-list-fields,
- .exam-review-rules-list-fields {
- margin: 0 0 ($baseline/2) 0;
+ .no-descriptive-text {
+ display: block;
+ margin-bottom: ($baseline/4);
}
+
.list-fields {
.field-message {
- @extend %t-copy-sub2;
+ @extend %t-copy-sub1;
color: $gray-d1;
+ margin-bottom: ($baseline/4);
}
label {
- @extend %t-title7;
+ @extend %t-title6;
+ font-weight: font-weight(semi-bold);
}
+
.field {
display: inline-block;
vertical-align: top;
@@ -598,9 +602,10 @@
margin-bottom: ($baseline/4);
label {
- @extend %t-strong;
+ @include font-size(16);
+ font-weight: font-weight(semi-bold);
@include transition(color $tmg-f3 ease-in-out 0s);
- margin: 0 0 ($baseline/4) 0;
+ margin-bottom: ($baseline/4);
&.is-focused {
color: $blue;
@@ -737,8 +742,7 @@
// UI: timed and proctored exam section
.edit-settings-timed-examination {
- // give a little space between the sections
- padding-bottom: 10px;
+ margin-bottom: $baseline;
.checkbox-cosmetic .input-checkbox {
@extend %cont-text-sr;
diff --git a/cms/templates/js/access-editor.underscore b/cms/templates/js/access-editor.underscore
index 7b1b7c09b91b9551c05551b14664b76fd930dec3..7425a0e0179505fe1edefea4c56718a2d3f4350c 100644
--- a/cms/templates/js/access-editor.underscore
+++ b/cms/templates/js/access-editor.underscore
@@ -31,15 +31,15 @@
<% } %>
<h3 class="modal-section-title"><%- gettext('Use as a Prerequisite') %></h3>
<div class="modal-section-content gating-is-prereq">
- <ul class="list-fields list-input">
- <li class="field field-checkbox checkbox-cosmetic">
+ <div class="list-fields list-input">
+ <div class="field-checkbox checkbox-cosmetic">
<input type="checkbox" id="is_prereq" name="is_prereq" class="input input-checkbox" />
<label for="is_prereq" class="label">
<span class="icon fa fa-check-square-o input-checkbox-checked" aria-hidden="true"></span>
<span class="icon fa fa-square-o input-checkbox-unchecked" aria-hidden="true"></span>
<%- gettext('Make this subsection available as a prerequisite to other content') %>
</label>
- </li>
- </ul>
+ </div>
+ </div>
</div>
</form>
diff --git a/cms/templates/js/content-visibility-editor.underscore b/cms/templates/js/content-visibility-editor.underscore
index e66ae634c810ad1d1b6c982f2291ddfbcf6e72c9..083486be033fadb6eb64a9a95f2af17375c2550d 100644
--- a/cms/templates/js/content-visibility-editor.underscore
+++ b/cms/templates/js/content-visibility-editor.underscore
@@ -1,40 +1,34 @@
<form>
<h3 class="modal-section-title" id="content_visibility_label"><%- gettext('Subsection Visibility') %></h3>
<div class="modal-section-content staff-lock">
- <ul class="list-fields list-input content-visibility" role="group" aria-labelledby="content_visibility_label">
- <li class="field-radio">
- <label class="label">
- <input class="input input-radio" name="content-visibility" type="radio" value="visible" aria-described-by"visible_description">
- <%- gettext('Show entire subsection') %>
- </label>
- <p class='field-message' id='visible_description'> <%- gettext('Learners see the published subsection and can access its content.') %> </p>
- </li>
- <li class="field-radio">
- <label class="label">
- <input class="input input-radio" name="content-visibility" type="radio" value="hide_after_due" aria-described-by="hide_after_due_description">
- <% if (self_paced) { %>
- <%- gettext('Hide content after course end date') %>
- <% } else { %>
- <%- gettext('Hide content after due date') %>
- <% } %>
- </label>
- <p class='field-message' id='hide_after_due_description'>
- <% if (self_paced) { %>
- <%- gettext('After the course\'s end date has passed, learners can no longer access subsection content. The subsection remains included in grade calculations.') %>
- <% } else { %>
- <%- gettext('After the subsection\'s due date has passed, learners can no longer access its content. The subsection remains included in grade calculations.') %>
- <% } %>
- </p>
- </li>
- <li class="field-radio">
- <label class="label">
- <input class="input input-radio" name="content-visibility" type="radio" value="staff_only" aria-described-by="staff_only_description">
- <% var hide_label = gettext('Hide entire subsection'); %>
- <%- hide_label %>
- </label>
- <p class='field-message' id='staff_only_description'> <%- gettext('Learners do not see the subsection in the course outline. The subsection is not included in grade calculations.') %> </p>
- </li>
- </ul>
+ <div class="list-fields list-input content-visibility" role="group" aria-labelledby="content_visibility_label">
+ <label class="label">
+ <input class="input input-radio" name="content-visibility" type="radio" value="visible" aria-describedby="visible_description">
+ <%- gettext('Show entire subsection') %>
+ </label>
+ <p class='field-message' id='visible_description'> <%- gettext('Learners see the published subsection and can access its content.') %> </p>
+ <label class="label">
+ <input class="input input-radio" name="content-visibility" type="radio" value="hide_after_due" aria-describedby="hide_after_due_description">
+ <% if (self_paced) { %>
+ <%- gettext('Hide content after course end date') %>
+ <% } else { %>
+ <%- gettext('Hide content after due date') %>
+ <% } %>
+ </label>
+ <p class='field-message' id='hide_after_due_description'>
+ <% if (self_paced) { %>
+ <%- gettext('After the course\'s end date has passed, learners can no longer access subsection content. The subsection remains included in grade calculations.') %>
+ <% } else { %>
+ <%- gettext('After the subsection\'s due date has passed, learners can no longer access its content. The subsection remains included in grade calculations.') %>
+ <% } %>
+ </p>
+ <label class="label">
+ <input class="input input-radio" name="content-visibility" type="radio" value="staff_only" aria-describedby="staff_only_description">
+ <% var hide_label = gettext('Hide entire subsection'); %>
+ <%- hide_label %>
+ </label>
+ <p class='field-message' id='staff_only_description'> <%- gettext('Learners do not see the subsection in the course outline. The subsection is not included in grade calculations.') %> </p>
+ </div>
<% if (hasExplicitStaffLock && !ancestorLocked) { %>
<p class="tip tip-warning">
diff --git a/cms/templates/js/timed-examination-preference-editor.underscore b/cms/templates/js/timed-examination-preference-editor.underscore
index b988b806503380244f3a59d3c970e2aaed507b64..a72e72996a546adbdafba3509243a4c9d45d7193 100644
--- a/cms/templates/js/timed-examination-preference-editor.underscore
+++ b/cms/templates/js/timed-examination-preference-editor.underscore
@@ -1,57 +1,49 @@
<form>
- <h3 class="modal-section-title"><%= gettext('Set as a Special Exam') %></h3>
+ <h3 class="modal-section-title"><%- gettext('Set as a Special Exam') %></h3>
<div class="modal-section-content has-actions">
- <ul class="list-fields list-input exam-types" role="group" aria-label="<%- gettext('Exam Types') %>">
- <li class="field-radio">
+ <div class="list-fields list-input exam-types" role="group" aria-label="<%- gettext('Exam Types') %>">
+ <label class="label no-descriptive-text">
+ <input type="radio" name="exam_type" class="input input-radio no_special_exam" checked="checked"/>
+ <%- gettext('None') %>
+ </label>
+ <label class="label">
+ <input type="radio" name="exam_type" class="input input-radio timed_exam"
+ aria-describedby="timed-exam-description" />
+ <%- gettext('Timed') %>
+ </label>
+ <p class='field-message' id='timed-exam-description'> <%- gettext('Use a timed exam to limit the time learners can spend on problems in this subsection. Learners must submit answers before the time expires. You can allow additional time for individual learners through the Instructor Dashboard.') %> </p>
+ <% if (enable_proctored_exam) { %>
<label class="label">
- <input type="radio" name="exam_type" class="input input-radio no_special_exam" checked="checked"/>
- <%- gettext('None') %>
+ <input type="radio" name="exam_type" class="input input-radio proctored_exam"
+ aria-describedby="proctored-exam-description" />
+ <%- gettext('Proctored') %>
</label>
- </li>
- <li class="field-radio">
+ <p class='field-message' id='proctored-exam-description'> <%- gettext('Proctored exams are timed and they record video of each learner taking the exam. The videos are then reviewed to ensure that learners follow all examination rules.') %> </p>
<label class="label">
- <input type="radio" name="exam_type" class="input input-radio timed_exam"
- aria-describedby="timed-exam-description" />
- <%- gettext('Timed') %>
+ <input type="radio" name="exam_type" class="input input-radio practice_exam"
+ aria-describedby="practice-exam-description"/>
+ <%- gettext('Practice Proctored') %>
</label>
- <p class='field-message' id='timed-exam-description'> <%- gettext('Use a timed exam to limit the time learners can spend on problems in this subsection. Learners must submit answers before the time expires. You can allow additional time for individual learners through the Instructor Dashboard.') %> </p>
- </li>
- <% if (enable_proctored_exam) { %>
- <li class="field-radio">
- <label class="label">
- <input type="radio" name="exam_type" class="input input-radio proctored_exam"
- aria-describedby="proctored-exam-description" />
- <%- gettext('Proctored') %>
- </label>
- <p class='field-message' id='proctored-exam-description'> <%- gettext('Proctored exams are timed and they record video of each learner taking the exam. The videos are then reviewed to ensure that learners follow all examination rules.') %> </p>
- </li>
- <li class="field-radio">
- <label class="label">
- <input type="radio" name="exam_type" class="input input-radio practice_exam"
- aria-describedby="practice-exam-description"/>
- <%- gettext('Practice Proctored') %>
- </label>
- <p class='field-message' id='practice-exam-description'> <%- gettext("Use a practice proctored exam to introduce learners to the proctoring tools and processes. Results of a practice exam do not affect a learner's grade.") %> </p>
- </li>
+ <p class='field-message' id='practice-exam-description'> <%- gettext("Use a practice proctored exam to introduce learners to the proctoring tools and processes. Results of a practice exam do not affect a learner's grade.") %> </p>
<% } %>
- </ul>
- <ul class="list-fields list-input exam-options">
- <li class="field field-text field-time-limit">
+ </div>
+ <div class="list-fields list-input exam-options">
+ <div class="field field-text field-time-limit">
<label class="label">
<%- gettext('Time Allotted (HH:MM):') %>
<input type="text" value="" aria-describedby="time-limit-description" placeholder="HH:MM"
class="time_limit release-time time input input-text" autocomplete="off" />
</label>
<p class='field-message' id='time-limit-description'><%- gettext('Select a time allotment for the exam. If it is over 24 hours, type in the amount of time. You can grant individual learners extra time to complete the exam through the Instructor Dashboard.') %></p>
- </li>
- <li class="field field-text field-exam-review-rules">
+ </div>
+ <div class="field field-text field-exam-review-rules">
<label class="label">
- <%- gettext('Review Rules') %>
+ <%- gettext('Review Rules') %>
<textarea cols="50" maxlength="255" aria-describedby="review-rules-description"
class="review-rules input input-text" autocomplete="off" />
</label>
<p class='field-message' id='review-rules-description'><%- gettext('Specify any additional rules or rule exceptions that the proctoring review team should enforce when reviewing the videos. For example, you could specify that calculators are allowed.') %></p>
- </li>
- </ul>
+ </div>
+ </div>
</div>
</form>