Skip to content

E
edx-platform
Commit f29f605f by Brian Talbot
Options

settings - refactored radio/checkbox input formatting

parent d3703079
Showing with 189 additions and 175 deletions
cms/static/sass/_settings.scss
...@@ -151,6 +151,11 @@ ...@@ -151,6 +151,11 @@
} }
} }
input[type="checkbox"], input[type="radio"] {
}
.input-default input, .input-default textarea { .input-default input, .input-default textarea {
color: $mediumGrey; color: $mediumGrey;
background: $lightGrey; background: $lightGrey;
...@@ -165,98 +170,6 @@ ...@@ -165,98 +170,6 @@
font-size: 13px; font-size: 13px;
} }
.field.ui-status {
> .input {
display: block !important;
margin-bottom: 15px;
}
.ui-status-input-checkbox input, .ui-status-input-radio input {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
.ui-status-input-checkbox input ~ label, .ui-status-input-radio input ~ label {
position: relative;
left: -30px;
display: inline-block;
z-index: 100;
margin: 0 0 0 5px;
padding-left: 30px;
color: $offBlack;
opacity: 0.50;
cursor: pointer;
@include transition(opacity 0.25s ease-in-out);
&:before {
display: inline-block;
margin-right: 10px;
}
&:after {
display: inline-block;
margin-left: 10px;
}
~ .tip {
margin-top: 0;
@include transition(color 0.25s ease-in-out);
}
}
.ui-status-indic {
background: transparent url('../images/correct-icon.png') 0 0 no-repeat;
z-index: 10;
display: inline-block;
height: 20px;
width: 30px;
opacity: 0.50;
@include transition(opacity 0.25s ease-in-out);
}
.ss-check {
color: $green;
}
.ss-delete {
color: $red;
}
.ui-status-input-checkbox input:checked ~ label, .ui-status-input-radio input:checked ~ label {
opacity: 0.99;
&:after {
}
&:before {
}
~ .tip {
color: $darkGrey;
}
}
.ui-status-input-checkbox input:checked ~ .ui-status-indic, .ui-status-input-radio input:checked ~ .ui-status-indic {
background: transparent url('../images/correct-icon.png') 0 0 no-repeat;
opacity: 0.99;
}
// disabled
.ui-status-input-checkbox input:disabled, .ui-status-input-radio input:disabled {
color: $mediumGrey;
}
.ui-status-input-checkbox input:disabled ~ .ui-status-indic, .ui-status-input-radio input:disabled ~ .ui-status-indic {
color: $mediumGrey;
}
}
.tip { .tip {
color: $mediumGrey; color: $mediumGrey;
font-size: 13px; font-size: 13px;
...@@ -388,6 +301,42 @@ ...@@ -388,6 +301,42 @@
} }
} }
//radio buttons and checkboxes
.input-radio {
@include clearfix();
input {
display: block;
float: left;
margin-right: 10px;
}
.copy {
position: relative;
top: -5px;
float: left;
width: 350px;
}
label {
display: block;
margin-bottom: 0;
}
.tip {
display: block;
margin-top: 0;
}
.message-error {
}
}
.input-checkbox {
}
// enumerated inputs // enumerated inputs
&.enum { &.enum {
} }
...@@ -405,7 +354,7 @@ ...@@ -405,7 +354,7 @@
} }
&.multi-inline { &.multi-inline {
@include clearfix; @include clearfix();
.group { .group {
width: 170px; width: 170px;
...@@ -516,7 +465,6 @@ ...@@ -516,7 +465,6 @@
} }
.current-faculty-photo { .current-faculty-photo {
overflow: hidden;
padding: 0; padding: 0;
img { img {
......
cms/templates/settings.html
...@@ -303,21 +303,21 @@ ...@@ -303,21 +303,21 @@
<div class="field enum"> <div class="field enum">
<ul class="input-list course-faculty-list"> <ul class="input-list course-faculty-list">
<li class="input input-existing multi course-faculty-list-item"> <li class="input input-existing multi course-faculty-list-item">
<div class="row"> <div class="row row-col2">
<label for="course-faculty-firstname-input">Faculty First Name:</label> <label for="course-faculty-firstname-input">Faculty First Name:</label>
<div class="field"> <div class="field">
<input type="text" class="long" id="course-faculty-firstname-input"> <input type="text" class="long" id="course-faculty-firstname-input">
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-lastname-input">Faculty Last Name:</label> <label for="course-faculty-lastname-input">Faculty Last Name:</label>
<div class="field"> <div class="field">
<input type="text" class="long" id="course-faculty-lastname-input"> <input type="text" class="long" id="course-faculty-lastname-input">
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-photo-input">Faculty Photo</label> <label for="course-faculty-photo-input">Faculty Photo</label>
<div class="field"> <div class="field">
<div class="input input-existing"> <div class="input input-existing">
...@@ -329,7 +329,7 @@ ...@@ -329,7 +329,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-bio-input">Faculty Bio:</label> <label for="course-faculty-bio-input">Faculty Bio:</label>
<div class="field"> <div class="field">
<textarea class="long tall edit-box tinymce" id="course-faculty-bio-input"></textarea> <textarea class="long tall edit-box tinymce" id="course-faculty-bio-input"></textarea>
...@@ -341,21 +341,21 @@ ...@@ -341,21 +341,21 @@
</li> </li>
<li class="input multi course-faculty-list-item"> <li class="input multi course-faculty-list-item">
<div class="row"> <div class="row row-col2">
<label for="course-faculty-firstname-input">Faculty First Name:</label> <label for="course-faculty-firstname-input">Faculty First Name:</label>
<div class="field"> <div class="field">
<input type="text" class="long" id="course-faculty-firstname-input"> <input type="text" class="long" id="course-faculty-firstname-input">
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-lastname-input">Faculty Last Name:</label> <label for="course-faculty-lastname-input">Faculty Last Name:</label>
<div class="field"> <div class="field">
<input type="text" class="long" id="course-faculty-lastname-input"> <input type="text" class="long" id="course-faculty-lastname-input">
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-photo-input">Faculty Photo</label> <label for="course-faculty-photo-input">Faculty Photo</label>
<div class="field"> <div class="field">
<div class="input"> <div class="input">
...@@ -367,7 +367,7 @@ ...@@ -367,7 +367,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row row-col2">
<label for="course-faculty-bio-input">Faculty Bio:</label> <label for="course-faculty-bio-input">Faculty Bio:</label>
<div class="field"> <div class="field">
<div clas="input"> <div clas="input">
...@@ -614,20 +614,29 @@ ...@@ -614,20 +614,29 @@
<div class="field"> <div class="field">
<div class="input input-radio"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-general-randomization" id="problems-general-randomization-always" value="Always"> <input checked="checked" type="radio" name="problems-general-randomization" id="problems-general-randomization-always" value="Always">
<label for="problems-general-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span> <div class="copy">
<label for="problems-general-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-general-randomization" id="problems-general-randomization-never" value="Never"> <input type="radio" name="problems-general-randomization" id="problems-general-randomization-never" value="Never">
<label for="problems-general-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> <div class="copy">
<label for="problems-general-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-general-randomization" id="problems-general-randomization-perstudent" value="Per Student"> <input type="radio" name="problems-general-randomization" id="problems-general-randomization-perstudent" value="Per Student">
<label for="problems-general-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span> <div class="copy">
<label for="problems-general-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -635,17 +644,23 @@ ...@@ -635,17 +644,23 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Show Answers:</h4> <h4 class="label">Show Answers:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-general-showanswer" id="problems-general-showanswer-always" value="Always"> <input checked="checked" type="radio" name="problems-general-showanswer" id="problems-general-showanswer-always" value="Always">
<label for="problems-general-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span> <div class="copy">
<label for="problems-general-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-general-showanswer" id="problems-general-showanswer-never" value="Never"> <input type="radio" name="problems-general-showanswer" id="problems-general-showanswer-never" value="Never">
<label for="problems-general-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span> <div class="copy">
<label for="problems-general-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -671,23 +686,32 @@ ...@@ -671,23 +686,32 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Problem Randomization:</h4> <h4 class="label">Problem Randomization:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-always" value="Always"> <input checked="checked" type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-always" value="Always">
<label for="problems-lessonexercises-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span> <div class="copy">
<label for="problems-lessonexercises-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-never" value="Never"> <input type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-never" value="Never">
<label for="problems-lessonexercises-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> <div class="copy">
<label for="problems-lessonexercises-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-perstudent" value="Per Student"> <input type="radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-perstudent" value="Per Student">
<label for="problems-lessonexercises-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span> <div class="copy">
<label for="problems-lessonexercises-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -695,17 +719,23 @@ ...@@ -695,17 +719,23 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Show Answers:</h4> <h4 class="label">Show Answers:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-always" value="Always"> <input checked="checked" type="radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-always" value="Always">
<label for="problems-lessonexercises-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span> <div class="copy">
<label for="problems-lessonexercises-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-never" value="Never"> <input type="radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-never" value="Never">
<label for="problems-lessonexercises-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span> <div class="copy">
<label for="problems-lessonexercises-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -731,23 +761,32 @@ ...@@ -731,23 +761,32 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Problem Randomization:</h4> <h4 class="label">Problem Randomization:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-labs-randomization" id="problems-labs-randomization-always" value="Always"> <input checked="checked" type="radio" name="problems-labs-randomization" id="problems-labs-randomization-always" value="Always">
<label for="problems-labs-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span> <div class="copy">
<label for="problems-labs-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-labs-randomization" id="problems-labs-randomization-never" value="Never"> <input type="radio" name="problems-labs-randomization" id="problems-labs-randomization-never" value="Never">
<label for="problems-labs-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> <div class="copy">
<label for="problems-labs-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-labs-randomization" id="problems-labs-randomization-perstudent" value="Per Student"> <input type="radio" name="problems-labs-randomization" id="problems-labs-randomization-perstudent" value="Per Student">
<label for="problems-labs-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span> <div class="copy">
<label for="problems-labs-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -755,17 +794,23 @@ ...@@ -755,17 +794,23 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Show Answers:</h4> <h4 class="label">Show Answers:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-labs-showanswer" id="problems-labs-showanswer-always" value="Always"> <input checked="checked" type="radio" name="problems-labs-showanswer" id="problems-labs-showanswer-always" value="Always">
<label for="problems-labs-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span> <div class="copy">
<label for="problems-labs-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-labs-showanswer" id="problems-labs-showanswer-never" value="Never"> <input type="radio" name="problems-labs-showanswer" id="problems-labs-showanswer-never" value="Never">
<label for="problems-labs-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span> <div class="copy">
<label for="problems-labs-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -791,23 +836,32 @@ ...@@ -791,23 +836,32 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Problem Randomization:</h4> <h4 class="label">Problem Randomization:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-exams-randomization" id="problems-exams-randomization-always" value="Aways"> <input checked="checked" type="radio" name="problems-exams-randomization" id="problems-exams-randomization-always" value="Aways">
<label for="problems-exams-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span> <div class="copy">
<label for="problems-exams-randomization-always">Always</label>
<span class="tip tip-stacked"><strong>randomize all</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-exams-randomization" id="problems-exams-randomization-never" value="Never"> <input type="radio" name="problems-exams-randomization" id="problems-exams-randomization-never" value="Never">
<label for="problems-exams-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> <div class="copy">
<label for="problems-exams-randomization-never">Never</label>
<span class="tip tip-stacked"><strong>do not randomize</strong> problems</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-exams-randomization" id="problems-exams-randomization-perstudent" value="Per Student"> <input type="radio" name="problems-exams-randomization" id="problems-exams-randomization-perstudent" value="Per Student">
<label for="problems-exams-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span> <div class="copy">
<label for="problems-exams-randomization-perstudent">Per Student</label>
<span class="tip tip-stacked">randomize problems <strong>per student</strong></span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -815,17 +869,23 @@ ...@@ -815,17 +869,23 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Show Answers:</h4> <h4 class="label">Show Answers:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="problems-exams-showanswer" id="problems-exams-showanswer-always" value="Always"> <input checked="checked" type="radio" name="problems-exams-showanswer" id="problems-exams-showanswer-always" value="Always">
<label for="problems-exams-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span> <div class="copy">
<label for="problems-exams-showanswer-always">Always</label>
<span class="tip tip-stacked">Answers will be shown after the number of attempts has been met</span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input type="radio" name="problems-exams-showanswer" id="problems-exams-showanswer-never" value="Never"> <input type="radio" name="problems-exams-showanswer" id="problems-exams-showanswer-never" value="Never">
<label for="problems-exams-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span> <div class="copy">
<label for="problems-exams-showanswer-never">Never</label>
<span class="tip tip-stacked">Answers will never be shown, regardless of attempts</span>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -855,17 +915,23 @@ ...@@ -855,17 +915,23 @@
<div class="row row-col2"> <div class="row row-col2">
<h4 class="label">Anonymous Discussions:</h4> <h4 class="label">Anonymous Discussions:</h4>
<div class="field ui-status"> <div class="field">
<div class="input"> <div class="input input-radio">
<input type="radio" name="discussions-anonymous" id="discussions-anonymous-allow" value="Allow"> <input type="radio" name="discussions-anonymous" id="discussions-anonymous-allow" value="Allow">
<label for="discussions-anonymous-allow">Allow</label>
<span class="tip tip-stacked">Students and faculty <strong>will be able to post anonymously</strong></span> <div class="copy">
<label for="discussions-anonymous-allow">Allow</label>
<span class="tip tip-stacked">Students and faculty <strong>will be able to post anonymously</strong></span>
</div>
</div> </div>
<div class="input"> <div class="input input-radio">
<input checked="checked" type="radio" name="discussions-anonymous" id="discussions-anonymous-dontallow" value="Do Not Allow"> <input checked="checked" type="radio" name="discussions-anonymous" id="discussions-anonymous-dontallow" value="Do Not Allow">
<label for="discussions-anonymous-dontallow">Do not allow</label>
<span class="tip tip-stacked"><strong>Posting anonymously is not allowed</strong>. Any previous anonymous posts <strong>will be reverted to non-anonymous</strong></span> <div class="copy">
<label for="discussions-anonymous-dontallow">Do not allow</label>
<span class="tip tip-stacked"><strong>Posting anonymously is not allowed</strong>. Any previous anonymous posts <strong>will be reverted to non-anonymous</strong></span>
</div>
</div> </div>
</div> </div>
</section><!-- .settings-discussions-general --> </section><!-- .settings-discussions-general -->
......
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