Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Feature/tomg/fall design
This commit is contained in:
David Ormsbee
2012-08-22 10:04:12 -07:00
parent f065959f8a fb1d9ca06c
commit 6a0072a0fb
38 changed files with 638 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
common/lib/xmodule/xmodule/css/sequence/display.scss
View File

@@ -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;
}
}
}

8
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -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;

BIN
common/static/images/sequence-nav/next-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 250 B

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
common/static/images/sequence-nav/previous-icon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 243 B

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
lms/static/images/bg-texture.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
lms/static/images/small-header-home-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
lms/static/images/small-header-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

104
lms/static/js/jquery.sequence.js Normal file
View File

@@ -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 = $('<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);
}

3
lms/static/sass/README.txt Normal file
View File

@@ -0,0 +1,3 @@
Sass Watch:
sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb

18
lms/static/sass/_discussion.scss
View File

@@ -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;
}
}
}

5
lms/static/sass/base/_variables.scss
View File

@@ -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;

4
lms/static/sass/course.scss
View File

@@ -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";

55
lms/static/sass/course/_gradebook.scss
View File

@@ -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;

56
lms/static/sass/course/_info.scss
View File

@@ -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 {

20
lms/static/sass/course/_textbook.scss
View File

@@ -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;

35
lms/static/sass/course/base/_base.scss
View File

@@ -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;
}

30
lms/static/sass/course/base/_extends.scss
View File

@@ -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;

13
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -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;
}

89
lms/static/sass/course/courseware/_sidebar.scss
View File

@@ -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;

5
lms/static/sass/course/discussion/_discussion.scss
View File

@@ -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);

12
lms/static/sass/course/discussion/_sidebar.scss
View File

@@ -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;

4
lms/static/sass/course/discussion/_tags.scss
View File

@@ -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:"";

15
lms/static/sass/course/instructor/_instructor.scss Normal file
View File

@@ -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;
}
}
}

88
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -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;
}
}

8
lms/static/sass/course/layout/_courseware_subnav.scss
View File

@@ -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;
}
}

4
lms/static/sass/course/layout/_footer.scss Normal file
View File

@@ -0,0 +1,4 @@
footer {
border: none;
box-shadow: none;
}

59
lms/static/sass/course/wiki/_wiki.scss
View File

@@ -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;
}

4
lms/static/sass/shared/_footer.scss
View File

@@ -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;

17
lms/static/sass/shared/_header.scss
View File

@@ -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;

32
lms/templates/accordion.html
View File

