Skip to content

E
edx-platform
Commit faac42f3 by David Ormsbee
Options

Merge pull request #483 from MITx/feature/tomg/fall-design 

Feature/tomg/fall design
parents 62c9da06 0bab9a0c
Showing with 642 additions and 283 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -2,18 +2,54 @@ nav.sequence-nav { ...@@ -2,18 +2,54 @@ nav.sequence-nav {
// TODO (cpennington): This doesn't work anymore. XModules aren't able to // TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources. // import from external sources.
@extend .topbar; @extend .topbar;
border-bottom: 1px solid $border-color; margin: -4px 0 30px;
@include border-top-right-radius(4px);
margin: 0 0 lh() (-(lh()));
position: relative; 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 { ol {
position: absolute;
top: 0;
left: 0;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table; display: table;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding-left: 3px; padding: 0 10px;
padding-right: flex-grid(1, 9);
width: 100%; width: 100%;
a { a {
...@@ -25,42 +61,44 @@ nav.sequence-nav { ...@@ -25,42 +61,44 @@ nav.sequence-nav {
min-width: 20px; min-width: 20px;
a { a {
background-position: center; width: 34px;
height: 34px;
margin: 4px auto;
background-position: center 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: none; @include border-radius(35px);
@include border-radius(3px 3px 0 0);
cursor: pointer; cursor: pointer;
display: block; display: block;
height: 10px; padding: 0;
padding: 15px 0 14px;
position: relative; position: relative;
@include transition(); @include transition();
width: 100%;
&:hover { &:hover {
background-color: #fff;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center 10px;
background-color: #F3F3F3;
}
&.visited {
background-color: #F3F3F3;
&:hover {
background-position: center center;
}
} }
&.active { &.active {
border-color: $border-color;
@include box-shadow(0 2px 0 #fff);
background-color: #fff; background-color: #fff;
z-index: 9; z-index: 9;
// &:after {
// content: '▲';
// position: absolute;
// top: 28px;
// left: 50%;
// z-index: 9999;
// margin-left: -5px;
// font-size: 12px;
// color: #aaa;
// }
&:hover { &:hover {
background-position: center;
background-color: #fff; background-color: #fff;
background-repeat: no-repeat;
background-position: center 10px;
} }
} }
...@@ -171,20 +209,24 @@ nav.sequence-nav { ...@@ -171,20 +209,24 @@ nav.sequence-nav {
} }
ul { ul {
position: absolute;
top: 0;
list-style: none; list-style: none;
height: 100%; height: 100%;
position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: flex-grid(1, 9); width: 100%;
border: 1px solid $border-color; margin: 0;
border-bottom: 0; border: none;
@include border-radius(3px 3px 0 0);
li { li {
float: left; position: absolute;
margin-bottom: 0; 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 { &.prev, &.next {
...@@ -192,14 +234,13 @@ nav.sequence-nav { ...@@ -192,14 +234,13 @@ nav.sequence-nav {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
height: 10px; height: 34px;
padding: 15px 0 14px; width: 40px;
text-indent: -9999px; text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad); @include transition(all, .2s, $ease-in-out-quad);
&:hover { &:hover {
opacity: .5; opacity: .5;
background-color: #f4f4f4;
} }
&.disabled { &.disabled {
...@@ -210,15 +251,23 @@ nav.sequence-nav { ...@@ -210,15 +251,23 @@ nav.sequence-nav {
} }
&.prev { &.prev {
left: -10px;
border-radius: 35px 0 0 35px;
a { a {
background-image: url('../images/sequence-nav/previous-icon.png'); background-image: url('../images/sequence-nav/previous-icon.png');
background-position: center 15px;
} }
} }
&.next { &.next {
right: -10px;
border-radius: 0 35px 35px 0;
a { a {
border-left: 1px solid lighten($border-color, 10%); margin-left: 30px;
background-image: url('../images/sequence-nav/next-icon.png'); background-image: url('../images/sequence-nav/next-icon.png');
background-position: center 15px;
} }
} }
} }
......
common/lib/xmodule/xmodule/css/video/display.scss
div.video { div.video {
@include clearfix(); @include clearfix();
background: #f3f3f3; background: #f3f3f3;
border-bottom: 1px solid #e1e1e1;
border-top: 1px solid #e1e1e1;
display: block; display: block;
margin: 0 0 0 (-(lh())); margin: 0 -12px;
padding: 6px lh(); padding: 12px;
border-radius: 5px;
article.video-wrapper { article.video-wrapper {
float: left; float: left;
...@@ -401,6 +400,7 @@ div.video { ...@@ -401,6 +400,7 @@ div.video {
overflow: auto; overflow: auto;
width: flex-grid(3, 9); width: flex-grid(3, 9);
margin: 0; margin: 0;
font-size: 14px;
li { li {
border: 0; border: 0;
......
lms/static/js/jquery.sequence.js 0 → 100644
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 = $('<div class="left-shadow"></div>');
var $rightShadow = $('<div class="right-shadow"></div>');
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
lms/static/sass/README.txt 0 → 100644
Sass Watch:
sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb
lms/static/sass/_discussion.scss
...@@ -55,10 +55,10 @@ $tag-text-color: #5b614f; ...@@ -55,10 +55,10 @@ $tag-text-color: #5b614f;
.sidebar-module { .sidebar-module {
@include clearfix; @include clearfix;
padding: 0 24px 24px 0; padding: 0 26px 24px;
margin-bottom: 24px; margin-bottom: 24px;
border-bottom: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3;
font-size: 0.8em; font-size: 13px;
header { header {
margin-bottom: 14px; margin-bottom: 14px;
...@@ -67,16 +67,18 @@ $tag-text-color: #5b614f; ...@@ -67,16 +67,18 @@ $tag-text-color: #5b614f;
h4 { h4 {
float: left; float: left;
font-size: 1.1em; font-size: 15px;
font-weight: bold; font-weight: bold;
} }
.sidebar-new-post-button, .sidebar-promote-moderator-button { .sidebar-new-post-button, .sidebar-promote-moderator-button {
@include button; @include button;
} }
.sidebar-revoke-moderator-button { .sidebar-revoke-moderator-button {
@include button(simple, gray); @include button(simple, gray);
} }
.sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button { .sidebar-new-post-button, .sidebar-promote-moderator-button, .sidebar-revoke-moderator-button {
display: block; display: block;
box-sizing: border-box; box-sizing: border-box;
...@@ -91,9 +93,13 @@ $tag-text-color: #5b614f; ...@@ -91,9 +93,13 @@ $tag-text-color: #5b614f;
} }
} }
.sidebar-new-post-button {
margin: 40px 0 20px 0;
}
.sidebar-view-all { .sidebar-view-all {
float: right; float: right;
font-size: 0.9em; font-size: 13px;
line-height: 1.6em; line-height: 1.6em;
@include standard-discussion-link; @include standard-discussion-link;
} }
...@@ -108,6 +114,10 @@ $tag-text-color: #5b614f; ...@@ -108,6 +114,10 @@ $tag-text-color: #5b614f;
a { a {
@include standard-discussion-link; @include standard-discussion-link;
background: none; background: none;
span {
line-height: 1.3;
}
} }
} }
......
lms/static/sass/base/_variables.scss
...@@ -15,16 +15,19 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; ...@@ -15,16 +15,19 @@ $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-size: em(14); $body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1); $body-line-height: golden-ratio(.875em, 1);
$base-font-color: rgb(60,60,60); $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); $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$border-color: #C8C8C8; $border-color: #C8C8C8;
$sidebar-color: #f6f6f6;
$outer-border-color: #aaa;
// old variables // old variables
$light-gray: #ddd; $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
$text-color: $dark-gray; $text-color: $dark-gray;
lms/static/sass/course.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// Course base / layout styles // Course base / layout styles
@import 'course/layout/courseware_header'; @import 'course/layout/courseware_header';
@import 'course/layout/footer';
@import 'course/base/base'; @import 'course/base/base';
@import 'course/base/extends'; @import 'course/base/extends';
@import 'module/module-styles.scss'; @import 'module/module-styles.scss';
...@@ -34,6 +35,9 @@ ...@@ -34,6 +35,9 @@
@import "course/profile"; @import "course/profile";
@import "course/gradebook"; @import "course/gradebook";
// instructor
@import "course/instructor/instructor";
// Askbot / Discussion styles // Askbot / Discussion styles
@import "course/discussion/askbot-original"; @import "course/discussion/askbot-original";
@import "course/discussion/discussion"; @import "course/discussion/discussion";
......
lms/static/sass/course/_gradebook.scss
...@@ -6,6 +6,9 @@ div.gradebook-wrapper { ...@@ -6,6 +6,9 @@ div.gradebook-wrapper {
section.gradebook-content { section.gradebook-content {
@extend .content; @extend .content;
display: block;
width: 100%;
@include clearfix;
.student-search { .student-search {
padding: 0 20px 0 15px; padding: 0 20px 0 15px;
...@@ -15,7 +18,7 @@ div.gradebook-wrapper { ...@@ -15,7 +18,7 @@ div.gradebook-wrapper {
width: 100%; width: 100%;
height: 27px; height: 27px;
padding: 0 15px 0 35px; padding: 0 15px 0 35px;
box-sizing: border-box; @include box-sizing(border-box);
border-radius: 13px; border-radius: 13px;
border: 1px solid $table-border-color; border: 1px solid $table-border-color;
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6; background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
...@@ -37,7 +40,6 @@ div.gradebook-wrapper { ...@@ -37,7 +40,6 @@ div.gradebook-wrapper {
.student-table { .student-table {
float: left; float: left;
// width: 264px;
width: 24%; width: 24%;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
color: #3c3c3c; color: #3c3c3c;
...@@ -88,12 +90,20 @@ div.gradebook-wrapper { ...@@ -88,12 +90,20 @@ div.gradebook-wrapper {
.left-shadow { .left-shadow {
left: 0; 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-shadow {
right: 0; 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 { ...@@ -103,9 +113,8 @@ div.gradebook-wrapper {
left: 0; left: 0;
width: 1000px; width: 1000px;
cursor: move; cursor: move;
-webkit-transition: none; @include transition(none);
-webkit-user-select: none; @include user-select(none);
user-select: none;
td, td,
th { th {
...@@ -116,32 +125,30 @@ div.gradebook-wrapper { ...@@ -116,32 +125,30 @@ div.gradebook-wrapper {
thead th { thead th {
position: relative; position: relative;
height: 50px; height: 50px;
background: -webkit-linear-gradient(top, $cell-border-color, #ddd); @include linear-gradient(top, $cell-border-color, #ddd);
font-size: 10px; font-size: 10px;
line-height: 10px; line-height: 10px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
box-shadow: 0 1px 0 $table-border-color 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;
border-left: 1px solid #ccc;
&:before {
content: ''; // &:before {
display: block; // content: '';
position: absolute; // display: block;
left: 0; // position: absolute;
top: 0; // left: 0;
z-index: 9999; // top: 0;
width: 1px; // z-index: 9999;
height: 100%; // width: 1px;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15)); // height: 50px;
} // @include linear-gradient(top, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .15));
// }
&:first-child { &:first-child {
border-radius: 5px 0 0 0; border-radius: 5px 0 0 0;
box-shadow: 1px 1px 0 $table-border-color 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;
border-left: none;
&:before {
display: hidden;
}
} }
&:last-child { &:last-child {
...@@ -161,7 +168,7 @@ div.gradebook-wrapper { ...@@ -161,7 +168,7 @@ div.gradebook-wrapper {
.max { .max {
height: 12px; height: 12px;
background: -webkit-linear-gradient(top, #c6c6c6, #bababa); @include linear-gradient(top, #c6c6c6, #bababa);
font-size: 9px; font-size: 9px;
line-height: 12px; line-height: 12px;
color: #fff; color: #fff;
......
lms/static/sass/course/_info.scss
...@@ -68,10 +68,10 @@ div.info-wrapper { ...@@ -68,10 +68,10 @@ div.info-wrapper {
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
border-left: 1px solid $border-color;
border-right: 0;
@include border-radius(0 4px 4px 0); @include border-radius(0 4px 4px 0);
border-left: 1px solid #ddd;
@include box-shadow(none); @include box-shadow(none);
font-size: 14px;
&:after { &:after {
left: -1px; left: -1px;
...@@ -79,31 +79,51 @@ div.info-wrapper { ...@@ -79,31 +79,51 @@ div.info-wrapper {
} }
h1 { h1 {
@extend .bottom-border;
margin-bottom: 0; margin-bottom: 0;
padding: lh(.5) lh(.5); padding: 32px 26px 20px 26px;
font-size: 18px;
font-style: normal;
font-weight: bold;
} }
ol { ol {
li { li {
margin: 0 26px 14px 26px;
a { a {
display: block; display: block;
padding-left: lh(.5); padding: 0;
padding-right: 0;
&:hover {
background: transparent;
}
} }
&.expandable, &.expandable,
&.collapsable { &.collapsable {
margin: 0 16px 14px 16px;
@include transition(all .2s);
h4 { h4 {
color: $blue; color: $blue;
font-size: 1em; font-size: 1em;
font-weight: normal; 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 { &.multiple {
padding: lh(.5) 0 lh(.5) lh(.5);
a { a {
@include inline-block; @include inline-block;
...@@ -121,10 +141,10 @@ div.info-wrapper { ...@@ -121,10 +141,10 @@ div.info-wrapper {
li { li {
border-bottom: 0; border-bottom: 0;
border-top: 1px solid $border-color; border-top: 1px solid #e6e6e6;
@include box-shadow(inset 0 1px 0 #eee); font-size: 0.9em;
font-size: 1em; margin: 0;
padding: lh(.5) 0 lh(.5) lh(.5); padding: 15px 30px;
a { a {
@include inline-block; @include inline-block;
...@@ -138,11 +158,11 @@ div.info-wrapper { ...@@ -138,11 +158,11 @@ div.info-wrapper {
} }
div.hitarea { div.hitarea {
background-image: url('../images/treeview-default.gif'); background-image: url('../images/treeview-default.gif') no-repeat;
display: block; display: block;
height: 100%; height: 100%;
margin-left: 0; margin-left: 0;
max-height: 30px; max-height: 20px;
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -157,20 +177,20 @@ div.info-wrapper { ...@@ -157,20 +177,20 @@ div.info-wrapper {
} }
&.expandable-hitarea { &.expandable-hitarea {
background-position: -72px 7px; background-position: -72px 0px;
} }
&.collapsable-hitarea { &.collapsable-hitarea {
background-position: -55px -15px; background-position: -55px -23px;
} }
} }
h3 { h3 {
border-bottom: 0; border-bottom: 0;
@include box-shadow(none); @include box-shadow(none);
color: #aaa; color: #888;
font-size: 1em; font-size: 1em;
margin-bottom: em(6); margin-bottom: 0;
} }
p { p {
......
lms/static/sass/course/_textbook.scss
div.book-wrapper { div.book-wrapper {
@extend .table-wrapper; @extend .table-wrapper;
#open_close_accordion {
display: none;
}
section.book-sidebar { section.book-sidebar {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 10px 0;
border-radius: 3px 0 0 3px;
border-right: 1px solid #ccc;
ul#booknav { ul#booknav {
font-size: em(14); font-size: em(14);
...@@ -32,7 +39,7 @@ div.book-wrapper { ...@@ -32,7 +39,7 @@ div.book-wrapper {
li { li {
background: none; background: none;
border-bottom: 0; border-bottom: 0;
padding-left: lh(); padding-left: lh();
a { a {
padding: 0; padding: 0;
...@@ -49,7 +56,7 @@ div.book-wrapper { ...@@ -49,7 +56,7 @@ div.book-wrapper {
div.hitarea { div.hitarea {
background-image: url('../images/treeview-default.gif'); background-image: url('../images/treeview-default.gif');
margin-left: -22px;
position: relative; position: relative;
top: 4px; top: 4px;
...@@ -62,26 +69,23 @@ div.book-wrapper { ...@@ -62,26 +69,23 @@ div.book-wrapper {
ul { ul {
background: none; background: none;
margin-top: lh(.25); margin-top: lh(.25);
border-top: 1px solid $border-color;
padding-top: lh(.25); padding-top: lh(.25);
li { li {
padding-bottom: lh(.25); padding-bottom: 10px;
} }
} }
} }
> li { > li {
border-bottom: 1px solid $border-color; padding: 5px 6px;
padding: 7px 7px 7px 30px; margin: 0 16px 5px 25px;
} }
} }
} }
section.book { section.book {
@extend .content; @extend .content;
padding-right: 0;
padding-left: lh();
nav { nav {
@extend .clearfix; @extend .clearfix;
......
lms/static/sass/course/base/_base.scss
body { body {
min-width: 980px; 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 { body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
...@@ -11,16 +13,37 @@ table { ...@@ -11,16 +13,37 @@ table {
table-layout: fixed; table-layout: fixed;
} }
a {
&:hover {
color: $pink;
text-decoration: none !important;
}
}
.content-wrapper {
background: none;
border: none;
}
.container { .container {
padding: lh(2); padding: 20px 0 0 0;
> div { > div {
display: table; display: table;
width: 100%;
table-layout: fixed; 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 { form {
label { label {
display: block; display: block;
...@@ -75,11 +98,7 @@ img { ...@@ -75,11 +98,7 @@ img {
max-width: 100%; max-width: 100%;
} }
.container {
padding: em(40) 0;
}
::selection, ::-moz-selection, ::-webkit-selection { ::selection, ::-moz-selection, ::-webkit-selection {
background:#444; background: #444;
color:#fff; color: #fff;
} }
lms/static/sass/course/base/_extends.scss
...@@ -37,7 +37,7 @@ h1.top-header { ...@@ -37,7 +37,7 @@ h1.top-header {
.content { .content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
padding-right: lh(); padding: 2em 2.5em;
vertical-align: top; vertical-align: top;
width: flex-grid(9) + flex-gutter(); width: flex-grid(9) + flex-gutter();
...@@ -47,34 +47,28 @@ h1.top-header { ...@@ -47,34 +47,28 @@ h1.top-header {
} }
.sidebar { .sidebar {
border-right: 1px solid #C8C8C8;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 14px;
position: relative; position: relative;
vertical-align: top; vertical-align: top;
width: flex-grid(3); width: flex-grid(3);
background: $sidebar-color;
&: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;
}
h1, h2 { h1, h2 {
font-size: em(20); font-size: em(20);
font-weight: 100; font-weight: bold;
letter-spacing: 0; letter-spacing: 0;
text-transform: none; text-transform: none;
font-family: $sans-serif; font-family: $sans-serif;
text-align: left; text-align: left;
font-style: italic; font-style: normal;
}
h1 {
font-size: 18px;
padding: 32px 26px 20px 26px;
} }
a { a {
...@@ -106,7 +100,7 @@ h1.top-header { ...@@ -106,7 +100,7 @@ h1.top-header {
} }
&.active { &.active {
@extend .bottom-border; // @extend .bottom-border;
color: #000; color: #000;
font-weight: bold; font-weight: bold;
...@@ -122,7 +116,7 @@ h1.top-header { ...@@ -122,7 +116,7 @@ h1.top-header {
padding-left: 0; padding-left: 0;
li { li {
@extend .bottom-border; // @extend .bottom-border;
@extend .clearfix; @extend .clearfix;
background: none; background: none;
position: relative; position: relative;
......
lms/static/sass/course/courseware/_courseware.scss
...@@ -12,8 +12,7 @@ div.course-wrapper { ...@@ -12,8 +12,7 @@ div.course-wrapper {
section.course-content { section.course-content {
@extend .content; @extend .content;
padding-right: 0; padding: 40px;
padding-left: lh();
h1 { h1 {
margin: 0 0 lh(); margin: 0 0 lh();
...@@ -46,6 +45,7 @@ div.course-wrapper { ...@@ -46,6 +45,7 @@ div.course-wrapper {
ol.vert-mod { ol.vert-mod {
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 1.4;
> li { > li {
@extend .clearfix; @extend .clearfix;
...@@ -224,3 +224,12 @@ div.course-wrapper { ...@@ -224,3 +224,12 @@ div.course-wrapper {
} }
} }
} }
.xmodule_VideoModule {
margin-bottom: 30px;
}
lms/static/sass/course/courseware/_sidebar.scss
section.course-index { section.course-index {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
@include border-radius(3px 0 0 3px);
border-right: 1px solid #ddd;
#open_close_accordion {
display: none;
}
header { header {
max-height: 47px; max-height: 47px;
...@@ -11,10 +17,11 @@ section.course-index { ...@@ -11,10 +17,11 @@ section.course-index {
} }
div#accordion { div#accordion {
width: auto;
font-size: 14px;
h3 { h3 {
@include border-radius(0); @include border-radius(0);
border-top: 1px solid lighten($border-color, 10%);
font-size: em(16, 18);
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
...@@ -24,7 +31,6 @@ section.course-index { ...@@ -24,7 +31,6 @@ section.course-index {
&:hover { &:hover {
color: #666; color: #666;
background: #f6f6f6;
} }
&.ui-state-hover { &.ui-state-hover {
...@@ -40,6 +46,7 @@ section.course-index { ...@@ -40,6 +46,7 @@ section.course-index {
a { a {
@include border-radius(0); @include border-radius(0);
@include box-shadow(none); @include box-shadow(none);
padding-left: 19px;
} }
&.ui-state-active { &.ui-state-active {
...@@ -52,28 +59,50 @@ section.course-index { ...@@ -52,28 +59,50 @@ section.course-index {
} }
span.ui-icon { span.ui-icon {
left: 0;
background-image: url("/static/images/ui-icons_222222_256x240.png"); background-image: url("/static/images/ui-icons_222222_256x240.png");
opacity: .3; 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 { ul.ui-accordion-content {
background: transparent; background: transparent;
border: none; border: none;
@include border-radius(0); @include border-radius(0);
font-size: em(14, 18);
margin: 0; margin: 0;
padding: 1em 1.5em; padding: 9px 0 9px 9px;
li { li {
border-bottom: 0; border-bottom: 0;
@include border-radius(0); @include border-radius(0);
margin-bottom: lh(.5); margin-bottom: 4px;
a { a {
background: transparent; background: transparent;
border: 1px solid transparent;
@include border-radius(4px); @include border-radius(4px);
display: block; display: block;
padding: 5px 36px 5px 10px; padding: 5px 36px 5px 10px;
...@@ -84,39 +113,18 @@ section.course-index { ...@@ -84,39 +113,18 @@ section.course-index {
font-weight: bold; font-weight: bold;
font-family: $sans-serif; font-family: $sans-serif;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.3;
span.subtitle { span.subtitle {
color: #666; color: #666;
font-size: 13px;
font-weight: normal; font-weight: normal;
display: block; 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 { &:hover {
@include background-image(linear-gradient(-90deg, rgba(245,245,245, 0.4), rgba(230,230,230, 0.4))); background: rgba(0, 0, 0, .1);
border-color: rgb(200,200,200);
&:after {
opacity: 1;
right: 15px;
@include transition();
}
> a p { > a p {
color: #333; color: #333;
...@@ -136,8 +144,23 @@ section.course-index { ...@@ -136,8 +144,23 @@ section.course-index {
&.active { &.active {
font-weight: bold; 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 { > 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 { &:after {
opacity: 1; opacity: 1;
......
lms/static/sass/course/discussion/_discussion.scss
...@@ -3,15 +3,16 @@ body.askbot { ...@@ -3,15 +3,16 @@ body.askbot {
section.container { section.container {
div.discussion-wrapper { div.discussion-wrapper {
@extend .table-wrapper; @extend .table-wrapper;
display: table;
div.discussion-content { div.discussion-content {
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
min-width: 650px; min-width: 650px;
padding-right: lh(); padding: 40px;
vertical-align: top;
width: flex-grid(9) + flex-gutter(); width: flex-grid(9) + flex-gutter();
a.tabula-rasa, .tabula-rasa{ a.tabula-rasa, .tabula-rasa{
@extend .light-button; @extend .light-button;
@include border-radius(5px); @include border-radius(5px);
......
lms/static/sass/course/discussion/_sidebar.scss
...@@ -2,9 +2,10 @@ ...@@ -2,9 +2,10 @@
div.discussion-wrapper aside { div.discussion-wrapper aside {
@extend .sidebar; @extend .sidebar;
border-left: 1px solid $border-color; border-left: 1px solid #ccc;
border-right: 0; border-right: 0;
width: flex-grid(3); width: flex-grid(3);
border-radius: 0 3px 3px 0;
&:after { &:after {
left: -1px; left: -1px;
...@@ -16,9 +17,7 @@ div.discussion-wrapper aside { ...@@ -16,9 +17,7 @@ div.discussion-wrapper aside {
} }
h1 { h1 {
@extend .bottom-border; margin-bottom: 0;
padding: lh(.5) lh();
margin-bottom: em(16, 20);
} }
h2 { h2 {
...@@ -54,7 +53,7 @@ div.discussion-wrapper aside { ...@@ -54,7 +53,7 @@ div.discussion-wrapper aside {
div.box { div.box {
display: block; display: block;
padding: lh(.5) lh(); padding: 18px 26px;
border-top: 1px solid lighten($border-color, 10%); border-top: 1px solid lighten($border-color, 10%);
&:first-child { &:first-child {
...@@ -67,7 +66,7 @@ div.discussion-wrapper aside { ...@@ -67,7 +66,7 @@ div.discussion-wrapper aside {
li { li {
border-bottom: 0; border-bottom: 0;
background: #eee; background: #ddd;
padding: 6px 10px 6px 5px; padding: 6px 10px 6px 5px;
a { a {
...@@ -298,6 +297,7 @@ div.discussion-wrapper aside { ...@@ -298,6 +297,7 @@ div.discussion-wrapper aside {
div.view-profile { div.view-profile {
border-top: 0; border-top: 0;
padding-top: 0;
a { a {
@extend .gray-button; @extend .gray-button;
......
lms/static/sass/course/discussion/_tags.scss
...@@ -10,7 +10,7 @@ ul.tags { ...@@ -10,7 +10,7 @@ ul.tags {
} }
li { li {
background: #eee; background: #ddd;
color: #555; color: #555;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
...@@ -19,7 +19,7 @@ ul.tags { ...@@ -19,7 +19,7 @@ ul.tags {
padding: 6px 10px 6px 5px; padding: 6px 10px 6px 5px;
&:before { &:before {
border-color:transparent #eee transparent transparent; border-color:transparent #ddd transparent transparent;
border-style:solid; border-style:solid;
border-width:12px 10px 12px 0; border-width:12px 10px 12px 0;
content:""; content:"";
......
lms/static/sass/course/instructor/_instructor.scss 0 → 100644
.instructor-dashboard-wrapper {
@extend .table-wrapper;
display: table;
section.instructor-dashboard-content {
@extend .content;
padding: 40px;
width: 100%;
h1 {
@extend .top-header;
}
}
}
lms/static/sass/course/layout/_courseware_header.scss
nav.course-material { nav.course-material {
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
background: #f6f6f6; border-bottom: none;
border-bottom: 1px solid rgb(200,200,200);
margin: 0px auto 0px; margin: 0px auto 0px;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
...@@ -16,33 +15,32 @@ nav.course-material { ...@@ -16,33 +15,32 @@ nav.course-material {
ol.course-tabs { ol.course-tabs {
@include border-top-radius(4px); @include border-top-radius(4px);
@include clearfix; @include clearfix;
padding: 10px 0 0 0; padding: 28px 0 10px 0;
margin-left: 10px;
li { li {
float: left; float: left;
list-style: none; list-style: none;
margin-right: 6px;
a { a {
color: darken($lighter-base-font-color, 20%); border-radius: 3px;
color: #555;
display: block; display: block;
text-align: center; text-align: center;
padding: 8px 13px 12px; padding: 10px 13px 12px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: bold;
text-decoration: none; text-decoration: none;
text-shadow: 0 1px rgb(255,255,255);
&:hover { &:hover {
color: $base-font-color; color: #333;
background: rgba(255, 255, 255, .4);
} }
&.active { &.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; color: $blue;
background: rgba(255, 255, 255, .8);
} }
} }
} }
...@@ -57,7 +55,55 @@ nav.course-material { ...@@ -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 { .find-courses-button {
display: none; display: none;
} }
...@@ -68,8 +114,9 @@ nav.course-material { ...@@ -68,8 +114,9 @@ nav.course-material {
float: left; float: left;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
line-height: 40px; color: #777;
letter-spacing: 0; letter-spacing: 0;
margin-top: 9px;
text-transform: none; text-transform: none;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
white-space: nowrap; white-space: nowrap;
...@@ -79,7 +126,16 @@ nav.course-material { ...@@ -79,7 +126,16 @@ nav.course-material {
.provider { .provider {
font: inherit; font: inherit;
font-weight: bold; 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
lms/static/sass/course/layout/_courseware_subnav.scss
nav.course-material { nav.course-material {
@include clearfix; @include clearfix;
@include box-sizing(border-box); @include box-sizing(border-box);
background: #f6f6f6; background: none;
border-bottom: 1px solid rgb(200,200,200);
margin: 0px auto 0px; margin: 0px auto 0px;
padding: 0px; padding: 0px;
width: 100%; width: 100%;
...@@ -37,11 +36,6 @@ nav.course-material { ...@@ -37,11 +36,6 @@ nav.course-material {
} }
&.active { &.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; color: $blue;
} }
} }
......
lms/static/sass/course/layout/_footer.scss 0 → 100644
footer {
border: none;
box-shadow: none;
}
\ No newline at end of file
lms/static/sass/course/wiki/_wiki.scss
section.wiki { section.wiki {
padding-top: 25px; padding-top: 25px;
> header {
height: 33px;
margin-bottom: 36px;
padding-bottom: 26px;
border-bottom: 1px solid $light-gray;
}
.pull-left { .pull-left {
float: left; float: left;
} }
...@@ -16,6 +9,18 @@ section.wiki { ...@@ -16,6 +9,18 @@ section.wiki {
float: right; 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 { ...@@ -27,7 +32,7 @@ section.wiki {
.breadcrumb { .breadcrumb {
list-style: none; list-style: none;
padding-left: 0; padding-left: 0;
margin: 0 0 0 flex-gutter(); margin: 0 0 0 40px;
li { li {
float: left; float: left;
...@@ -68,7 +73,7 @@ section.wiki { ...@@ -68,7 +73,7 @@ section.wiki {
.global-functions { .global-functions {
display: block; display: block;
width: auto; width: auto;
margin-right: flex-gutter(); margin-right: 20px;
} }
.add-article-btn { .add-article-btn {
...@@ -129,8 +134,9 @@ section.wiki { ...@@ -129,8 +134,9 @@ section.wiki {
.main-article { .main-article {
float: left; float: left;
width: flex-grid(9); width: flex-grid(9);
margin-left: flex-gutter(); padding: 40px 0 40px 40px;
color: $base-font-color; color: $base-font-color;
@include box-sizing(border-box);
} }
&.view .main-article { &.view .main-article {
...@@ -206,13 +212,14 @@ section.wiki { ...@@ -206,13 +212,14 @@ section.wiki {
.article-functions { .article-functions {
float: left; float: left;
width: flex-grid(2) + flex-gutter(); width: flex-grid(3);
margin-left: flex-grid(1); padding: 40px 40px;
@include box-sizing(border-box);
.timestamp { .timestamp {
margin: 4px 0 15px; margin-top: 15px;
padding: 0 0 15px 5px; padding: 15px 0 0 10px;
border-bottom: 1px solid $light-gray; border-top: 1px solid $light-gray;
.label { .label {
font-size: 0.7em; font-size: 0.7em;
...@@ -236,7 +243,8 @@ section.wiki { ...@@ -236,7 +243,8 @@ section.wiki {
a { a {
color: $blue; color: $blue;
.icon-view { .icon-view,
.icon-home {
background-position: -25px 0; background-position: -25px 0;
} }
...@@ -244,11 +252,13 @@ section.wiki { ...@@ -244,11 +252,13 @@ section.wiki {
background-position: -25px -25px; background-position: -25px -25px;
} }
.icon-changes { .icon-changes,
.icon-time {
background-position: -25px -49px; background-position: -25px -49px;
} }
.icon-attachments { .icon-attachments,
.icon-file {
background-position: -25px -73px; background-position: -25px -73px;
} }
...@@ -280,7 +290,8 @@ section.wiki { ...@@ -280,7 +290,8 @@ section.wiki {
background: url(../images/wiki-icons.png) no-repeat; background: url(../images/wiki-icons.png) no-repeat;
} }
.icon-view { .icon-view,
.icon-home {
background-position: 0 0; background-position: 0 0;
} }
...@@ -288,11 +299,13 @@ section.wiki { ...@@ -288,11 +299,13 @@ section.wiki {
background-position: 0 -25px; background-position: 0 -25px;
} }
.icon-changes { .icon-changes,
.icon-time {
background-position: 0 -49px; background-position: 0 -49px;
} }
.icon-attachments { .icon-attachments,
.icon-file {
background-position: 0 -73px; background-position: 0 -73px;
} }
...@@ -706,6 +719,10 @@ section.wiki { ...@@ -706,6 +719,10 @@ section.wiki {
font-size: 0.8em; font-size: 0.8em;
} }
.attachment-actions {
width: 175px;
}
.attachment-actions .btn { .attachment-actions .btn {
float: right; float: right;
} }
......
lms/static/sass/shared/_footer.scss
...@@ -48,7 +48,6 @@ footer { ...@@ -48,7 +48,6 @@ footer {
a:link, a:visited { a:link, a:visited {
color: $lighter-base-font-color; color: $lighter-base-font-color;
letter-spacing: 1px;
padding: 6px 0px; padding: 6px 0px;
} }
} }
...@@ -70,6 +69,7 @@ footer { ...@@ -70,6 +69,7 @@ footer {
position: relative; position: relative;
width: 47px; width: 47px;
vertical-align: middle; vertical-align: middle;
@include transition(none);
&:hover { &:hover {
background-position: 0 0; background-position: 0 0;
...@@ -90,7 +90,6 @@ footer { ...@@ -90,7 +90,6 @@ footer {
a { a {
color: $lighter-base-font-color; color: $lighter-base-font-color;
@include inline-block; @include inline-block;
letter-spacing: 1px;
margin-right: 20px; margin-right: 20px;
padding-top: 2px; padding-top: 2px;
vertical-align: middle; vertical-align: middle;
...@@ -165,7 +164,6 @@ footer { ...@@ -165,7 +164,6 @@ footer {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font-family: $serif; font-family: $serif;
font-style: italic; font-style: italic;
letter-spacing: 1px;
line-height: 1.6em; line-height: 1.6em;
margin-left: 20px; margin-left: 20px;
text-transform: lowercase; text-transform: lowercase;
......
lms/static/sass/shared/_header.scss
...@@ -136,6 +136,7 @@ header.global { ...@@ -136,6 +136,7 @@ header.global {
&.user { &.user {
float: right; float: right;
margin-top: 4px;
> li.primary { > li.primary {
display: block; display: block;
...@@ -151,22 +152,22 @@ header.global { ...@@ -151,22 +152,22 @@ header.global {
> a { > a {
@include border-radius(0 4px 4px 0); @include border-radius(0 4px 4px 0);
border-left: none; border-left: none;
padding: 5px 8px 7px 8px;
} }
} }
} }
a.user-link { a.user-link {
padding: 10px 12px 10px 42px; padding: 6px 12px 8px 35px;
position: relative; position: relative;
text-transform: none; text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
.avatar { .avatar {
//background: rgb(220,220,220); @include background-image(url('../images/small-header-home-icon.png'));
@include background-image(url('../images/portal-icons/home-icon.png')); background-repeat: no-repeat;
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));
height: 26px; height: 26px;
@include inline-block; @include inline-block;
left: 8px; left: 8px;
...@@ -194,7 +195,7 @@ header.global { ...@@ -194,7 +195,7 @@ header.global {
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 50px; top: 34px;
width: 170px; width: 170px;
z-index: 3; z-index: 3;
......
lms/templates/accordion.html
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<%def name="make_chapter(chapter)"> <%def name="make_chapter(chapter)">
<h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a> <div class="chapter">
</h3> <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
</h3>
<ul> <ul>
% for section in chapter['sections']: % for section in chapter['sections']:
<li${' class="active"' if 'active' in section and section['active'] else ''}> <li${' class="active"' if 'active' in section and section['active'] else ''}>
<a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}"> <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
<p>${section['display_name']} <p>${section['display_name']}
<span class="subtitle"> <span class="subtitle">
${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''} ${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
</span> </span>
</p> </p>
</a> </a>
</li> </li>
% endfor % endfor
</ul> </ul>
</div>
</%def> </%def>
% for chapter in toc: % for chapter in toc:
......
lms/templates/courseware/courseware.html
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
<%block name="js_extra"> <%block name="js_extra">
<script type="text/javascript" src="${static.url('js/vendor/jquery.scrollTo-1.4.2-min.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/jquery.scrollTo-1.4.2-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/jquery.sequence.js')}"></script>
## codemirror ## codemirror
<script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script> <script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>
......
lms/templates/courseware/gradebook.html
...@@ -67,9 +67,9 @@ ...@@ -67,9 +67,9 @@
<thead> <thead>
<tr> <!-- Header Row --> <tr> <!-- Header Row -->
%for section in templateSummary['section_breakdown']: %for section in templateSummary['section_breakdown']:
<th>${section['label']}</th> <th><div class="assignment-label">${section['label']}</div></th>
%endfor %endfor
<th>Total</th> <th><div class="assignment-label">Total</div></th>
</tr> </tr>
</thead> </thead>
......
lms/templates/navigation.html
...@@ -5,7 +5,11 @@ ...@@ -5,7 +5,11 @@
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
<header class="global" aria-label="Global Navigation"> %if course:
<header class="global slim" aria-label="Global Navigation">
%else:
<header class="global" aria-label="Global Navigation">
%endif
<nav> <nav>
<h1 class="logo"><a href="${reverse('root')}"></a></h1> <h1 class="logo"><a href="${reverse('root')}"></a></h1>
......
lms/templates/seq_module.html
<div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-course_modx_root="/course/modx" > <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-course_modx_root="/course/modx" >
<nav aria-label="Section Navigation" class="sequence-nav"> <nav aria-label="Section Navigation" class="sequence-nav">
<ol id="sequence-list"> <div class="sequence-list-wrapper">
% for idx, item in enumerate(items): <ol id="sequence-list">
## TODO (vshnayder): add item.progress_detail either to the title or somewhere else. % for idx, item in enumerate(items):
## Make sure it gets updated after ajax calls. ## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
## implementation note: will need to figure out how to handle combining detail ## Make sure it gets updated after ajax calls.
## statuses of multiple modules in js. ## implementation note: will need to figure out how to handle combining detail
<li> ## statuses of multiple modules in js.
<a class="seq_${item['type']} inactive progress-${item['progress_status']}" data-element="${idx+1}"> <li>
<p>${item['title']}</p> <a class="seq_${item['type']} inactive progress-${item['progress_status']}" data-element="${idx+1}">
</a> <p>${item['title']}</p>
</li> </a>
% endfor </li>
</ol> % endfor
</ol>
</div>
<ul class="sequence-nav-buttons"> <ul class="sequence-nav-buttons">
<li class="prev"><a href="#">Previous</a></li> <li class="prev"><a href="#">Previous</a></li>
...@@ -32,3 +34,15 @@ ...@@ -32,3 +34,15 @@
</ul> </ul>
</nav> </nav>
</div> </div>
<script type="text/javascript">
var sequenceNav;
$(document).ready(function() {
// console.log($('.sequence-nav'));
sequenceNav = new SequenceNav($('.sequence-nav'));
console.log(sequenceNav);
});
</script>
lms/templates/wiki/article.html
...@@ -22,14 +22,14 @@ ...@@ -22,14 +22,14 @@
{% endblock %} {% endblock %}
</article> </article>
<div class="article-functions"> <div class="article-functions">
<ul class="nav nav-tabs">
{% include "wiki/includes/article_menu.html" %}
</ul>
<div class="timestamp"> <div class="timestamp">
<span class="label">{% trans "Last modified:" %}</span><br /> <span class="label">{% trans "Last modified:" %}</span><br />
<span class="date">{{ article.current_revision.modified }}</span> <span class="date">{{ article.current_revision.modified }}</span>
</div> </div>
<ul class="nav nav-tabs">
{% include "wiki/includes/article_menu.html" %}
</ul>
</div> </div>
</div> </div>
......
lms/templates/wiki/base.html
...@@ -51,24 +51,24 @@ ...@@ -51,24 +51,24 @@
{% endif %} {% endif %}
<section class="container wiki {{ selected_tab }}"> <section class="container wiki {{ selected_tab }}">
<div class="wiki-wrapper">
{% block wiki_body %}
{% block wiki_breadcrumbs %}{% endblock %}
{% block wiki_body %} {% if messages %}
{% for message in messages %}
{% block wiki_breadcrumbs %}{% endblock %} <div class="alert alert-{{ message.tags }}">
<a class="close" data-dismiss="alert" href="#">&times;</a>
{% if messages %} {{ message }}
{% for message in messages %} </div>
<div class="alert alert-{{ message.tags }}"> {% endfor %}
<a class="close" data-dismiss="alert" href="#">&times;</a> {% endif %}
{{ message }}
</div> {% block wiki_contents %}{% endblock %}
{% endfor %}
{% endif %} {% endblock %}
</div>
{% block wiki_contents %}{% endblock %}
{% endblock %}
</section> </section>
{% endblock %} {% endblock %}
lms/templates/wiki/includes/article_menu.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<li class="${"active" if selected_tab == "view" else ""}"> <li class="${"active" if selected_tab == "view" else ""}">
<a href="${reverse('wiki:get', kwargs={'article_id' : article.id, 'path' : urlpath.path})}"> <a href="${reverse('wiki:get', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
<span class="icon-home"></span> <span class="icon-home icon"></span>
View View
</a> </a>
</li> </li>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
%if article.can_write(user): %if article.can_write(user):
<li class="${"active" if selected_tab == "edit" else ""}"> <li class="${"active" if selected_tab == "edit" else ""}">
<a href="${reverse('wiki:edit', kwargs={'article_id' : article.id, 'path' : urlpath.path})}"> <a href="${reverse('wiki:edit', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
<span class="icon-edit"></span> <span class="icon-edit icon"></span>
Edit Edit
</a> </a>
</li> </li>
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<li class="${"active" if selected_tab == "history" else ""}"> <li class="${"active" if selected_tab == "history" else ""}">
<a href="${reverse('wiki:history', kwargs={'article_id' : article.id, 'path' : urlpath.path})}"> <a href="${reverse('wiki:history', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
<span class="icon-time"></span> <span class="icon-changes icon"></span>
Changes Changes
</a> </a>
</li> </li>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
%if hasattr(plugin, "article_tab"): %if hasattr(plugin, "article_tab"):
<li class="${"active" if selected_tab == plugin.slug else ""}"> <li class="${"active" if selected_tab == plugin.slug else ""}">
<a href="${reverse('wiki:plugin', kwargs={'slug' : plugin.slug, 'article_id' : article.id, 'path' : urlpath.path}) }"> <a href="${reverse('wiki:plugin', kwargs={'slug' : plugin.slug, 'article_id' : article.id, 'path' : urlpath.path}) }">
<span class="${plugin.article_tab[1]}"></span> <span class="${plugin.article_tab[1]} icon"></span>
${plugin.article_tab[0]} ${plugin.article_tab[0]}
</a> </a>
</li> </li>
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
%if not user.is_anonymous(): %if not user.is_anonymous():
<li class="${"active" if selected_tab == "settings" else ""}"> <li class="${"active" if selected_tab == "settings" else ""}">
<a href="${reverse('wiki:settings', kwargs={'article_id' : article.id, 'path' : urlpath.path})}"> <a href="${reverse('wiki:settings', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
<span class="icon-wrench"></span> <span class="icon-settings icon"></span>
Settings Settings
</a> </a>
</li> </li>
......
lms/templates/wiki/settings.html
...@@ -35,16 +35,16 @@ ...@@ -35,16 +35,16 @@
<div class="article-functions"> <div class="article-functions">
<div class="timestamp">
<span class="label">{% trans "Last modified:" %}</span><br />
<span class="date">{{ article.current_revision.modified }}</span>
</div>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
{% with "settings" as selected %} {% with "settings" as selected %}
{% include "wiki/includes/article_menu.html" %} {% include "wiki/includes/article_menu.html" %}
{% endwith %} {% endwith %}
</ul> </ul>
<div class="timestamp">
<span class="label">{% trans "Last modified:" %}</span><br />
<span class="date">{{ article.current_revision.modified }}</span>
</div>
</div> </div>
</div> </div>
......
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