Commit 88bcf4f5 by Bridger Maxwell

Merge remote-tracking branch 'origin/master' into feature/bridger/new_wiki

Conflicts:
	lms/templates/wiki/settings.html
parents 6911b932 4caa9ab7
...@@ -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;
} }
} }
} }
......
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;
......
...@@ -15,18 +15,39 @@ from xmodule.errortracker import exc_info_to_str ...@@ -15,18 +15,39 @@ from xmodule.errortracker import exc_info_to_str
log = logging.getLogger(__name__) log = logging.getLogger(__name__)
# NOTE: This is not the most beautiful design in the world, but there's no good
# way to tell if the module is being used in a staff context or not. Errors that get discovered
# at course load time are turned into ErrorDescriptor objects, and automatically hidden from students.
# Unfortunately, we can also have errors when loading modules mid-request, and then we need to decide
# what to show, and the logic for that belongs in the LMS (e.g. in get_module), so the error handler
# decides whether to create a staff or not-staff module.
class ErrorModule(XModule): class ErrorModule(XModule):
def get_html(self): def get_html(self):
'''Show an error. '''Show an error to staff.
TODO (vshnayder): proper style, divs, etc. TODO (vshnayder): proper style, divs, etc.
''' '''
# staff get to see all the details # staff get to see all the details
return self.system.render_template('module-error.html', { return self.system.render_template('module-error.html', {
'staff_access' : True,
'data' : self.definition['data']['contents'], 'data' : self.definition['data']['contents'],
'error' : self.definition['data']['error_msg'], 'error' : self.definition['data']['error_msg'],
}) })
class NonStaffErrorModule(XModule):
def get_html(self):
'''Show an error to a student.
TODO (vshnayder): proper style, divs, etc.
'''
# staff get to see all the details
return self.system.render_template('module-error.html', {
'staff_access' : False,
'data' : "",
'error' : "",
})
class ErrorDescriptor(EditingDescriptor): class ErrorDescriptor(EditingDescriptor):
""" """
Module that provides a raw editing view of broken xml. Module that provides a raw editing view of broken xml.
...@@ -99,3 +120,9 @@ class ErrorDescriptor(EditingDescriptor): ...@@ -99,3 +120,9 @@ class ErrorDescriptor(EditingDescriptor):
err_node = etree.SubElement(root, 'error_msg') err_node = etree.SubElement(root, 'error_msg')
err_node.text = self.definition['data']['error_msg'] err_node.text = self.definition['data']['error_msg']
return etree.tostring(root) return etree.tostring(root)
class NonStaffErrorDescriptor(ErrorDescriptor):
"""
Module that provides non-staff error messages.
"""
module_class = NonStaffErrorModule
...@@ -13,7 +13,6 @@ from xmodule.modulestore import Location ...@@ -13,7 +13,6 @@ from xmodule.modulestore import Location
from xmodule.timeparse import parse_time from xmodule.timeparse import parse_time
from xmodule.x_module import XModule, XModuleDescriptor from xmodule.x_module import XModule, XModuleDescriptor
DEBUG_ACCESS = False DEBUG_ACCESS = False
log = logging.getLogger(__name__) log = logging.getLogger(__name__)
......
import json import json
import logging import logging
import sys
from django.conf import settings from django.conf import settings
from django.contrib.auth.models import User from django.contrib.auth.models import User
...@@ -15,10 +16,12 @@ from courseware.access import has_access ...@@ -15,10 +16,12 @@ from courseware.access import has_access
from mitxmako.shortcuts import render_to_string from mitxmako.shortcuts import render_to_string
from models import StudentModule, StudentModuleCache from models import StudentModule, StudentModuleCache
from static_replace import replace_urls from static_replace import replace_urls
from xmodule.errortracker import exc_info_to_str
from xmodule.exceptions import NotFoundError from xmodule.exceptions import NotFoundError
from xmodule.modulestore import Location from xmodule.modulestore import Location
from xmodule.modulestore.django import modulestore from xmodule.modulestore.django import modulestore
from xmodule.x_module import ModuleSystem from xmodule.x_module import ModuleSystem
from xmodule.error_module import ErrorDescriptor, NonStaffErrorDescriptor
from xmodule_modifiers import replace_course_urls, replace_static_urls, add_histogram, wrap_xmodule from xmodule_modifiers import replace_course_urls, replace_static_urls, add_histogram, wrap_xmodule
log = logging.getLogger("mitx.courseware") log = logging.getLogger("mitx.courseware")
...@@ -73,6 +76,8 @@ def toc_for_course(user, request, course, active_chapter, active_section, course ...@@ -73,6 +76,8 @@ def toc_for_course(user, request, course, active_chapter, active_section, course
student_module_cache = StudentModuleCache.cache_for_descriptor_descendents( student_module_cache = StudentModuleCache.cache_for_descriptor_descendents(
course_id, user, course, depth=2) course_id, user, course, depth=2)
course = get_module(user, request, course.location, student_module_cache, course_id) course = get_module(user, request, course.location, student_module_cache, course_id)
if course is None:
return None
chapters = list() chapters = list()
for chapter in course.get_display_items(): for chapter in course.get_display_items():
...@@ -131,9 +136,9 @@ def get_section(course_module, chapter, section): ...@@ -131,9 +136,9 @@ def get_section(course_module, chapter, section):
return section_module return section_module
def get_module(user, request, location, student_module_cache, course_id, position=None): def get_module(user, request, location, student_module_cache, course_id, position=None):
''' Get an instance of the xmodule class identified by location, """
Get an instance of the xmodule class identified by location,
setting the state based on an existing StudentModule, or creating one if none setting the state based on an existing StudentModule, or creating one if none
exists. exists.
...@@ -146,9 +151,22 @@ def get_module(user, request, location, student_module_cache, course_id, positio ...@@ -146,9 +151,22 @@ def get_module(user, request, location, student_module_cache, course_id, positio
- position : extra information from URL for user-specified - position : extra information from URL for user-specified
position within module position within module
Returns: xmodule instance Returns: xmodule instance, or None if the user does not have access to the
module. If there's an error, will try to return an instance of ErrorModule
if possible. If not possible, return None.
"""
try:
return _get_module(user, request, location, student_module_cache, course_id, position)
except:
# Something has gone terribly wrong, but still not letting it turn into a 500.
log.exception("Error in get_module")
return None
''' def _get_module(user, request, location, student_module_cache, course_id, position=None):
"""
Actually implement get_module. See docstring there for details.
"""
location = Location(location)
descriptor = modulestore().get_instance(course_id, location) descriptor = modulestore().get_instance(course_id, location)
# Short circuit--if the user shouldn't have access, bail without doing any work # Short circuit--if the user shouldn't have access, bail without doing any work
...@@ -198,7 +216,7 @@ def get_module(user, request, location, student_module_cache, course_id, positio ...@@ -198,7 +216,7 @@ def get_module(user, request, location, student_module_cache, course_id, positio
'callback_url': xqueue_callback_url, 'callback_url': xqueue_callback_url,
'default_queuename': xqueue_default_queuename.replace(' ', '_')} 'default_queuename': xqueue_default_queuename.replace(' ', '_')}
def _get_module(location): def inner_get_module(location):
""" """
Delegate to get_module. It does an access check, so may return None Delegate to get_module. It does an access check, so may return None
""" """
...@@ -214,7 +232,7 @@ def get_module(user, request, location, student_module_cache, course_id, positio ...@@ -214,7 +232,7 @@ def get_module(user, request, location, student_module_cache, course_id, positio
xqueue=xqueue, xqueue=xqueue,
# TODO (cpennington): Figure out how to share info between systems # TODO (cpennington): Figure out how to share info between systems
filestore=descriptor.system.resources_fs, filestore=descriptor.system.resources_fs,
get_module=_get_module, get_module=inner_get_module,
user=user, user=user,
# TODO (cpennington): This should be removed when all html from # TODO (cpennington): This should be removed when all html from
# a module is coming through get_html and is therefore covered # a module is coming through get_html and is therefore covered
...@@ -226,7 +244,22 @@ def get_module(user, request, location, student_module_cache, course_id, positio ...@@ -226,7 +244,22 @@ def get_module(user, request, location, student_module_cache, course_id, positio
system.set('position', position) system.set('position', position)
system.set('DEBUG', settings.DEBUG) system.set('DEBUG', settings.DEBUG)
module = descriptor.xmodule_constructor(system)(instance_state, shared_state) try:
module = descriptor.xmodule_constructor(system)(instance_state, shared_state)
except:
log.exception("Error creating module from descriptor {0}".format(descriptor))
# make an ErrorDescriptor -- assuming that the descriptor's system is ok
import_system = descriptor.system
if has_access(user, location, 'staff'):
err_descriptor = ErrorDescriptor.from_xml(str(descriptor), import_system,
error_msg=exc_info_to_str(sys.exc_info()))
else:
err_descriptor = NonStaffErrorDescriptor.from_xml(str(descriptor), import_system,
error_msg=exc_info_to_str(sys.exc_info()))
# Make an error module
return err_descriptor.xmodule_constructor(system)(None, None)
module.get_html = replace_static_urls( module.get_html = replace_static_urls(
wrap_xmodule(module.get_html, module, 'xmodule_display.html'), wrap_xmodule(module.get_html, module, 'xmodule_display.html'),
......
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
Sass Watch:
sass --watch lms/static/sass:lms/static/sass -r ./lms/static/sass/bourbon/lib/bourbon.rb
...@@ -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;
}
} }
} }
......
...@@ -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;
...@@ -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";
......
...@@ -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;
......
...@@ -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 {
......
div.syllabus { div.syllabus {
padding: 0px 10px; padding: 2em 2.5em;
text-align: center; text-align: center;
...@@ -9,15 +9,14 @@ div.syllabus { ...@@ -9,15 +9,14 @@ div.syllabus {
} }
.notes { .notes {
width: 740px; margin: 0px auto 20px;
margin: 0px auto 10px;
} }
table { table {
text-align: left; text-align: left;
margin: 10px auto; margin: 10px 0;
thead { thead {
font-weight: bold; font-weight: bold;
......
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;
......
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;
} }
...@@ -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;
......
...@@ -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;
}
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;
......
...@@ -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);
......
...@@ -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;
......
...@@ -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:"";
......
.instructor-dashboard-wrapper {
@extend .table-wrapper;
display: table;
section.instructor-dashboard-content {
@extend .content;
padding: 40px;
width: 100%;
h1 {
@extend .top-header;
}
}
}
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
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;
} }
} }
......
footer {
border: none;
box-shadow: none;
}
\ No newline at end of file
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;
} }
......
...@@ -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;
......
...@@ -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;
......
<%! 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:
......
...@@ -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>
......
...@@ -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>
......
...@@ -13,12 +13,14 @@ ...@@ -13,12 +13,14 @@
%> %>
<section class="container"> <section class="container">
<div class="syllabus"> <div class="syllabus_wrapper">
<h1> Syllabus </h1> <div class="syllabus">
% if user.is_authenticated(): <h1> Syllabus </h1>
${get_course_syllabus_section(course, 'syllabus')} % if user.is_authenticated():
% else: ${get_course_syllabus_section(course, 'syllabus')}
${get_course_syllabus_section(course, 'guest_syllabus')} % else:
% endif ${get_course_syllabus_section(course, 'guest_syllabus')}
% endif
</div>
</div> </div>
</section> </section>
...@@ -2,10 +2,19 @@ ...@@ -2,10 +2,19 @@
<h1>There has been an error on the <em>MITx</em> servers</h1> <h1>There has been an error on the <em>MITx</em> servers</h1>
<p>We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p> <p>We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>
<h1>Details below:</h1> % if staff_access:
<h1>Details</h1>
<p>Error: ${error | h}</p> <p>Error:
<pre>
${error | h}
</pre>
</p>
<p>Raw data: ${data | h}</p> <p>Raw data:
<pre>${data | h}</pre>
</p>
% endif
</section> </section>
...@@ -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>
......
<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>
...@@ -29,14 +29,14 @@ ...@@ -29,14 +29,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>
......
...@@ -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 %}
...@@ -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>
...@@ -42,7 +42,7 @@ The settings link has been disabled because the notifications app hasn't been in ...@@ -42,7 +42,7 @@ The settings link has been disabled because the notifications app hasn't been in
%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>
......
-e git://github.com/MITx/django-staticfiles.git@6d2504e5c8#egg=django-staticfiles -e git://github.com/MITx/django-staticfiles.git@6d2504e5c8#egg=django-staticfiles
-e git://github.com/MITx/django-pipeline.git#egg=django-pipeline -e git://github.com/MITx/django-pipeline.git#egg=django-pipeline
-e git://github.com/benjaoming/django-wiki.git@afdd97d#egg=django-wiki -e git://github.com/benjaoming/django-wiki.git@63003aa#egg=django-wiki
-e git://github.com/dementrock/pystache_custom.git@776973740bdaad83a3b029f96e415a7d1e8bec2f#egg=pystache_custom-dev -e git://github.com/dementrock/pystache_custom.git@776973740bdaad83a3b029f96e415a7d1e8bec2f#egg=pystache_custom-dev
-e common/lib/capa -e common/lib/capa
-e common/lib/xmodule -e common/lib/xmodule
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