@@ -1,22 +1,24 @@
<%! from django.core.urlresolvers import reverse %>
<%def name="make_chapter(chapter)">
<h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
</h3>
<div class="chapter">
<h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
</h3>
<ul>
% for section in chapter['sections']:
<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']])}">
<p>${section['display_name']}
<span class="subtitle">
${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
</span>
</p>
</a>
</li>
% endfor
</ul>
<ul>
% for section in chapter['sections']:
<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']])}">
<p>${section['display_name']}
<span class="subtitle">
${section['format']} ${"due " + section['due'] if 'due' in section and section['due'] != '' else ''}
</span>
</p>
</a>
</li>
% endfor
</ul>
</div>
</%def>
% for chapter in toc:

1
lms/templates/courseware/courseware.html
View File

@@ -10,6 +10,7 @@
<%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/flot/jquery.flot.js')}"></script>
<script type="text/javascript" src="${static.url('js/jquery.sequence.js')}"></script>
## codemirror
<script type="text/javascript" src="${static.url('js/vendor/codemirror-compressed.js')}"></script>

4
lms/templates/courseware/gradebook.html
View File

@@ -67,9 +67,9 @@
<thead>
<tr> <!-- Header Row -->
%for section in templateSummary['section_breakdown']:
<th>${section['label']}</th>
<th><div class="assignment-label">${section['label']}</div></th>
%endfor
<th>Total</th>
<th><div class="assignment-label">Total</div></th>
</tr>
</thead>

6
lms/templates/navigation.html
View File

@@ -5,7 +5,11 @@
<%namespace name='static' file='static_content.html'/>
<%! 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>
<h1 class="logo"><a href="${reverse('root')}"></a></h1>

40
lms/templates/seq_module.html
View File

@@ -1,18 +1,20 @@
<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">
<ol id="sequence-list">
% for idx, item in enumerate(items):
## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
## Make sure it gets updated after ajax calls.
## implementation note: will need to figure out how to handle combining detail
## statuses of multiple modules in js.
<li>
<a class="seq_${item['type']} inactive progress-${item['progress_status']}" data-element="${idx+1}">
<p>${item['title']}</p>
</a>
</li>
% endfor
</ol>
<div class="sequence-list-wrapper">
<ol id="sequence-list">
% for idx, item in enumerate(items):
## TODO (vshnayder): add item.progress_detail either to the title or somewhere else.
## Make sure it gets updated after ajax calls.
## implementation note: will need to figure out how to handle combining detail
## statuses of multiple modules in js.
<li>
<a class="seq_${item['type']} inactive progress-${item['progress_status']}" data-element="${idx+1}">
<p>${item['title']}</p>
</a>
</li>
% endfor
</ol>
</div>
<ul class="sequence-nav-buttons">
<li class="prev"><a href="#">Previous</a></li>
@@ -32,3 +34,15 @@
</ul>
</nav>
</div>
<script type="text/javascript">
var sequenceNav;
$(document).ready(function() {
// console.log($('.sequence-nav'));
sequenceNav = new SequenceNav($('.sequence-nav'));
console.log(sequenceNav);
});
</script>

8
lms/templates/wiki/article.html
View File

@@ -22,14 +22,14 @@
{% endblock %}
</article>
<div class="article-functions">
<div class="article-functions">
<ul class="nav nav-tabs">
{% include "wiki/includes/article_menu.html" %}
</ul>
<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">
{% include "wiki/includes/article_menu.html" %}
</ul>
</div>
</div>

34
lms/templates/wiki/base.html
View File

@@ -51,24 +51,24 @@
{% endif %}
<section class="container wiki {{ selected_tab }}">
<div class="wiki-wrapper">
{% block wiki_body %}
{% block wiki_breadcrumbs %}{% endblock %}
{% block wiki_body %}
{% block wiki_breadcrumbs %}{% endblock %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
<a class="close" data-dismiss="alert" href="#">&times;</a>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block wiki_contents %}{% endblock %}
{% endblock %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
<a class="close" data-dismiss="alert" href="#">&times;</a>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block wiki_contents %}{% endblock %}
{% endblock %}
</div>
</section>
{% endblock %}

10
lms/templates/wiki/includes/article_menu.html
View File

@@ -3,7 +3,7 @@
<li class="${"active" if selected_tab == "view" else ""}">
<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
</a>
</li>
@@ -11,7 +11,7 @@
%if article.can_write(user):
<li class="${"active" if selected_tab == "edit" else ""}">
<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
</a>
</li>
@@ -19,7 +19,7 @@
<li class="${"active" if selected_tab == "history" else ""}">
<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
</a>
</li>
@@ -28,7 +28,7 @@
%if hasattr(plugin, "article_tab"):
<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}) }">
<span class="${plugin.article_tab[1]}"></span>
<span class="${plugin.article_tab[1]} icon"></span>
${plugin.article_tab[0]}
</a>
</li>
@@ -38,7 +38,7 @@
%if not user.is_anonymous():
<li class="${"active" if selected_tab == "settings" else ""}">
<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
</a>
</li>

10
lms/templates/wiki/settings.html
View File

@@ -35,16 +35,16 @@
<div class="article-functions">
<div class="timestamp">
<span class="label">{% trans "Last modified:" %}</span><br />
<span class="date">{{ article.current_revision.modified }}</span>
</div>
<div class="article-functions">
<ul class="nav nav-tabs">
{% with "settings" as selected %}
{% include "wiki/includes/article_menu.html" %}
{% endwith %}
</ul>
<div class="timestamp">
<span class="label">{% trans "Last modified:" %}</span><br />
<span class="date">{{ article.current_revision.modified }}</span>
</div>
</div>
</div>