From 9871050f948a626a3811de1d89fca54f1b5e2415 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 13 Aug 2012 15:20:06 -0400 Subject: [PATCH 1/6] started gradebook --- lms/static/sass/course/_gradebook.scss | 123 ++++++++++++++++++++++++- lms/templates/gradebook.html | 102 +++++++++++--------- 2 files changed, 183 insertions(+), 42 deletions(-) diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index b94f5de178..f10900b235 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -4,8 +4,129 @@ div.gradebook-wrapper { section.gradebook-content { @extend .content; + .student-table { + float: left; + width: 265px; + border-radius: 3px 0 0 3px; + color: #3c3c3c; + + th { + height: 50px; + } + + tr:first-child td { + border-top-width: 1px; + } + + td { + height: 50px; + padding-left: 20px; + border: 1px solid #e9e9e9; + border-width: 0 1px 1px 1px; + background: #f6f6f6; + font-size: 13px; + line-height: 50px; + } + + tr:nth-child(even) td { + background-color: #fbfbfb; + } + } + + .grades { + position: relative; + float: left; + width: 800px; + height: 712px; + overflow: hidden; + } + + .grade-table { + position: absolute; + top: 0; + left: 0; + width: 1000px; + cursor: move; + -webkit-transition: left .7s ease-in-out; + -webkit-user-select: none; + user-select: none; + + td, + th { + width: 50px; + text-align: center; + } + + thead th { + height: 50px; + background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2); + font-size: 10px; + line-height: 10px; + font-weight: bold; + text-align: center; + box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset; + + &:after { + content: ''; + position: absolute; + right: 0; + top: 0; + z-index: 9999; + width: 1px; + height: 50px; + @includ linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + } + + &:first-child { + border-radius: 3px 0 0 0; + box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + } + + &:last-child { + border-radius: 0 3px 0 0; + box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; + } + + .assignment { + margin: 9px 0; + } + + .type, + .number, + .max { + display: block; + } + + .max { + height: 12px; + background: -webkit-linear-gradient(top, #c6c6c6, #bababa); + font-size: 9px; + line-height: 12px; + color: #fff; + } + } + + tr:first-child td { + border-top: 1px solid #e9e9e9; + } + + td { + height: 50px; + border-bottom: 1px solid #e9e9e9; + background: #f6f6f6; + font-size: 13px; + line-height: 50px; + } + + tr:nth-child(even) td { + background-color: #fbfbfb; + } + } + h1 { @extend .top-header; } } -} \ No newline at end of file +} + + diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index a4a81a6868..02d32ba865 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -6,6 +6,7 @@ + <%block name="headextra"> @@ -28,49 +29,68 @@

Gradebook

- %if len(students) > 0: - - <% - templateSummary = students[0]['grade_summary'] - %> - - - - - %for section in templateSummary['section_breakdown']: - +
Student${section['label']}
+ + + + + + + %for student in students: + + + %endfor - - - - <%def name="percent_data(fraction)"> - <% - letter_grade = 'None' - if fraction > 0: - letter_grade = 'F' - for grade in ['A', 'B', 'C']: - if fraction >= course.grade_cutoffs[grade]: - letter_grade = grade - break - - data_class = "grade_" + letter_grade - %> - - - - %for student in students: - - - %for section in student['grade_summary']['section_breakdown']: - ${percent_data( section['percent'] )} - %endfor - - - %endfor +
+ ${student['username']} +
Total
${ "{0:.0f}".format( 100 * fraction ) }
- ${student['username']}${percent_data( student['grade_summary']['percent'])}
+ + + + %if len(students) > 0: +
+ + <% + templateSummary = students[0]['grade_summary'] + %> + + + %for section in templateSummary['section_breakdown']: + + %endfor + + + + + <%def name="percent_data(fraction)"> + <% + letter_grade = 'None' + if fraction > 0: + letter_grade = 'F' + for grade in ['A', 'B', 'C']: + if fraction >= course.grade_cutoffs[grade]: + letter_grade = grade + break + + data_class = "grade_" + letter_grade + %> + + + + + %for student in students: + + %for section in student['grade_summary']['section_breakdown']: + ${percent_data( section['percent'] )} + %endfor + + + %endfor + +
${section['label']}Total
${ "{0:.0f}".format( 100 * fraction ) }
${percent_data( student['grade_summary']['percent'])}
+
+ %endif
From defa5b31597e9c2eccdd4d35d97ac75a03593599 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Mon, 13 Aug 2012 17:18:16 -0400 Subject: [PATCH 2/6] basic gradebook template built; basic scroll functionality built --- lms/static/js/jquery.gradebook.js | 49 ++++++++++++++++++++++++++ lms/static/sass/course/_gradebook.scss | 26 ++++++++++---- lms/templates/gradebook.html | 9 ++++- 3 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 lms/static/js/jquery.gradebook.js diff --git a/lms/static/js/jquery.gradebook.js b/lms/static/js/jquery.gradebook.js new file mode 100644 index 0000000000..087cb01da7 --- /dev/null +++ b/lms/static/js/jquery.gradebook.js @@ -0,0 +1,49 @@ +/* +var $gradebook; + +$(document).ready(function() { + console.log('gradebook'); +}); +*/ + + + + +var Gradebook = function($element) { + var _this = this; + _this.$element = $element; + _this.$grades = $element.find('.grade-table'); + _this.maxScroll = _this.$grades.width() - _this.$element.find('.grades').width(); + _this.body = $('body'); + + _this.startDrag = function(e) { + _this.mouseOrigin = e.pageX; + _this.tableOrigin = _this.$grades.position().left; + _this.body.bind('mousemove', _this.moveDrag); + _this.body.bind('mouseup', _this.stopDrag); + }; + + _this.moveDrag = function(e) { + var offset = e.pageX - _this.mouseOrigin; + var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0); + + console.log(offset); + + _this.$grades.css({ + 'left': targetLeft + 'px' + }) + }; + + _this.stopDrag = function(e) { + _this.body.unbind('mousemove', _this.moveDrag); + _this.body.unbind('mouseup', _this.stopDrag); + }; + + _this.clamp = function(val, min, max) { + if(val > max) return max; + if(val < min) return min; + return val; + } + + _this.$element.bind('mousedown', _this.startDrag); +} \ No newline at end of file diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index f10900b235..438af58e4a 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -15,14 +15,20 @@ div.gradebook-wrapper { } tr:first-child td { - border-top-width: 1px; + border-top: 1px solid #c8c8c8; + border-radius: 5px 0 0 0; + } + + tr:last-child td { + border-bottom: 1px solid #c8c8c8; + border-radius: 0 0 0 5px; } td { height: 50px; padding-left: 20px; - border: 1px solid #e9e9e9; - border-width: 0 1px 1px 1px; + border-bottom: 1px solid #e9e9e9; + border-left: 1px solid #c8c8c8; background: #f6f6f6; font-size: 13px; line-height: 50px; @@ -47,7 +53,7 @@ div.gradebook-wrapper { left: 0; width: 1000px; cursor: move; - -webkit-transition: left .7s ease-in-out; + -webkit-transition: none; -webkit-user-select: none; user-select: none; @@ -68,17 +74,19 @@ div.gradebook-wrapper { &:after { content: ''; + display: block; position: absolute; right: 0; top: 0; z-index: 9999; width: 1px; height: 50px; - @includ linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .4)); + background: #000; + } &:first-child { - border-radius: 3px 0 0 0; + border-radius: 5px 0 0 0; box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; } @@ -107,7 +115,11 @@ div.gradebook-wrapper { } tr:first-child td { - border-top: 1px solid #e9e9e9; + border-top: 1px solid #c8c8c8; + } + + tr:last-child td { + border-bottom: 1px solid #c8c8c8; } td { diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index 02d32ba865..812141c44c 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -6,7 +6,7 @@ - + <%block name="headextra"> @@ -95,3 +95,10 @@ + + + \ No newline at end of file From d673895eaaff73eddeb7a410188bf22274293e53 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 14 Aug 2012 11:17:08 -0400 Subject: [PATCH 3/6] added drag functionality --- lms/static/images/search-icon.png | Bin 0 -> 1195 bytes lms/static/js/jquery.gradebook.js | 77 ++++++++++++-------- lms/static/sass/course/_gradebook.scss | 94 ++++++++++++++++++++----- lms/templates/gradebook.html | 19 +++-- 4 files changed, 135 insertions(+), 55 deletions(-) create mode 100644 lms/static/images/search-icon.png diff --git a/lms/static/images/search-icon.png b/lms/static/images/search-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..22b0d2d3c2fd1d71deff2514d3a2620f0f963cfc GIT binary patch literal 1195 zcmeAS@N?(olHy`uVBq!ia0vp^{2c-mj#PnPRIHZt82`Ti~3Uk?B!Ylp0*+7m{3+ootz+WN)WnQ(*-(AUCxn zQK2F?C$HG5!d3}vt`(3C64qBz04piUwpD^SD#ABF!8yMuRl!uxSU1_g&``n5OwZ87 z)XdCKN5ROz&`93^h|F{iO{`4Ktc=VRpg;*|TTx1yRgjAt)Gi>;Rw<*Tq`*pFzr4I$ zuiRKKzbIYb(9+TpWQLKEE>MMTab;dfVufyAu`f(~1RD^r68eAMwS&*t9 zlvO-#2=9ZF3nBND}m`vLFhHbsTY(OatnYqyQCInmZhe+73JqDfIV%MiQ6qkIL(9V zO~LIJW1M>RfsWA!MJ-ZP!-Rn82gHOYTp$OY^i%VI>AeV;u&WmoN-{7o%6hsuhE&{| za(RCilcNCJhfu#O6QT9uUFr4R$i&$zJJhYhBJHJ8-v}Ozo)-x%}RgTpUyAxFaB~GFvwe56((&}bO99~p00i_>zopr E0DJ(O)c^nh literal 0 HcmV?d00001 diff --git a/lms/static/js/jquery.gradebook.js b/lms/static/js/jquery.gradebook.js index 087cb01da7..f674a42976 100644 --- a/lms/static/js/jquery.gradebook.js +++ b/lms/static/js/jquery.gradebook.js @@ -1,49 +1,66 @@ -/* -var $gradebook; - -$(document).ready(function() { - console.log('gradebook'); -}); -*/ - var Gradebook = function($element) { var _this = this; - _this.$element = $element; - _this.$grades = $element.find('.grade-table'); - _this.maxScroll = _this.$grades.width() - _this.$element.find('.grades').width(); - _this.body = $('body'); + var $element = $element; + var $grades = $element.find('.grades'); + var $gradeTable = $element.find('.grade-table'); + var $leftShadow = $('
'); + var $rightShadow = $('
'); + var tableHeight = $gradeTable.height(); + var maxScroll = $gradeTable.width() - $element.find('.grades').width(); + var $body = $('body'); + var mouseOrigin; + var tableOrigin; - _this.startDrag = function(e) { - _this.mouseOrigin = e.pageX; - _this.tableOrigin = _this.$grades.position().left; - _this.body.bind('mousemove', _this.moveDrag); - _this.body.bind('mouseup', _this.stopDrag); + var startDrag = function(e) { + mouseOrigin = e.pageX; + tableOrigin = $gradeTable.position().left; + $body.bind('mousemove', moveDrag); + $body.bind('mouseup', stopDrag); }; - _this.moveDrag = function(e) { - var offset = e.pageX - _this.mouseOrigin; - var targetLeft = _this.clamp(_this.tableOrigin + offset, -_this.maxScroll, 0); + var moveDrag = function(e) { + var offset = e.pageX - mouseOrigin; + var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0); - console.log(offset); - - _this.$grades.css({ + $gradeTable.css({ 'left': targetLeft + 'px' - }) + }); + + setShadows(targetLeft); }; - _this.stopDrag = function(e) { - _this.body.unbind('mousemove', _this.moveDrag); - _this.body.unbind('mouseup', _this.stopDrag); + var stopDrag = function(e) { + $body.unbind('mousemove', moveDrag); + $body.unbind('mouseup', stopDrag); }; - _this.clamp = function(val, min, max) { + var setShadows = function(left) { + var padding = 30; + + if(left > -padding) { + var percent = -left / padding; + $leftShadow.css('opacity', percent); + } + + if(left < -maxScroll + padding) { + var percent = (maxScroll + left) / padding; + $rightShadow.css('opacity', percent); + } + }; + + var clamp = function(val, min, max) { if(val > max) return max; if(val < min) return min; return val; - } + }; - _this.$element.bind('mousedown', _this.startDrag); + $leftShadow.css('height', tableHeight + 'px'); + $rightShadow.css('height', tableHeight + 'px'); + $grades.append($leftShadow).append($rightShadow); + setShadows(0); + $grades.css('height', tableHeight); + $gradeTable.bind('mousedown', startDrag); } \ No newline at end of file diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 438af58e4a..e0f11bda83 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -1,12 +1,43 @@ +$cell-border-color: #e1e1e1; +$table-border-color: #c8c8c8; + div.gradebook-wrapper { @extend .table-wrapper; section.gradebook-content { @extend .content; + .student-search { + padding: 0 15px; + } + + .student-search-field { + width: 230px; + height: 27px; + padding: 0 15px; + box-sizing: border-box; + border-radius: 13px; + border: 1px solid $table-border-color; + background: url(../images/search-icon.png) no-repeat 205px center #f6f6f6; + font-family: $sans-serif; + font-size: 11px; + @include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset); + outline: none; + @include transition(border-color .15s); + + &::-webkit-input-placeholder, + &::-moz-input-placeholder { + font-style: italic; + } + + &:focus { + border-color: #1d9dd9; + } + } + .student-table { float: left; - width: 265px; + width: 264px; border-radius: 3px 0 0 3px; color: #3c3c3c; @@ -15,20 +46,20 @@ div.gradebook-wrapper { } tr:first-child td { - border-top: 1px solid #c8c8c8; + border-top: 1px solid $table-border-color; border-radius: 5px 0 0 0; } tr:last-child td { - border-bottom: 1px solid #c8c8c8; + border-bottom: 1px solid $table-border-color; border-radius: 0 0 0 5px; } td { height: 50px; padding-left: 20px; - border-bottom: 1px solid #e9e9e9; - border-left: 1px solid #c8c8c8; + border-bottom: 1px solid $cell-border-color; + border-left: 1px solid $table-border-color; background: #f6f6f6; font-size: 13px; line-height: 50px; @@ -43,8 +74,26 @@ div.gradebook-wrapper { position: relative; float: left; width: 800px; - height: 712px; overflow: hidden; + + .left-shadow, + .right-shadow { + position: absolute; + top: 0; + z-index: 9999; + width: 20px; + pointer-events: none; + } + + .left-shadow { + left: 0; + background: -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + } + + .right-shadow { + right: 0; + background: -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + } } .grade-table { @@ -64,35 +113,39 @@ div.gradebook-wrapper { } thead th { + position: relative; height: 50px; - background: -webkit-linear-gradient(top, #e9e9e9, #e2e2e2); + background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2); font-size: 10px; line-height: 10px; font-weight: bold; text-align: center; - box-shadow: 0 1px 0 #c8c8c8 inset, 0 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; - &:after { + &:before { content: ''; display: block; position: absolute; - right: 0; + left: 0; top: 0; z-index: 9999; width: 1px; - height: 50px; - background: #000; - + height: 100%; + background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15)); } &:first-child { border-radius: 5px 0 0 0; - box-shadow: 1px 1px 0 #c8c8c8 inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: 1px 1px 0 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; + + &:before { + display: hidden; + } } &:last-child { border-radius: 0 3px 0 0; - box-shadow: -1px 1px 0 #c8c8c8 inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; + box-shadow: -1px 1px 0 $table-border-color inset, -1px 2px 0 rgba(255, 255, 255, .7) inset; } .assignment { @@ -114,20 +167,25 @@ div.gradebook-wrapper { } } + tr { + border-right: 1px solid $table-border-color; + } + tr:first-child td { - border-top: 1px solid #c8c8c8; + border-top: 1px solid $table-border-color; } tr:last-child td { - border-bottom: 1px solid #c8c8c8; + border-bottom: 1px solid $table-border-color; } td { height: 50px; - border-bottom: 1px solid #e9e9e9; + border-bottom: 1px solid $cell-border-color; background: #f6f6f6; font-size: 13px; line-height: 50px; + border-left: 1px solid $cell-border-color; } tr:nth-child(even) td { diff --git a/lms/templates/gradebook.html b/lms/templates/gradebook.html index 812141c44c..787fc23c9a 100644 --- a/lms/templates/gradebook.html +++ b/lms/templates/gradebook.html @@ -20,6 +20,12 @@ .grade_None {color:LightGray;} + + <%include file="course_navigation.html" args="active_page=''" /> @@ -32,7 +38,11 @@ - + @@ -84,7 +94,7 @@ %for section in student['grade_summary']['section_breakdown']: ${percent_data( section['percent'] )} %endfor - + %endfor @@ -97,8 +107,3 @@ - \ No newline at end of file From dd92f51f027b1c772496f6b588d36d0c662c1475 Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 14 Aug 2012 11:38:02 -0400 Subject: [PATCH 4/6] added fluid widths --- lms/static/js/jquery.gradebook.js | 36 ++++++++++++++++---------- lms/static/sass/course/_gradebook.scss | 15 ++++++----- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/lms/static/js/jquery.gradebook.js b/lms/static/js/jquery.gradebook.js index f674a42976..187e58189f 100644 --- a/lms/static/js/jquery.gradebook.js +++ b/lms/static/js/jquery.gradebook.js @@ -9,7 +9,7 @@ var Gradebook = function($element) { var $leftShadow = $('
'); var $rightShadow = $('
'); var tableHeight = $gradeTable.height(); - var maxScroll = $gradeTable.width() - $element.find('.grades').width(); + var maxScroll = $gradeTable.width() - $grades.width(); var $body = $('body'); var mouseOrigin; var tableOrigin; @@ -17,6 +17,7 @@ var Gradebook = function($element) { var startDrag = function(e) { mouseOrigin = e.pageX; tableOrigin = $gradeTable.position().left; + $body.css('-webkit-user-select', 'none'); $body.bind('mousemove', moveDrag); $body.bind('mouseup', stopDrag); }; @@ -25,14 +26,13 @@ var Gradebook = function($element) { var offset = e.pageX - mouseOrigin; var targetLeft = clamp(tableOrigin + offset, -maxScroll, 0); - $gradeTable.css({ - 'left': targetLeft + 'px' - }); + updateHorizontalPosition(targetLeft); setShadows(targetLeft); }; var stopDrag = function(e) { + $body.css('-webkit-user-select', 'auto'); $body.unbind('mousemove', moveDrag); $body.unbind('mouseup', stopDrag); }; @@ -40,15 +40,11 @@ var Gradebook = function($element) { var setShadows = function(left) { var padding = 30; - if(left > -padding) { - var percent = -left / padding; - $leftShadow.css('opacity', percent); - } - - if(left < -maxScroll + padding) { - var percent = (maxScroll + left) / padding; - $rightShadow.css('opacity', percent); - } + var leftPercent = clamp(-left / padding, 0, 1); + $leftShadow.css('opacity', leftPercent); + + var rightPercent = clamp((maxScroll + left) / padding, 0, 1); + $rightShadow.css('opacity', rightPercent); }; var clamp = function(val, min, max) { @@ -57,10 +53,24 @@ var Gradebook = function($element) { return val; }; + var updateWidths = function(e) { + maxScroll = $gradeTable.width() - $grades.width(); + var targetLeft = clamp($gradeTable.position().left, -maxScroll, 0); + updateHorizontalPosition(targetLeft); + setShadows(targetLeft); + } + + var updateHorizontalPosition = function(left) { + $gradeTable.css({ + 'left': left + 'px' + }); + } + $leftShadow.css('height', tableHeight + 'px'); $rightShadow.css('height', tableHeight + 'px'); $grades.append($leftShadow).append($rightShadow); setShadows(0); $grades.css('height', tableHeight); $gradeTable.bind('mousedown', startDrag); + $(window).bind('resize', updateWidths); } \ No newline at end of file diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index e0f11bda83..2b6a5f2835 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -8,17 +8,17 @@ div.gradebook-wrapper { @extend .content; .student-search { - padding: 0 15px; + padding: 0 20px 0 15px; } .student-search-field { - width: 230px; + width: 100%; height: 27px; - padding: 0 15px; + padding: 0 15px 0 35px; box-sizing: border-box; border-radius: 13px; border: 1px solid $table-border-color; - background: url(../images/search-icon.png) no-repeat 205px center #f6f6f6; + background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; font-family: $sans-serif; font-size: 11px; @include box-shadow(0 1px 4px rgba(0, 0, 0, .12) inset); @@ -37,7 +37,8 @@ div.gradebook-wrapper { .student-table { float: left; - width: 264px; + // width: 264px; + width: 24%; border-radius: 3px 0 0 3px; color: #3c3c3c; @@ -73,7 +74,7 @@ div.gradebook-wrapper { .grades { position: relative; float: left; - width: 800px; + width: 76%; overflow: hidden; .left-shadow, @@ -115,7 +116,7 @@ div.gradebook-wrapper { thead th { position: relative; height: 50px; - background: -webkit-linear-gradient(top, $cell-border-color, #e2e2e2); + background: -webkit-linear-gradient(top, $cell-border-color, #ddd); font-size: 10px; line-height: 10px; font-weight: bold; From 5aefda8d510736377ee50aa8ea3b2c0de3ebd67e Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 14 Aug 2012 11:43:59 -0400 Subject: [PATCH 5/6] modified zebra stripes --- lms/static/sass/course/_gradebook.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 2b6a5f2835..cd3205149c 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -61,12 +61,12 @@ div.gradebook-wrapper { padding-left: 20px; border-bottom: 1px solid $cell-border-color; border-left: 1px solid $table-border-color; - background: #f6f6f6; + background: #f3f3f3; font-size: 13px; line-height: 50px; } - tr:nth-child(even) td { + tr:nth-child(odd) td { background-color: #fbfbfb; } } @@ -183,13 +183,13 @@ div.gradebook-wrapper { td { height: 50px; border-bottom: 1px solid $cell-border-color; - background: #f6f6f6; + background: #f3f3f3; font-size: 13px; line-height: 50px; border-left: 1px solid $cell-border-color; } - tr:nth-child(even) td { + tr:nth-child(odd) td { background-color: #fbfbfb; } } From a58a0475821a0c4926dbf299d88b6790997d968c Mon Sep 17 00:00:00 2001 From: Tom Giannattasio Date: Tue, 14 Aug 2012 15:11:10 -0400 Subject: [PATCH 6/6] moved global nav class --- lms/static/sass/course.scss | 2 +- lms/static/sass/course/base/_extends.scss | 26 ------ .../course/layout/_courseware_header.scss | 85 +++++++++++++++++++ 3 files changed, 86 insertions(+), 27 deletions(-) create mode 100644 lms/static/sass/course/layout/_courseware_header.scss diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index c874076a31..d3a74cb91b 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -10,7 +10,7 @@ @import 'shared/tooltips'; // Course base / layout styles -@import 'course/layout/courseware_subnav'; +@import 'course/layout/courseware_header'; @import 'course/base/base'; @import 'course/base/extends'; @import 'module/module-styles.scss'; diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index c5e61f593e..04eaf73094 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -173,29 +173,3 @@ h1.top-header { @include transition( all, .2s, $ease-in-out-quad); } -.global { - .find-courses-button { - display: none; - } - - h2 { - display: block; - float: left; - font-size: 0.9em; - font-weight: 600; - letter-spacing: 0; - line-height: 40px; - overflow: hidden; - text-overflow: ellipsis; - text-shadow: 0 1px 0 #fff; - text-transform: none; - white-space: nowrap; - width: 700px; - - .provider { - font: inherit; - font-weight: bold; - color: #6d6d6d; - } - } -} diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss new file mode 100644 index 0000000000..dfa30b43a0 --- /dev/null +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -0,0 +1,85 @@ +nav.course-material { + @include clearfix; + @include box-sizing(border-box); + background: #f6f6f6; + border-bottom: 1px solid rgb(200,200,200); + margin: 0px auto 0px; + padding: 0px; + width: 100%; + + .inner-wrapper { + margin: 0 auto; + max-width: 1200px; + width: flex-grid(12); + } + + ol.course-tabs { + @include border-top-radius(4px); + @include clearfix; + padding: 10px 0 0 0; + + li { + float: left; + list-style: none; + + a { + color: darken($lighter-base-font-color, 20%); + display: block; + text-align: center; + padding: 8px 13px 12px; + font-size: 14px; + font-weight: 400; + text-decoration: none; + text-shadow: 0 1px rgb(255,255,255); + + &:hover { + color: $base-font-color; + } + + &.active { + background: rgb(255,255,255); + border: 1px solid rgb(200,200,200); + border-bottom: 0px; + @include border-top-radius(4px); + @include box-shadow(0 2px 0 0 rgba(255,255,255, 1)); + color: $blue; + } + } + } + } +} + +.course-content { + margin-top: 30px; + + .courseware { + min-height: 300px; + } +} + +.global { + .find-courses-button { + display: none; + } + + h2 { + display: block; + width: 700px; + float: left; + font-size: 0.9em; + font-weight: 600; + line-height: 40px; + letter-spacing: 0; + text-transform: none; + text-shadow: 0 1px 0 #fff; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + .provider { + font: inherit; + font-weight: bold; + color: #6d6d6d; + } + } +} \ No newline at end of file
+
+ +
+
${percent_data( student['grade_summary']['percent'])}${percent_data( student['grade_summary']['percent'])}