From 1a297674cedba64ff9b37f8bfd92ec1bdabfd19f Mon Sep 17 00:00:00 2001 From: Brian Talbot <btalbot@btalbot.local> Date: Thu, 15 Nov 2012 14:31:16 -0500 Subject: [PATCH] added in fields for problems and discussions portions of CMS settings --- cms/static/sass/_settings.scss | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----- cms/static/sass/_variables.scss | 1 + cms/templates/settings.html | 356 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------ 3 files changed, 457 insertions(+), 29 deletions(-) diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss index 40d9919..a809c76 100644 --- a/cms/static/sass/_settings.scss +++ b/cms/static/sass/_settings.scss @@ -152,6 +152,74 @@ font-size: 13px; } + .field.ui-status { + + > .input { + display: block !important; + margin-bottom: 15px; + } + + .ui-status-input-checkbox, .ui-status-input-radio { + position: absolute; + top: -9999px; + left: -9999px; + } + + label { + cursor: pointer; + } + + .ui-status-input-checkbox ~ label, .ui-status-input-radio ~ label { + display: inline-block; + margin: 0 0 0 5px; + color: $offBlack; + opacity: 0.50; + cursor: pointer; + @include transition(opacity 0.25s ease-in-out); + + &:after { + content: "(Off)"; + display: inline-block; + margin-left: 10px; + } + + ~ .tip { + margin-top: 0; + @include transition(color 0.25s ease-in-out); + } + } + + .ui-status-indic { + position: relative; + top: 2px; + display: inline-block; + height: 15px; + width: 15px; + border: 2px; + background: $offBlack; + opacity: 0.50; + @include border-radius(50px); + @include box-sizing(border-box); + @include transition(opacity 0.25s ease-in-out); + } + + .ui-status-input-checkbox:checked ~ label, .ui-status-input-radio:checked ~ label { + opacity: 0.99; + + &:after { + content: "(On)"; + } + + ~ .tip { + color: $darkGrey; + } + } + + .ui-status-input-checkbox:checked ~ .ui-status-indic, .ui-status-input-radio:checked ~ .ui-status-indic { + opacity: 0.99; + } + } + .tip { color: $mediumGrey; font-size: 13px; @@ -174,7 +242,6 @@ > label, .label { display: inline-block; vertical-align: top; - width: 200px; } // tips @@ -191,7 +258,7 @@ // structural field, not semantic fields per se .field { display: inline-block; - width: 400px; + width: 100%; > input, > textarea, .input { display: inline-block; @@ -248,7 +315,6 @@ .group { float: left; margin-right: 20px; - width: 170px; &:nth-child(2) { margin-right: 0; @@ -283,6 +349,26 @@ &.enum { } } + + // layout - aligned label/field pairs + &.row-col2 { + + > label, .label { + width: 200px; + } + + .field { + width: 400px; + } + + &.multi-inline { + @include clearfix; + + .group { + width: 170px; + } + } + } } // editing controls - adding @@ -326,7 +412,6 @@ } } - // specific sections .settings-details { @@ -379,10 +464,23 @@ .settings-problems { + > section { + + &.is-shown { + display: block; + } + } } .settings-discussions { - + + } + + .settings-discussions-exceptions, .settings-problems-exceptions { + + p, ul { + font-size: 15px; + } } // states @@ -391,6 +489,27 @@ @include transition(color 1s ease-in-out); } + // extras/abbreviations + // .settings-extras { + + // > header { + // cursor: pointer; + + // &.active { + + // } + // } + + // > div { + // display: none; + // @include transition(display 0.25s ease-in-out); + + // &.is-shown { + // display: block; + // } + // } + // } + // misc .divide { display: none; diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss index fec65e4..a234a0d 100644 --- a/cms/static/sass/_variables.scss +++ b/cms/static/sass/_variables.scss @@ -13,6 +13,7 @@ $body-line-height: golden-ratio(.875em, 1); $pink: rgb(182,37,104); $error-red: rgb(253, 87, 87); +$offBlack: #3c3c3c; $blue: #5597dd; $orange: #edbd3c; $lightGrey: #edf1f5; diff --git a/cms/templates/settings.html b/cms/templates/settings.html index b775367..bbfcbc6 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -26,6 +26,7 @@ $gradeBar = $('.grade-bar'); gradeThresholds = [100, 80, 70]; $('.settings-page-menu a').bind('click', showSettingsTab); + $('.settings-extra header').bind('click', showSettingsExtras); $body.on('mousedown', '.drag-bar', startDragBar); $('.new-grade-button').bind('click', addNewGrade); $body.on('click', '.remove-button', removeGrade); @@ -52,6 +53,12 @@ $(e.target).addClass('is-shown'); } + function showSettingsExtras(e) { + e.preventDefault(); + $(this).toggleClass('active'); + $(this).siblings.toggleClass('is-shown'); + } + function startDragBar(e) { e.preventDefault(); barOrigin = $gradeBar.offset().left; @@ -115,21 +122,21 @@ <span class="detail">The nuts and bolts of your course</span> </header> - <div class="row"> + <div class="row row-col2"> <label for="course-name-input">Course Name:</label> <div class="field"> <input type="text" class="long" id="course-name-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-organization-input">Organization:</label> <div class="field"> <input type="text" class="long" id="course-organization-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-number-input">Course Number:</label> <div class="field"> <div class="input"> @@ -138,7 +145,7 @@ </div> </div> </div> - </section><!-- settings-details-basic --> + </section><!-- .settings-details-basic --> <hr class="divide" /> @@ -148,7 +155,7 @@ <span class="detail">Important steps and segments of your your course</span> </header> - <div class="row"> + <div class="row row-col2"> <label for="course-start-date-input">Course Start Date:</label> <div class="field"> <div class="input"> @@ -158,7 +165,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-end-date-input">Course End Date:</label> <div class="field"> <div class="input"> @@ -168,7 +175,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <h4 class="label">Milestones:</h4> <div class="field enum"> @@ -206,7 +213,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-syllabus-input">Course Syllabus</label> <div class="field"> <div class="input input-existing"> @@ -237,7 +244,7 @@ <span class="detail">Information for perspective students</span> </header> - <div class="row"> + <div class="row row-col2"> <label for="course-overview">Course Overview:</label> <div class="field"> <textarea class="long tall" input="course-overview"></textarea> @@ -245,7 +252,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-shortdescription">Course Statement:</label> <div class="field"> <textarea class="long" id="course-shortdescription"></textarea> @@ -253,7 +260,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-introduction-video">Introduction Video:</label> <div class="field"> <div class="input input-existing"> @@ -285,7 +292,7 @@ <span class="detail">Expectations of the students taking this course</span> </header> - <div class="row"> + <div class="row row-col2"> <label for="course-requirements">Requirements:</label> <div class="field"> <textarea class="long tall" id="course-requirements"></textarea> @@ -293,7 +300,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-effort">Hours of Effort per Week:</label> <div class="field"> <input type="text" class="short" id="course-effort"> @@ -301,7 +308,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <h4 class="label">Textbooks:</h4> <div class="field enum"> @@ -340,7 +347,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <h4 class="label">Prerequisites:</h4> <div class="field enum"> @@ -387,7 +394,7 @@ <span class="detail">Other helpful information about the course</span> </header> - <div class="row"> + <div class="row row-col2"> <h4 class="label">FAQs:</h4> <div class="field enum"> @@ -441,21 +448,21 @@ <div class="field enum"> <ul class="input-list course-faculty-list"> <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> <div class="field"> <input type="text" class="long" id="course-faculty-firstname-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-lastname-input">Faculty Last Name:</label> <div class="field"> <input type="text" class="long" id="course-faculty-lastname-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-photo-input">Faculty Photo</label> <div class="field"> <div class="input"> @@ -478,7 +485,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-bio-input">Faculty Bio:</label> <div class="field"> <textarea class="long tall" id="course-faculty-bio-input"></textarea> @@ -490,21 +497,21 @@ </li> <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> <div class="field"> <input type="text" class="long" id="course-faculty-firstname-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-lastname-input">Faculty Last Name:</label> <div class="field"> <input type="text" class="long" id="course-faculty-lastname-input"> </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-photo-input">Faculty Photo</label> <div class="field"> <div class="input"> @@ -527,7 +534,7 @@ </div> </div> - <div class="row"> + <div class="row row-col2"> <label for="course-faculty-bio-input">Faculty Bio:</label> <div class="field"> <textarea class="long tall" id="course-faculty-bio-input"></textarea> @@ -553,11 +560,312 @@ <section class="settings-problems"> <h2 class="title">Problems</h2> + <section class="settings-problems-general"> + <header> + <h3>General Settings</h3> + <span class="detail">Course-wide settings for all problems</span> + </header> + + <div class="row row-col2"> + <h4 class="label">Problem Randomization:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-general-randomization" id="problems-general-randomization-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-general-randomization"></div> + <label for="problems-general-randomization-always">Always</label> + <span class="tip tip-stacked"><strong>randomize all</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-general-randomization" id="problems-general-randomization-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-general-randomization"></div> + <label for="problems-general-randomization-never">Never</label> + <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-general-randomization" id="problems-general-randomization-perstudent" value="Per Student"> + <div class="ui-status-indic ui-status-indic-problems-general-randomization"></div> + <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 class="row row-col2"> + <h4 class="label">Show Answers:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-general-showanswer" id="problems-general-showanswer-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-general-showanswer"></div> + <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 class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-general-showanswer" id="problems-general-showanswer-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-general-showanswer"></div> + <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 class="row row-col2"> + <label for="problems-general-attempts">Number of Attempts: </label> + + <div class="field"> + <div class="input"> + <input type="text" class="short" id="problems-general-attempts" placeholder="0 or higher" value="0"> + <span class="tip tip-inline">To set infinite atttempts, use "0"</span> + </div> + </div> + </div> + </section><!-- .settings-problems-general --> + + <section class="settings-problems-lessonexercises settings-extras"> + <header> + <h3>Lesson Exercises</h3> + <span class="detail">In-lesson question & problem specific rules</span> + </header> + + <div class="row row-col2"> + <h4 class="label">Problem Randomization:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-lessonexercises-randomization"></div> + <label for="problems-lessonexercises-randomization-always">Always</label> + <span class="tip tip-stacked"><strong>randomize all</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-lessonexercises-randomization"></div> + <label for="problems-lessonexercises-randomization-never">Never</label> + <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-lessonexercises-randomization" id="problems-lessonexercises-randomization-perstudent" value="Per Student"> + <div class="ui-status-indic ui-status-indic-problems-lessonexercises-randomization"></div> + <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 class="row row-col2"> + <h4 class="label">Show Answers:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-lessonexercises-showanswer"></div> + <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 class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-lessonexercises-showanswer" id="problems-lessonexercises-showanswer-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-lessonexercises-showanswer"></div> + <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 class="row row-col2"> + <label for="problems-lessonexercises-attempts">Number of Attempts: </label> + + <div class="field"> + <div class="input"> + <input type="text" class="short" id="problems-lessonexercises-attempts" placeholder="0 or higher" value="0"> + <span class="tip tip-inline">To set infinite atttempts, use "0"</span> + </div> + </div> + </div> + </section><!-- .settings-problems-lessonexercises --> + + <section class="settings-problems-labs settings-extras"> + <header> + <h3>Labs</h3> + <span class="detail">Exploratory assignment-specific rules</span> + </header> + + <div class="row row-col2"> + <h4 class="label">Problem Randomization:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-labs-randomization" id="problems-labs-randomization-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-labs-randomization"></div> + <label for="problems-labs-randomization-always">Always</label> + <span class="tip tip-stacked"><strong>randomize all</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-labs-randomization" id="problems-labs-randomization-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-labs-randomization"></div> + <label for="problems-labs-randomization-never">Never</label> + <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-labs-randomization" id="problems-labs-randomization-perstudent" value="Per Student"> + <div class="ui-status-indic ui-status-indic-problems-labs-randomization"></div> + <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 class="row row-col2"> + <h4 class="label">Show Answers:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-labs-showanswer" id="problems-labs-showanswer-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-labs-showanswer"></div> + <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 class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-labs-showanswer" id="problems-labs-showanswer-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-labs-showanswer"></div> + <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 class="row row-col2"> + <label for="problems-labs-attempts">Number of Attempts: </label> + + <div class="field"> + <div class="input"> + <input type="text" class="short" id="problems-labs-attempts" placeholder="0 or higher" value="0"> + <span class="tip tip-inline">To set infinite atttempts, use "0"</span> + </div> + </div> + </div> + </section><!-- .settings-problems-labs --> + + <section class="settings-problems-exams settings-extras"> + <header> + <h3>Exams</h3> + <span class="detail">Mid-term and final exam-specific rules</span> + </header> + + <div class="row row-col2"> + <h4 class="label">Problem Randomization:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-exams-randomization" id="problems-exams-randomization-always" value="Aways"> + <div class="ui-status-indic ui-status-indic-problems-exams-randomization"></div> + <label for="problems-exams-randomization-always">Always</label> + <span class="tip tip-stacked"><strong>randomize all</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-exams-randomization" id="problems-exams-randomization-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-exams-randomization"></div> + <label for="problems-exams-randomization-never">Never</label> + <span class="tip tip-stacked"><strong>do not randomize</strong> problems</span> + </div> + + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-exams-randomization" id="problems-exams-randomization-perstudent" value="Per Student"> + <div class="ui-status-indic ui-status-indic-problems-exams-randomization"></div> + <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 class="row row-col2"> + <h4 class="label">Show Answers:</h4> + + <div class="field ui-status"> + <div class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="problems-exams-showanswer" id="problems-exams-showanswer-always" value="Always"> + <div class="ui-status-indic ui-status-indic-problems-exams-showanswer"></div> + <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 class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="problems-exams-showanswer" id="problems-exams-showanswer-never" value="Never"> + <div class="ui-status-indic ui-status-indic-problems-exams-showanswer"></div> + <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 class="row row-col2"> + <label for="problems-exams-attempts">Number of Attempts: </label> + + <div class="field"> + <div class="input"> + <input type="text" class="short" id="problems-exams-attempts" placeholder="0 or higher" value="0"> + <span class="tip tip-inline">To set infinite atttempts, use "0"</span> + </div> + </div> + </div> + </section><!-- .settings-problems-exams --> + + <section class="settings-problems-exceptions"> + + </section><!-- .settings-problems-exceptions --> </section><!-- .settings-problems --> <section class="settings-discussions"> <h2 class="title">Discussions</h2> + <section class="settings-discussions-general"> + <header> + <h3>General Settings</h3> + <span class="detail">Course-wide settings for online discussion</span> + </header> + + <div class="row row-col2"> + <h4 class="label">Anonymous Discussions:</h4> + + <div class="field ui-status"> + <div class="input"> + <input type="radio" class="ui-status-input ui-status-input-radio" name="discussions-anonymous" id="discussions-anonymous-allow" value="Allow"> + <div class="ui-status-indic ui-status-indic-discussions-anonymous-allow"></div> + <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 class="input"> + <input checked="checked" type="radio" class="ui-status-input ui-status-input-radio" name="discussions-anonymous" id="discussions-anonymous-dontallow" value="Do Not Allow"> + <div class="ui-status-indic ui-status-indic-discussions-anonymous-dontallow"></div> + <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> + </section><!-- .settings-discussions-general --> + + <section class="settings-discussions-exceptions"> + <header> + <h3>Discussion Settings Elsewhere</h3> + <span class="detail">More specific settings for particular discussions</span> + </header> + + <p>The following discussions have had their settings specified elsewhere and will follow those rules.</p> + + <ul class="settings-discussions-exceptions-list"> + Discussion + </ul> + </section><!-- .settings-discussions-exceptions --> </section><!-- .settings-discussions --> </div> </article> -- libgit2 0.26.0