diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 8c3ab322e2..90b1ff53a4 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -2,18 +2,54 @@ nav.sequence-nav { // TODO (cpennington): This doesn't work anymore. XModules aren't able to // import from external sources. @extend .topbar; - border-bottom: 1px solid $border-color; - @include border-top-right-radius(4px); - margin: 0 0 lh() (-(lh())); + margin: -4px 0 30px; position: relative; + border-bottom: none; + + .left-shadow { + position: absolute; + top: 0; + left: 0; + z-index: 9999; + width: 20px; + height: 46px; + @include linear-gradient(left, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); + background-color: transparent; + pointer-events: none; + } + + .right-shadow { + position: absolute; + top: 0; + right: 0; + z-index: 9999; + width: 20px; + height: 46px; + @include linear-gradient(right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)); + background-color: transparent; + pointer-events: none; + } + + .sequence-list-wrapper { + position: relative; + z-index: 9999; + border: 1px solid #ccc; + height: 44px; + margin: 0 30px; + @include linear-gradient(top, #ddd, #eee); + overflow: hidden; + @include box-shadow(0 1px 3px rgba(0, 0, 0, .1) inset); + } ol { + position: absolute; + top: 0; + left: 0; @include box-sizing(border-box); display: table; height: 100%; margin: 0; - padding-left: 3px; - padding-right: flex-grid(1, 9); + padding: 0 10px; width: 100%; a { @@ -25,42 +61,44 @@ nav.sequence-nav { min-width: 20px; a { - background-position: center; + width: 34px; + height: 34px; + margin: 4px auto; + background-position: center 10px; background-repeat: no-repeat; border: 1px solid transparent; - border-bottom: none; - @include border-radius(3px 3px 0 0); + @include border-radius(35px); cursor: pointer; display: block; - height: 10px; - padding: 15px 0 14px; + padding: 0; position: relative; @include transition(); - width: 100%; &:hover { + background-color: #fff; background-repeat: no-repeat; - background-position: center; - background-color: #F3F3F3; - } - - &.visited { - background-color: #F3F3F3; - - &:hover { - background-position: center center; - } + background-position: center 10px; } &.active { - border-color: $border-color; - @include box-shadow(0 2px 0 #fff); background-color: #fff; z-index: 9; + // &:after { + // content: '▲'; + // position: absolute; + // top: 28px; + // left: 50%; + // z-index: 9999; + // margin-left: -5px; + // font-size: 12px; + // color: #aaa; + // } + &:hover { - background-position: center; background-color: #fff; + background-repeat: no-repeat; + background-position: center 10px; } } @@ -171,20 +209,24 @@ nav.sequence-nav { } ul { + position: absolute; + top: 0; list-style: none; height: 100%; - position: absolute; right: 0; top: 0; - width: flex-grid(1, 9); - border: 1px solid $border-color; - border-bottom: 0; - @include border-radius(3px 3px 0 0); + width: 100%; + margin: 0; + border: none; li { - float: left; + position: absolute; margin-bottom: 0; - width: 50%; + height: 44px; + width: 70px; + border: 1px solid #ccc; + @include linear-gradient(top, #eee, #ddd); + @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset); &.prev, &.next { @@ -192,14 +234,13 @@ nav.sequence-nav { background-position: center; background-repeat: no-repeat; display: block; - height: 10px; - padding: 15px 0 14px; + height: 34px; + width: 40px; text-indent: -9999px; @include transition(all, .2s, $ease-in-out-quad); &:hover { opacity: .5; - background-color: #f4f4f4; } &.disabled { @@ -210,15 +251,23 @@ nav.sequence-nav { } &.prev { + left: -10px; + border-radius: 35px 0 0 35px; + a { background-image: url('../images/sequence-nav/previous-icon.png'); + background-position: center 15px; } } &.next { + right: -10px; + border-radius: 0 35px 35px 0; + a { - border-left: 1px solid lighten($border-color, 10%); + margin-left: 30px; background-image: url('../images/sequence-nav/next-icon.png'); + background-position: center 15px; } } } diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 848294b699..fb78f46d77 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -1,11 +1,10 @@ div.video { @include clearfix(); background: #f3f3f3; - border-bottom: 1px solid #e1e1e1; - border-top: 1px solid #e1e1e1; display: block; - margin: 0 0 0 (-(lh())); - padding: 6px lh(); + margin: 0 -12px; + padding: 12px; + border-radius: 5px; article.video-wrapper { float: left; @@ -401,6 +400,7 @@ div.video { overflow: auto; width: flex-grid(3, 9); margin: 0; + font-size: 14px; li { border: 0; diff --git a/common/static/images/sequence-nav/next-icon.png b/common/static/images/sequence-nav/next-icon.png index ece431dcb8..b54f8566de 100644 Binary files a/common/static/images/sequence-nav/next-icon.png and b/common/static/images/sequence-nav/next-icon.png differ diff --git a/common/static/images/sequence-nav/previous-icon.png b/common/static/images/sequence-nav/previous-icon.png index 3b995df1f0..33277d6af4 100644 Binary files a/common/static/images/sequence-nav/previous-icon.png and b/common/static/images/sequence-nav/previous-icon.png differ diff --git a/lms/static/images/bg-texture.png b/lms/static/images/bg-texture.png new file mode 100644 index 0000000000..d9ee8b6a6b Binary files /dev/null and b/lms/static/images/bg-texture.png differ diff --git a/lms/static/images/small-header-home-icon.png b/lms/static/images/small-header-home-icon.png new file mode 100644 index 0000000000..2e81217b77 Binary files /dev/null and b/lms/static/images/small-header-home-icon.png differ diff --git a/lms/static/images/small-header-logo.png b/lms/static/images/small-header-logo.png new file mode 100644 index 0000000000..a841b5429d Binary files /dev/null and b/lms/static/images/small-header-logo.png differ diff --git a/lms/static/js/jquery.sequence.js b/lms/static/js/jquery.sequence.js new file mode 100644 index 0000000000..5406444eed --- /dev/null +++ b/lms/static/js/jquery.sequence.js @@ -0,0 +1,104 @@ + + + +var SequenceNav = function($element) { + var _this = this; + var $element = $element; + var $wrapper = $element.find('.sequence-list-wrapper'); + var $list = $element.find('#sequence-list'); + var $arrows = $element.find('.sequence-nav-buttons'); + var maxScroll = $list.width() - $wrapper.width() + 20; + var $leftShadow = $('
'); + var $rightShadow = $('
'); + var $body = $('body'); + var listOrigin; + var mouseOrigin; + + var startDrag = function(e) { + updateWidths(); + mouseOrigin = e.pageX; + listOrigin = $list.position().left; + $body.css('-webkit-user-select', 'none'); + $body.bind('mousemove', moveDrag); + $body.bind('mouseup', stopDrag); + }; + + var moveDrag = function(e) { + var offset = e.pageX - mouseOrigin; + var targetLeft = clamp(listOrigin + offset, -maxScroll, 0); + + console.log('---------------'); + console.log('offset: ' + offset); + console.log('target left: ' + targetLeft); + console.log('max: ' + maxScroll); + + updateHorizontalPosition(targetLeft); + + setShadows(targetLeft); + }; + + var stopDrag = function(e) { + $body.css('-webkit-user-select', 'auto'); + $body.unbind('mousemove', moveDrag); + $body.unbind('mouseup', stopDrag); + }; + + var setShadows = function(left) { + var left = left || $list.position().left; + var padding = 30; + + 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) { + if(val > max) return max; + if(val < min) return min; + return val; + }; + + var updateWidths = function(e) { + maxScroll = $list.width() - $wrapper.width() + 20; + var targetLeft = clamp($list.position().left, -maxScroll, 0); + updateHorizontalPosition(targetLeft); + setShadows(targetLeft); + }; + + var updateHorizontalPosition = function(left) { + $list.css({ + 'left': left + 'px' + }); + }; + + var checkPosition = function(e) { + var $active = $element.find('.active'); + if(!$active[0]) { + return; + } + if($active.position().left + $active.width() > $wrapper.width() - $list.position().left) { + $list.animate({ + 'left': (-$active.position().left + $wrapper.width() - $active.width() - 10) + 'px' + }, { + step: setShadows + }); + } else if($active.position().left < -$list.position().left) { + $list.animate({ + 'left': (-$active.position().left + 10) + 'px' + }, { + step: setShadows + }); + } + }; + + $wrapper.append($leftShadow).append($rightShadow); + setShadows(0); + $wrapper.bind('mousedown', startDrag); + $arrows.bind('click', checkPosition); + $(window).bind('resize', updateWidths); + setTimeout(function() { + checkPosition(); + }, 200); +} \ No newline at end of file diff --git a/lms/static/sass/README.txt b/lms/static/sass/README.txt new file mode 100644 index 0000000000..5523d207ac --- /dev/null +++ b/lms/static/sass/README.txt @@ -0,0 +1,3 @@ +Sass Watch: + +sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index 93c435a040..8944303a4f 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -55,10 +55,10 @@ $tag-text-color: #5b614f; .sidebar-module { @include clearfix; - padding: 0 24px 24px 0; + padding: 0 26px 24px; margin-bottom: 24px; border-bottom: 1px solid #d3d3d3; - font-size: 0.8em; + font-size: 13px; header { margin-bottom: 14px; @@ -67,16 +67,18 @@ $tag-text-color: #5b614f; h4 { float: left; - font-size: 1.1em; + font-size: 15px; font-weight: bold; } .sidebar-new-post-button, .sidebar-promote-moderator-button { @include button; } + .sidebar-revoke-moderator-button { @include button(simple, gray); } + .sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button { display: block; box-sizing: border-box; @@ -91,9 +93,13 @@ $tag-text-color: #5b614f; } } + .sidebar-new-post-button { + margin: 40px 0 20px 0; + } + .sidebar-view-all { float: right; - font-size: 0.9em; + font-size: 13px; line-height: 1.6em; @include standard-discussion-link; } @@ -108,6 +114,10 @@ $tag-text-color: #5b614f; a { @include standard-discussion-link; background: none; + + span { + line-height: 1.3; + } } } diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index 755a4d0639..fad5feff3a 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -15,16 +15,19 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $body-font-size: em(14); $body-line-height: golden-ratio(.875em, 1); $base-font-color: rgb(60,60,60); -$lighter-base-font-color: rgb(160,160,160); +$lighter-base-font-color: rgb(100,100,100); $blue: rgb(29,157,217); $pink: rgb(182,37,104); $yellow: rgb(255, 252, 221); $error-red: rgb(253, 87, 87); $border-color: #C8C8C8; +$sidebar-color: #f6f6f6; +$outer-border-color: #aaa; // old variables $light-gray: #ddd; $dark-gray: #333; $text-color: $dark-gray; + diff --git a/lms/static/sass/course.scss b/lms/static/sass/course.scss index 93296aead6..824e84fade 100644 --- a/lms/static/sass/course.scss +++ b/lms/static/sass/course.scss @@ -11,6 +11,7 @@ // Course base / layout styles @import 'course/layout/courseware_header'; +@import 'course/layout/footer'; @import 'course/base/base'; @import 'course/base/extends'; @import 'module/module-styles.scss'; @@ -34,6 +35,9 @@ @import "course/profile"; @import "course/gradebook"; +// instructor +@import "course/instructor/instructor"; + // Askbot / Discussion styles @import "course/discussion/askbot-original"; @import "course/discussion/discussion"; diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index cd3205149c..5f6c88d918 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -6,6 +6,9 @@ div.gradebook-wrapper { section.gradebook-content { @extend .content; + display: block; + width: 100%; + @include clearfix; .student-search { padding: 0 20px 0 15px; @@ -15,7 +18,7 @@ div.gradebook-wrapper { width: 100%; height: 27px; padding: 0 15px 0 35px; - box-sizing: border-box; + @include box-sizing(border-box); border-radius: 13px; border: 1px solid $table-border-color; background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; @@ -37,7 +40,6 @@ div.gradebook-wrapper { .student-table { float: left; - // width: 264px; width: 24%; border-radius: 3px 0 0 3px; color: #3c3c3c; @@ -88,12 +90,20 @@ div.gradebook-wrapper { .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)); + background-image: -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -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)); + background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-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)); + background-image: -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -webkit-gradient(linear, right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -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)); + background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -moz-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -ms-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); + background-image: -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 20%), -o-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)); } } @@ -103,9 +113,8 @@ div.gradebook-wrapper { left: 0; width: 1000px; cursor: move; - -webkit-transition: none; - -webkit-user-select: none; - user-select: none; + @include transition(none); + @include user-select(none); td, th { @@ -116,32 +125,30 @@ div.gradebook-wrapper { thead th { position: relative; height: 50px; - background: -webkit-linear-gradient(top, $cell-border-color, #ddd); + @include linear-gradient(top, $cell-border-color, #ddd); font-size: 10px; line-height: 10px; font-weight: bold; text-align: center; box-shadow: 0 1px 0 $table-border-color inset, 0 2px 0 rgba(255, 255, 255, .7) inset; + border-left: 1px solid #ccc; - &:before { - content: ''; - display: block; - position: absolute; - left: 0; - top: 0; - z-index: 9999; - width: 1px; - height: 100%; - background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15)); - } + // &:before { + // content: ''; + // display: block; + // position: absolute; + // left: 0; + // top: 0; + // z-index: 9999; + // width: 1px; + // height: 50px; + // @include 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 $table-border-color inset, 1px 2px 0 rgba(255, 255, 255, .7) inset; - - &:before { - display: hidden; - } + border-left: none; } &:last-child { @@ -161,7 +168,7 @@ div.gradebook-wrapper { .max { height: 12px; - background: -webkit-linear-gradient(top, #c6c6c6, #bababa); + @include linear-gradient(top, #c6c6c6, #bababa); font-size: 9px; line-height: 12px; color: #fff; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index e68e386696..e25bb9d8c4 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -68,10 +68,10 @@ div.info-wrapper { section.handouts { @extend .sidebar; - border-left: 1px solid $border-color; - border-right: 0; @include border-radius(0 4px 4px 0); + border-left: 1px solid #ddd; @include box-shadow(none); + font-size: 14px; &:after { left: -1px; @@ -79,31 +79,51 @@ div.info-wrapper { } h1 { - @extend .bottom-border; margin-bottom: 0; - padding: lh(.5) lh(.5); + padding: 32px 26px 20px 26px; + font-size: 18px; + font-style: normal; + font-weight: bold; } ol { li { + margin: 0 26px 14px 26px; + a { display: block; - padding-left: lh(.5); - padding-right: 0; + padding: 0; + + &:hover { + background: transparent; + } } &.expandable, &.collapsable { + margin: 0 16px 14px 16px; + @include transition(all .2s); + h4 { color: $blue; font-size: 1em; font-weight: normal; - padding: lh(.25) 0 lh(.25) lh(1.5); + padding-left: 30px; + } + } + + &.collapsable { + background: #fff; + border-radius: 3px; + padding: 14px 0; + @include box-shadow(0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .25)); + + h4 { + margin-bottom: 16px; } } &.multiple { - padding: lh(.5) 0 lh(.5) lh(.5); a { @include inline-block; @@ -121,10 +141,10 @@ div.info-wrapper { li { border-bottom: 0; - border-top: 1px solid $border-color; - @include box-shadow(inset 0 1px 0 #eee); - font-size: 1em; - padding: lh(.5) 0 lh(.5) lh(.5); + border-top: 1px solid #e6e6e6; + font-size: 0.9em; + margin: 0; + padding: 15px 30px; a { @include inline-block; @@ -138,11 +158,11 @@ div.info-wrapper { } div.hitarea { - background-image: url('../images/treeview-default.gif'); + background-image: url('../images/treeview-default.gif') no-repeat; display: block; height: 100%; margin-left: 0; - max-height: 30px; + max-height: 20px; position: absolute; width: 100%; @@ -157,20 +177,20 @@ div.info-wrapper { } &.expandable-hitarea { - background-position: -72px 7px; + background-position: -72px 0px; } &.collapsable-hitarea { - background-position: -55px -15px; + background-position: -55px -23px; } } h3 { border-bottom: 0; @include box-shadow(none); - color: #aaa; + color: #888; font-size: 1em; - margin-bottom: em(6); + margin-bottom: 0; } p { diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index 8bbfa67b1c..4bda5a46d6 100644 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -1,10 +1,17 @@ div.book-wrapper { @extend .table-wrapper; + #open_close_accordion { + display: none; + } + section.book-sidebar { @extend .sidebar; @extend .tran; @include box-sizing(border-box); + padding: 10px 0; + border-radius: 3px 0 0 3px; + border-right: 1px solid #ccc; ul#booknav { font-size: em(14); @@ -32,7 +39,7 @@ div.book-wrapper { li { background: none; border-bottom: 0; - padding-left: lh(); + padding-left: lh(); a { padding: 0; @@ -49,7 +56,7 @@ div.book-wrapper { div.hitarea { background-image: url('../images/treeview-default.gif'); - margin-left: -22px; + position: relative; top: 4px; @@ -62,26 +69,23 @@ div.book-wrapper { ul { background: none; margin-top: lh(.25); - border-top: 1px solid $border-color; padding-top: lh(.25); li { - padding-bottom: lh(.25); + padding-bottom: 10px; } } } > li { - border-bottom: 1px solid $border-color; - padding: 7px 7px 7px 30px; + padding: 5px 6px; + margin: 0 16px 5px 25px; } } } section.book { @extend .content; - padding-right: 0; - padding-left: lh(); nav { @extend .clearfix; diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index dffad7d347..e6bd70c338 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -1,5 +1,7 @@ body { min-width: 980px; + min-height: 100%; + background: url(../images/bg-texture.png) #ddd; } body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { @@ -11,16 +13,37 @@ table { table-layout: fixed; } +a { + &:hover { + color: $pink; + text-decoration: none !important; + } +} + +.content-wrapper { + background: none; + border: none; +} + .container { - padding: lh(2); + padding: 20px 0 0 0; > div { display: table; - width: 100%; table-layout: fixed; + width: 100%; + border-radius: 3px; + border: 1px solid $outer-border-color; + background: #fff; + @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } } + + + + + form { label { display: block; @@ -75,11 +98,7 @@ img { max-width: 100%; } -.container { - padding: em(40) 0; -} - ::selection, ::-moz-selection, ::-webkit-selection { - background:#444; - color:#fff; + background: #444; + color: #fff; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index c072ea3b1f..bcb93a3645 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -37,7 +37,7 @@ h1.top-header { .content { @include box-sizing(border-box); display: table-cell; - padding-right: lh(); + padding: 2em 2.5em; vertical-align: top; width: flex-grid(9) + flex-gutter(); @@ -47,34 +47,28 @@ h1.top-header { } .sidebar { - border-right: 1px solid #C8C8C8; @include box-sizing(border-box); display: table-cell; font-family: $sans-serif; + font-size: 14px; position: relative; vertical-align: top; width: flex-grid(3); - - &:after { - width: 1px; - height: 100%; - @include position(absolute, 0px -1px 0px 0); - content: ""; - @include background-image(linear-gradient(top, #fff, rgba(#fff, 0)), linear-gradient(top, rgba(#fff, 0), #fff)); - background-position: top, bottom; - @include background-size(1px 20px); - background-repeat: no-repeat; - display: block; - } + background: $sidebar-color; h1, h2 { font-size: em(20); - font-weight: 100; + font-weight: bold; letter-spacing: 0; text-transform: none; font-family: $sans-serif; text-align: left; - font-style: italic; + font-style: normal; + } + + h1 { + font-size: 18px; + padding: 32px 26px 20px 26px; } a { @@ -106,7 +100,7 @@ h1.top-header { } &.active { - @extend .bottom-border; + // @extend .bottom-border; color: #000; font-weight: bold; @@ -122,7 +116,7 @@ h1.top-header { padding-left: 0; li { - @extend .bottom-border; + // @extend .bottom-border; @extend .clearfix; background: none; position: relative; diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 1e7f13385a..5621396679 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -12,8 +12,7 @@ div.course-wrapper { section.course-content { @extend .content; - padding-right: 0; - padding-left: lh(); + padding: 40px; h1 { margin: 0 0 lh(); @@ -46,6 +45,7 @@ div.course-wrapper { ol.vert-mod { padding: 0; margin: 0; + line-height: 1.4; > li { @extend .clearfix; @@ -224,3 +224,12 @@ div.course-wrapper { } } } + +.xmodule_VideoModule { + margin-bottom: 30px; + + +} + + + diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 51e9cbd90d..9f570711a7 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -1,6 +1,12 @@ section.course-index { @extend .sidebar; @extend .tran; + @include border-radius(3px 0 0 3px); + border-right: 1px solid #ddd; + + #open_close_accordion { + display: none; + } header { max-height: 47px; @@ -11,10 +17,11 @@ section.course-index { } div#accordion { + width: auto; + font-size: 14px; + h3 { @include border-radius(0); - border-top: 1px solid lighten($border-color, 10%); - font-size: em(16, 18); margin: 0; overflow: hidden; @@ -24,7 +31,6 @@ section.course-index { &:hover { color: #666; - background: #f6f6f6; } &.ui-state-hover { @@ -40,6 +46,7 @@ section.course-index { a { @include border-radius(0); @include box-shadow(none); + padding-left: 19px; } &.ui-state-active { @@ -52,28 +59,50 @@ section.course-index { } span.ui-icon { + left: 0; background-image: url("/static/images/ui-icons_222222_256x240.png"); opacity: .3; } } } + .chapter { + width: 100%; + @include box-sizing(border-box); + padding: 11px 14px; + @include linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); + background-color: #eee; + @include box-shadow(0 1px 0 #fff inset, 0 -1px 0 rgba(0, 0, 0, .1) inset); + @include transition(background-color .1s); + + &:first-child { + border-radius: 3px 0 0 0; + } + + &:last-child { + border-radius: 0 0 0 3px; + @include box-shadow(0 1px 0 #fff inset); + } + + &:hover { + background-color: #fff + } + } + ul.ui-accordion-content { background: transparent; border: none; @include border-radius(0); - font-size: em(14, 18); margin: 0; - padding: 1em 1.5em; + padding: 9px 0 9px 9px; li { border-bottom: 0; @include border-radius(0); - margin-bottom: lh(.5); + margin-bottom: 4px; a { background: transparent; - border: 1px solid transparent; @include border-radius(4px); display: block; padding: 5px 36px 5px 10px; @@ -84,39 +113,18 @@ section.course-index { font-weight: bold; font-family: $sans-serif; margin-bottom: 0; + line-height: 1.3; span.subtitle { color: #666; + font-size: 13px; font-weight: normal; display: block; } - } - - &:after { - background: transparent; - border-right: 1px solid rgb(180,180,180); - border-top: 1px solid rgb(180,180,180); - content: ""; - display: block; - height: 12px; - margin-top: -6px; - opacity: 0; - position: absolute; - right: 30px; - top: 50%; - @include transform(rotate(45deg)); - width: 12px; - } + } &:hover { - @include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4))); - border-color: rgb(200,200,200); - - &:after { - opacity: 1; - right: 15px; - @include transition(); - } + background: rgba(0, 0, 0, .1); > a p { color: #333; @@ -136,8 +144,23 @@ section.course-index { &.active { font-weight: bold; + &:after { + content: '›'; + position: absolute; + top: 50%; + right: 20px; + margin-top: -13px; + font-size: 30px; + font-weight: normal; + color: #333; + opacity: 0; + @include transition(); + } + > a { - border-color: rgb(200,200,200); + border: 1px solid #bbb; + @include box-shadow(0 1px 0 rgba(255, 255, 255, .35) inset); + @include linear-gradient(top, #e6e6e6, #d6d6d6); &:after { opacity: 1; diff --git a/lms/static/sass/course/discussion/_discussion.scss b/lms/static/sass/course/discussion/_discussion.scss index 3aaf73c4ac..9383241980 100644 --- a/lms/static/sass/course/discussion/_discussion.scss +++ b/lms/static/sass/course/discussion/_discussion.scss @@ -3,15 +3,16 @@ body.askbot { section.container { div.discussion-wrapper { @extend .table-wrapper; + display: table; div.discussion-content { @include box-sizing(border-box); display: table-cell; min-width: 650px; - padding-right: lh(); - vertical-align: top; + padding: 40px; width: flex-grid(9) + flex-gutter(); + a.tabula-rasa, .tabula-rasa{ @extend .light-button; @include border-radius(5px); diff --git a/lms/static/sass/course/discussion/_sidebar.scss b/lms/static/sass/course/discussion/_sidebar.scss index b248fb18d7..adcd38a383 100644 --- a/lms/static/sass/course/discussion/_sidebar.scss +++ b/lms/static/sass/course/discussion/_sidebar.scss @@ -2,9 +2,10 @@ div.discussion-wrapper aside { @extend .sidebar; - border-left: 1px solid $border-color; + border-left: 1px solid #ccc; border-right: 0; width: flex-grid(3); + border-radius: 0 3px 3px 0; &:after { left: -1px; @@ -16,9 +17,7 @@ div.discussion-wrapper aside { } h1 { - @extend .bottom-border; - padding: lh(.5) lh(); - margin-bottom: em(16, 20); + margin-bottom: 0; } h2 { @@ -54,7 +53,7 @@ div.discussion-wrapper aside { div.box { display: block; - padding: lh(.5) lh(); + padding: 18px 26px; border-top: 1px solid lighten($border-color, 10%); &:first-child { @@ -67,7 +66,7 @@ div.discussion-wrapper aside { li { border-bottom: 0; - background: #eee; + background: #ddd; padding: 6px 10px 6px 5px; a { @@ -298,6 +297,7 @@ div.discussion-wrapper aside { div.view-profile { border-top: 0; + padding-top: 0; a { @extend .gray-button; diff --git a/lms/static/sass/course/discussion/_tags.scss b/lms/static/sass/course/discussion/_tags.scss index 5cf78a4816..92210d8053 100644 --- a/lms/static/sass/course/discussion/_tags.scss +++ b/lms/static/sass/course/discussion/_tags.scss @@ -10,7 +10,7 @@ ul.tags { } li { - background: #eee; + background: #ddd; color: #555; display: inline-block; font-size: 12px; @@ -19,7 +19,7 @@ ul.tags { padding: 6px 10px 6px 5px; &:before { - border-color:transparent #eee transparent transparent; + border-color:transparent #ddd transparent transparent; border-style:solid; border-width:12px 10px 12px 0; content:""; diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss new file mode 100644 index 0000000000..070f7bcc9c --- /dev/null +++ b/lms/static/sass/course/instructor/_instructor.scss @@ -0,0 +1,15 @@ +.instructor-dashboard-wrapper { + @extend .table-wrapper; + display: table; + + section.instructor-dashboard-content { + @extend .content; + padding: 40px; + width: 100%; + + h1 { + @extend .top-header; + } + } +} + diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index dfa30b43a0..84ededfabb 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -1,8 +1,7 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; - border-bottom: 1px solid rgb(200,200,200); + border-bottom: none; margin: 0px auto 0px; padding: 0px; width: 100%; @@ -16,33 +15,32 @@ nav.course-material { ol.course-tabs { @include border-top-radius(4px); @include clearfix; - padding: 10px 0 0 0; + padding: 28px 0 10px 0; + margin-left: 10px; li { float: left; list-style: none; + margin-right: 6px; a { - color: darken($lighter-base-font-color, 20%); + border-radius: 3px; + color: #555; display: block; text-align: center; - padding: 8px 13px 12px; + padding: 10px 13px 12px; font-size: 14px; - font-weight: 400; + font-weight: bold; text-decoration: none; - text-shadow: 0 1px rgb(255,255,255); &:hover { - color: $base-font-color; + color: #333; + background: rgba(255, 255, 255, .4); } &.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; + background: rgba(255, 255, 255, .8); } } } @@ -57,7 +55,55 @@ nav.course-material { } } -.global { +header.global.slim { + border-bottom: 1px solid $outer-border-color; + @include box-shadow(0 1px 2px rgba(0, 0, 0, .1)); + height: 50px; + @include linear-gradient(top, #fff, #eee); + + .guest .secondary { + display: none; + } + + nav { + padding-top: 5px; + } + + h1.logo { + margin-left: 13px; + margin-right: 20px; + padding-right: 20px; + + &::before { + @extend .faded-vertical-divider; + content: ""; + display: block; + height: 40px; + position: absolute; + right: 3px; + top: -8px; + width: 1px; + } + + &::after { + @extend .faded-vertical-divider-light; + content: ""; + display: block; + height: 40px; + position: absolute; + right: 0px; + top: -12px; + width: 1px; + } + + a { + width: 48px; + height: 24px; + background: url(../images/small-header-logo.png) no-repeat !important; + } + + } + .find-courses-button { display: none; } @@ -68,8 +114,9 @@ nav.course-material { float: left; font-size: 0.9em; font-weight: 600; - line-height: 40px; + color: #777; letter-spacing: 0; + margin-top: 9px; text-transform: none; text-shadow: 0 1px 0 #fff; white-space: nowrap; @@ -79,7 +126,16 @@ nav.course-material { .provider { font: inherit; font-weight: bold; - color: #6d6d6d; } } + + a#signup { + position: relative; + margin-top: 4px; + padding: 6px 12px 8px; + text-transform: none; + font-size: 14px; + font-weight: bold; + letter-spacing: 0; + } } \ No newline at end of file diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index 21f6187a83..c06b1435f3 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -1,8 +1,7 @@ nav.course-material { @include clearfix; @include box-sizing(border-box); - background: #f6f6f6; - border-bottom: 1px solid rgb(200,200,200); + background: none; margin: 0px auto 0px; padding: 0px; width: 100%; @@ -37,11 +36,6 @@ nav.course-material { } &.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; } } diff --git a/lms/static/sass/course/layout/_footer.scss b/lms/static/sass/course/layout/_footer.scss new file mode 100644 index 0000000000..7abf35a819 --- /dev/null +++ b/lms/static/sass/course/layout/_footer.scss @@ -0,0 +1,4 @@ +footer { + border: none; + box-shadow: none; +} \ No newline at end of file diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 43769c93a6..1ddb52da56 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -1,13 +1,6 @@ section.wiki { padding-top: 25px; - > header { - height: 33px; - margin-bottom: 36px; - padding-bottom: 26px; - border-bottom: 1px solid $light-gray; - } - .pull-left { float: left; } @@ -16,6 +9,18 @@ section.wiki { float: right; } + .wiki-wrapper { + @include clearfix; + + > header { + height: 33px; + padding: 24px 0 26px; + border-bottom: 1px solid #ccc; + border-radius: 3px 3px 0 0; + background-color: $sidebar-color; + } + } + /*----------------- @@ -27,7 +32,7 @@ section.wiki { .breadcrumb { list-style: none; padding-left: 0; - margin: 0 0 0 flex-gutter(); + margin: 0 0 0 40px; li { float: left; @@ -68,7 +73,7 @@ section.wiki { .global-functions { display: block; width: auto; - margin-right: flex-gutter(); + margin-right: 20px; } .add-article-btn { @@ -129,8 +134,9 @@ section.wiki { .main-article { float: left; width: flex-grid(9); - margin-left: flex-gutter(); + padding: 40px 0 40px 40px; color: $base-font-color; + @include box-sizing(border-box); } &.view .main-article { @@ -206,13 +212,14 @@ section.wiki { .article-functions { float: left; - width: flex-grid(2) + flex-gutter(); - margin-left: flex-grid(1); + width: flex-grid(3); + padding: 40px 40px; + @include box-sizing(border-box); .timestamp { - margin: 4px 0 15px; - padding: 0 0 15px 5px; - border-bottom: 1px solid $light-gray; + margin-top: 15px; + padding: 15px 0 0 10px; + border-top: 1px solid $light-gray; .label { font-size: 0.7em; @@ -236,7 +243,8 @@ section.wiki { a { color: $blue; - .icon-view { + .icon-view, + .icon-home { background-position: -25px 0; } @@ -244,11 +252,13 @@ section.wiki { background-position: -25px -25px; } - .icon-changes { + .icon-changes, + .icon-time { background-position: -25px -49px; } - .icon-attachments { + .icon-attachments, + .icon-file { background-position: -25px -73px; } @@ -280,7 +290,8 @@ section.wiki { background: url(../images/wiki-icons.png) no-repeat; } - .icon-view { + .icon-view, + .icon-home { background-position: 0 0; } @@ -288,11 +299,13 @@ section.wiki { background-position: 0 -25px; } - .icon-changes { + .icon-changes, + .icon-time { background-position: 0 -49px; } - .icon-attachments { + .icon-attachments, + .icon-file { background-position: 0 -73px; } @@ -706,6 +719,10 @@ section.wiki { font-size: 0.8em; } + .attachment-actions { + width: 175px; + } + .attachment-actions .btn { float: right; } diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 4fb95f7004..d182ed4316 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -48,7 +48,6 @@ footer { a:link, a:visited { color: $lighter-base-font-color; - letter-spacing: 1px; padding: 6px 0px; } } @@ -70,6 +69,7 @@ footer { position: relative; width: 47px; vertical-align: middle; + @include transition(none); &:hover { background-position: 0 0; @@ -90,7 +90,6 @@ footer { a { color: $lighter-base-font-color; @include inline-block; - letter-spacing: 1px; margin-right: 20px; padding-top: 2px; vertical-align: middle; @@ -165,7 +164,6 @@ footer { color: $lighter-base-font-color; font-family: $serif; font-style: italic; - letter-spacing: 1px; line-height: 1.6em; margin-left: 20px; text-transform: lowercase; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 857db39a8d..116761ddc8 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -136,6 +136,7 @@ header.global { &.user { float: right; + margin-top: 4px; > li.primary { display: block; @@ -151,22 +152,22 @@ header.global { > a { @include border-radius(0 4px 4px 0); border-left: none; + padding: 5px 8px 7px 8px; } } } a.user-link { - padding: 10px 12px 10px 42px; + padding: 6px 12px 8px 35px; position: relative; text-transform: none; + font-size: 14px; + font-weight: bold; + letter-spacing: 0; .avatar { - //background: rgb(220,220,220); - @include background-image(url('../images/portal-icons/home-icon.png')); - background-size: cover; - //@include border-radius(3px); - //border: 1px solid rgb(80,80,80); - //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6)); + @include background-image(url('../images/small-header-home-icon.png')); + background-repeat: no-repeat; height: 26px; @include inline-block; left: 8px; @@ -194,7 +195,7 @@ header.global { padding: 5px 10px; position: absolute; right: 0px; - top: 50px; + top: 34px; width: 170px; z-index: 3; diff --git a/lms/templates/accordion.html b/lms/templates/accordion.html index 1f514fe4a4..0d3dee9495 100644 --- a/lms/templates/accordion.html +++ b/lms/templates/accordion.html @@ -1,22 +1,24 @@ <%! from django.core.urlresolvers import reverse %> <%def name="make_chapter(chapter)"> -

${chapter['display_name']} -

+
+

${chapter['display_name']} +

- + +
% for chapter in toc: diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index 02149ec463..d5bdb9b302 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -10,6 +10,7 @@ <%block name="js_extra"> + ## codemirror diff --git a/lms/templates/courseware/gradebook.html b/lms/templates/courseware/gradebook.html index 20426041c4..fb750aed19 100644 --- a/lms/templates/courseware/gradebook.html +++ b/lms/templates/courseware/gradebook.html @@ -67,9 +67,9 @@ %for section in templateSummary['section_breakdown']: - ${section['label']} +
${section['label']}
%endfor - Total +
Total
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 8858e282e4..47fc93c1b3 100644 --- a/lms/templates/navigation.html +++ b/lms/templates/navigation.html @@ -5,7 +5,11 @@ <%namespace name='static' file='static_content.html'/> <%! from django.core.urlresolvers import reverse %> -
+%if course: +
+%else: +
+%endif