Skip to content

E
edx-platform
Commit 94886643 by Galen Frechette
Options

gets app completly uptodate with prototype

parent 47e06692
Showing with 2221 additions and 626 deletions
lms/static/js/sticky_filter.js 0 → 100644
$(function() {
var offset = $('.filter nav').offset().top;
$(window).scroll(function() {
if (offset <= window.pageYOffset) {
return $('.filter nav').addClass('fixed-top');
}
else if (offset >= window.pageYOffset) {
return $('.filter nav').removeClass('fixed-top');
}
});
});
lms/static/js/sticky_footer.js 0 → 100644
$(function() {
var stickyFooter = function(){
var pageHeight = $('html').height();
var windowHeight = $(window).height();
var footerHeight = $('footer').outerHeight();
var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight;
if (windowHeight < totalHeight) {
return $('footer').removeClass('fixed-bottom');
} else {
return $('footer').addClass('fixed-bottom');
}
};
stickyFooter();
$(window).resize(function() {
console.log("resizing");
stickyFooter();
});
});
lms/static/sass/_base.scss
......@@ -17,8 +17,6 @@ $pink: rgb(182,37,104);
html, body {
background: rgb(255,255,255);
font-size: 75%;
min-height: 100%;
margin: 0px 0px -140px 0px;
}
h1, h2, h3, h4, h5, h6 {
......
lms/static/sass/_base_extends.scss
......@@ -9,277 +9,3 @@
height: 100%;
width: 1px;
}
article.course {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
font-size: 0em;
min-height: 100px;
margin-bottom: 20px;
padding: 10px;
@include transition(all, 0.15s, linear);
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
margin-left: 115px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
margin-right: 80px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
cursor: pointer;
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
}
}
lms/static/sass/_dashboard.scss
.dashboard {
@include clearfix;
margin: 40px 10px;
}
.sidebar {
background: rgb(240,240,240);
float: left;
margin-right: flex-gutter();
width: flex-grid(3);
@media screen and (max-width: 768px) {
float: none;
margin: 0 0 30px 0;
width: flex-grid(12);
}
.sidebar {
background: rgb(240,240,240);
margin-right: flex-gutter();
position: absolute;
width: 250px;
@media screen and (max-width: 768px) {
float: none;
margin: 0 0 30px 0;
position: static;
width: flex-grid(12);
}
header.profile {
.user-info {
@include clearfix;
padding: 10px;
.avatar {
background: rgb(220,220,220);
border: 1px solid rgb(180,180,180);
@include border-radius(4px);
@include box-sizing(border-box);
margin: 0 0 15px 0;
max-width: 100%;
overflow: hidden;
@media screen and (max-width: 768px) {
float: left;
margin: 0px;
margin-right: flex-gutter();
width: flex-grid(3);
}
header.profile {
.user-info {
@include clearfix;
padding: 10px;
img {
.avatar {
background: rgb(220,220,220);
border: 1px solid rgb(180,180,180);
@include border-radius(4px);
display: block;
@include box-sizing(border-box);
margin: 0 0 15px 0;
max-width: 100%;
}
}
.info {
@media screen and (max-width: 768px) {
float: left;
width: flex-grid(9);
}
h2 {
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4));
font: bold 1.2rem/1.4rem $sans-serif;
margin-bottom: 15px;
overflow: hidden;
padding-bottom: 15px;
text-align: center;
text-wrap: nowrap;
text-overflow: ellipsis;
@media screen and (max-width: 768px) {
text-align: left;
margin: 0px;
margin-right: flex-gutter();
position: absolute;
width: 100px;
}
}
> ul {
@include clearfix;
margin: 0px;
padding: 0 0 10px 0;
img {
@include border-radius(4px);
display: block;
max-width: 100%;
}
}
.info {
@media screen and (max-width: 768px) {
padding: 0px;
@include box-sizing(border-box);
float: left;
min-height: 100px;
padding-left: 110px;
width: 100%;
}
li {
list-style: none;
margin-bottom: 10px;
h2 {
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4));
font: bold 1.2rem/1.4rem $sans-serif;
margin-bottom: 15px;
overflow: hidden;
padding-bottom: 15px;
text-align: center;
text-wrap: nowrap;
text-overflow: ellipsis;
@media screen and (max-width: 768px) {
float: left;
margin-right: 10px;
text-align: left;
}
}
&:last-child {
margin-bottom: 0px;
> ul {
@include clearfix;
margin: 0px;
padding: 0 0 10px 0;
@media screen and (max-width: 768px) {
padding: 0px;
}
h3 {
color: $lighter-base-font-color;
font: bold 1rem/1.2rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8);
li {
list-style: none;
margin-bottom: 10px;
@media screen and (max-width: 768px) {
float: left;
margin-right: 10px;
}
span {
font-weight: normal;
text-transform: none;
&:last-child {
margin-bottom: 0px;
}
h3 {
color: $lighter-base-font-color;
font: bold 1rem/1.2rem $sans-serif;
text-shadow: 0 1px rgba(255,255,255, 0.8);
span {
font-weight: normal;
text-transform: none;
}
}
}
}
......@@ -102,58 +106,66 @@
}
}
}
}
.courses {
@include box-sizing(border-box);
margin: 0px;
padding-left: 270px;
.courses {
float: left;
width: flex-grid(9);
@media screen and (max-width: 768px) {
padding: 0px;
}
@media only screen and (max-width: 768px) {
float: none;
width: flex-grid(12);
}
@media only screen and (max-width: 768px) {
float: none;
width: flex-grid(12);
}
nav.course-filters {
background: rgb(230,230,230);
margin-bottom: 30px;
position: relative;
ol.filters {
@include clearfix;
li {
border-right: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center;
&:last-child {
border: none;
}
nav.course-toggle {
background: rgb(230,230,230);
margin-bottom: 30px;
position: relative;
&:hover {
background: rgb(220,220,220);
cursor: pointer;
}
ol.filters {
@include clearfix;
&.selected {
background: rgb(220,220,220);
}
li {
border-right: 1px solid rgb(200,200,200);
@include box-sizing(border-box);
list-style: none;
float: left;
padding: 15px 10px;
width: 25%;
text-align: center;
h2 {
font: normal 1rem/1.2rem $sans-serif;
text-transform: none;
}
&:last-child {
border: none;
}
&:hover {
background: rgb(220,220,220);
cursor: pointer;
}
&.selected {
background: rgb(220,220,220);
}
span.count {
margin: 5px 0 0 0;
display: block;
h2 {
font: normal 1rem/1.2rem $sans-serif;
text-transform: none;
}
span.count {
margin: 5px 0 0 0;
display: block;
}
}
}
}
.course {
width: flex-grid(12);
}
}
}
lms/static/sass/_find_courses.scss
.find-courses {
margin: 0 10px;
> header {
margin-bottom: 30px;
.universities {
margin: 10px auto;
opacity: 0.7;
width: flex-grid(4);
img {
max-width: 100%;
}
span.divider {
@extend .faded-vertical-divider;
@include inline-block;
height: 120px;
vertical-align: middle;
}
}
&:hover {
.university {
header {
background: rgb(240,240,240);
border-bottom: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1));
width: 100%;
.inner-wrapper {
height: 120px;
margin: 0 auto;
max-width: 1200px;
overflow: hidden;
padding: 40px 0px 30px;
position: relative;
width: flex-grid(12);
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
bottom: -300px;
content: "";
display: block;
height: 600px;
margin: 0 auto;
position: absolute;
width: 100%;
z-index: 1;
}
}
}
h2.title {
color: $lighter-base-font-color;
font: normal 1.2rem/1.8rem $serif;
letter-spacing: 1px;
margin-bottom: 50px;
text-transform: uppercase;
text-align: center;
}
.courses {
@include clearfix;
width: flex-grid(12);
.course {
@include box-sizing(border-box);
float: left;
width: flex-grid(6);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
img {
display: block;
margin: 0 auto;
position: relative;
width: 100px;
z-index: 2;
}
&:nth-child(odd) {
margin-right: flex-gutter();
h1 {
color: $lighter-base-font-color;
font: normal 1.2rem/1.8rem $serif;
letter-spacing: 1px;
position: relative;
text-transform: uppercase;
text-align: center;
z-index: 2;
}
}
}
......
lms/static/sass/_shared_course_filter.scss 0 → 100644
.filter {
height: 60px;
nav {
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(230,230,230)));
@include box-shadow(inset 0 0 0 1px rgba(255,255,255, 0.4));
@include box-sizing(border-box);
border: 1px solid rgb(200,200,200);
border-top: none;
@include border-bottom-radius(4px);
@include clearfix;
height: 60px;
padding: 12px 10px;
position: relative;
z-index: 9;
&.fixed-top {
@include box-shadow(0 1px 15px 0 rgba(0,0,0, 0.2), inset 0 0 0 1px rgba(255,255,255, 0.4));
max-width: 1200px;
position: fixed;
top: 0px;
width: flex-grid(12);
}
.dropdown {
float: left;
margin-right: 15px;
position: relative;
.filter-heading {
@include background-image(linear-gradient(-90deg, rgb(250,250,250) 0%, rgb(245,245,245) 50%, rgb(235,235,235) 50%, rgb(230,230,230) 100%));
@include border-radius(4px);
@include box-sizing(border-box);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 1px 0 0 rgba(255,255,255, 0.6));
border: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
cursor: pointer;
font: normal 1.2rem/1.8rem $sans-serif;
height: 36px;
padding: 6px;
position: relative;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
width: 150px;
z-index: 11;
}
ul {
background: rgb(255,255,255);
@include border-radius(0px 4px 4px 4px);
border: 1px solid rgb(200,200,200);
@include box-shadow(0 2px 15px 0 rgba(0,0,0, 0.2));
padding: 10px;
position: absolute;
visibility: hidden;
width: 200px;
z-index: 10;
li {
list-style: none;
a {
}
}
}
&:hover {
.filter-heading {
background: rgb(255,255,255);
@include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255)));
@include border-radius(4px 4px 0px 0px);
border-bottom: none;
@include box-shadow(0 2px 0 -1px rgb(255,255,255));
color: $base-font-color;
height: 40px;
}
ul {
visibility: visible;
}
}
}
form.search {
float: right;
input[type="text"] {
@include border-radius(3px 0px 0px 3px);
height: 36px;
width: 200px;
}
input[type="submit"] {
@include border-radius(0px 3px 3px 0px);
height: 36px;
}
}
}
}
lms/static/sass/_shared_footer.scss
footer {
background: rgb(240,240,240);
height: 100px;
padding: 20px 0px;
padding: 20px 0px 0px;
width: flex-grid(12);
&.fixed-bottom {
position: absolute;
bottom: 0px;
}
nav {
@include clearfix;
max-width: 1200px;
......@@ -15,29 +19,71 @@ footer {
display: block;
float: left;
height: 100%;
margin: 0px 15px 0px 0px;
margin: 3px 15px 0px 0px;
}
ol {
float: right;
float: left;
font-size: 0em;
margin-top: 3px;
margin-top: 6px;
li {
border-right: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
&.right {
float: right;
&:last-child {
li:first-child {
border: none;
}
}
&.social {
float: right;
margin: 0px 30px 0px 0px;
li {
border: none;
padding: 0px 5px;
a:hover {
opacity: 0.7;
}
}
}
li {
border-left: 1px solid rgb(200,200,200);
@include inline-block;
list-style: none;
padding: 0px 15px;
a:link, a:visited {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
padding: 5px 15px;
font: normal 1.2rem/1.6rem $serif;
padding: 5px 0px;
}
}
}
}
.copyright {
background: rgb(230,230,230);
height: 50px;
margin-top: 80px;
width: 100%;
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin: 0 auto;
padding-top: 15px;
//text-align: center;
max-width: 1200px;
a {
border-bottom: 1px solid rgb(200,200,200);
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $sans-serif;
margin-left: 5px;
}
}
}
}
lms/static/sass/_shared_forms.scss
......@@ -10,11 +10,10 @@ form {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6), inset 0 0 3px 0 rgba(0,0,0, 0.1));
@include box-sizing(border-box);
font: normal italic 1.2rem/1.6rem $serif;
height: 45px;
height: 35px;
@include inline-block;
margin-right: flex-gutter();
padding: 5px 12px;
width: flex-grid(3);
vertical-align: top;
&:last-child {
margin-right: 0px;
......@@ -31,9 +30,9 @@ form {
@include button(shiny, $pink);
@include border-radius(3px);
font: normal italic 1.2rem/1.6rem $serif;
height: 45px;
height: 35px;
@include inline-block;
text-transform: uppercase;
width: flex-grid(3);
vertical-align: top;
}
}
lms/static/sass/_shared_list_of_courses.scss 0 → 100644
.courses {
@include box-sizing(border-box);
@include clearfix;
margin: 40px 0px;
padding: 0px 10px;
width: flex-grid(12);
.course {
background: rgb(240,240,240);
border: 1px solid rgb(220,220,220);
@include border-radius(4px);
@include box-sizing(border-box);
float: left;
font-size: 0em;
min-height: 100px;
margin-bottom: 25px;
padding: 10px;
width: flex-grid(6);
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 768px) {
float: none;
margin-right: 0px;
width: flex-grid(12);
}
&:nth-child(odd) {
margin-right: flex-gutter();
}
&:last-child {
margin-bottom: none;
}
> a {
@include clearfix;
display: block;
position: relative;
}
.cover {
background: rgb(225,225,225);
border: 1px solid rgb(150,150,150);
@include border-radius(4px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
float: left;
height: 100px;
margin: 0px;
opacity: 0.8;
overflow: hidden;
position: relative;
@include transition(all, 0.15s, linear);
width: 100px;
@media only screen and (max-width: 320px) {
display: none;
}
.shade {
background: rgba(0,0,0, 0.3);
@include border-radius(4px);
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
@include transition(all, 0.15s, linear);
right: 0px;
}
.arrow {
border-top: 1px solid;
border-left: 1px solid;
border-color: rgb(255,255,255);
@include box-shadow(inset 1px 1px 0 0 rgba(255,255,255, 0.6));
content: "";
display: block;
height: 55px;
left: 40px;
opacity: 0;
position: absolute;
top: 23px;
@include transform(rotate(-45deg));
@include transition(all, 0.15s, linear);
width: 55px;
}
img {
@include border-radius(4px);
display: block;
min-height: 100%;
min-width: 100%;
width: 100%;
}
}
.info {
margin-left: 115px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
> hgroup {
margin-right: 80px;
@media only screen and (max-width: 320px) {
margin: 0px;
}
h2 {
font: bold 1.8rem/2.5rem $sans-serif;
margin-bottom: 2px;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
@include transition(color, 0.15s, linear);
text-overflow: ellipsis;
white-space: nowrap;
}
p {
color: $base-font-color;
font: normal 1rem/1.6rem $sans-serif;
overflow: hidden;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-overflow: ellipsis;
white-space: nowrap;
}
}
.edit, .register {
border: 1px solid rgb(220,220,220);
background: rgb(230,230,230);
color: $lighter-base-font-color;
display: block;
font: normal 12px/14px $sans-serif;
padding: 6px 10px;
position: absolute;
right: 0px;
top: 0px;
@include transition(all, 0.15s, linear);
@media only screen and (max-width: 320px) {
display: none;
}
&:hover {
background: rgb(255,255,255);
color: $blue;
}
}
.meta {
border-top: 1px solid rgb(200,200,200);
@include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.6));
font-size: 1rem;
height: 34px;
margin-top: 10px;
opacity: 0.9;
position: relative;
@include transition(opacity, 0.15s, linear);
width: 100%;
&:hover {
opacity: 0.9;
}
> * {
height: 18px;
position: absolute;
top: 15px;
}
p + p {
margin-top: 0px;
}
.complete {
left: 0px;
p {
font: normal 1rem/1.6rem $serif;
span {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.dates {
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
@include inline-block;
text-align: right;
&:first-child {
border-right: 1px solid rgb(200,200,200);
margin-right: 10px;
padding-right: 10px;
}
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.end-date {
border-left: 1px solid rgb(200,200,200);
right: 0px;
padding-left: 15px;
@media only screen and (max-width: 320px) {
display: none;
}
p {
color: $lighter-base-font-color;
font: normal 1rem/1.6rem $serif;
text-align: right;
time {
color: $base-font-color;
font-family: $sans-serif;
margin-left: 3px;
}
}
}
.progress {
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
left: 90px;
right: 140px;
@media only screen and (max-width: 320px) {
right: 0px;
}
.meter {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-sizing(border-box);
height: 100%;
padding: 2px;
.meter-fill {
@include border-radius(3px);
background: rgb(210,210,210);
height: 100%;
width: 60%;
}
}
}
}
}
&:hover {
background: rgb(245,245,245);
@include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.2));
cursor: pointer;
.edit {
background: rgb(220,220,220);
border-color: rgb(190,190,190);
}
.cover {
opacity: 1;
.shade, .arrow {
opacity: 1;
}
}
h2 {
//color: $blue;
//text-decoration: underline;
}
.meta {
opacity: 0.9;
}
}
}
}
lms/static/sass/application.scss
......@@ -7,6 +7,8 @@
@import 'shared_forms';
@import 'shared_footer';
@import 'shared_header';
@import 'shared_list_of_courses';
@import 'shared_course_filter';
@import 'index';
@import 'dashboard';
......
lms/static/sass/screen.scss deleted 100644 → 0
@import 'bourbon/bourbon';
@import 'reset';
@import 'base';
@import 'base_extends';
@import 'base_animations';
@import 'shared_forms';
@import 'shared_footer';
@import 'shared_header';
@import 'index';
@import 'dashboard';
@import 'course';
@import 'find_courses';
@import 'course_info';
lms/templates/course.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
%for i in xrange(6):
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
</div>
<section class="info">
<hgroup>
<h2>18th Century History</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
<div class="edit">Register</div>
<section class="meta">
<div class="dates">
<p>Starts: <time>6/10/12</time></p>
<p>Ends: <time>9/23/12</time></p>
</div>
</section>
</section>
</a>
</article>
%endfor
lms/templates/course_filter.html 0 → 100644
<section class="filter">
<nav>
<div class="dropdown university">
<div class="filter-heading">
All Universities
</div>
<ul>
<li>
<a href="#">Harvard</a>
</li>
<li>
<a href="#">MIT</a>
</li>
</ul>
</div>
<div class="dropdown subject">
<div class="filter-heading">
All Subjects
</div>
<ul>
<li>
<a href="#">Computer Science</a>
</li>
<li>
<a href="#">History</a>
</li>
</ul>
</div>
<div class="dropdown featured">
<div class="filter-heading">
Newest
</div>
<ul>
<li>
<a href="#">Top Rated</a>
</li>
<li>
<a href="#">Starting soonest</a>
</li>
</ul>
</div>
<form class="search">
<input type="text" placeholder="Search for courses">
<input type="submit">
</form>
</nav>
</section>
lms/templates/courses.html
<%inherit file="main.html" />
<%include file="guest_navigation.html" args="active_page='info'" />
<%namespace name='static' file='static_content.html'/>
<section class="container">
<section class="find-courses">
<header>
<section class="universities">
<img src="${static.url('images/schools.png')}" />
</section>
<div class="faded-hr-divider"></div>
</header>
<h2 class="title">Current Courses offered by <em>MIT</em> and <em>Harvard University</em></h2>
<section class="find-courses">
<header>
<div class="inner-wrapper">
<img src="${static.url('images/edx_bw.png')}" />
<h1>Explore courses from universities around the world.</h1>
</div>
</header>
<section class="container">
<%include file="course_filter.html" />
<section class="courses">
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="${static.url('images/history.png')}" />
</div>
<section class="info">
<hgroup>
<h2>Circuits and Electronics</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
<div class="edit">Register</div>
<section class="meta">
<div class="dates">
<p>Starts: <time>6/10/12</time></p>
<p>Ends: <time>9/23/12</time></p>
</div>
</section>
</section>
</a>
</article>
<%include file="course.html" />
</section>
</section>
</section>
lms/templates/dashboard.html
......@@ -32,7 +32,7 @@
</section>
<section class="courses">
<nav class="course-filters">
<nav class="course-toggle">
<ol class="filters">
<li class="selected">
<h2>All <span class="count">3</span></h2>
......
lms/templates/footer.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
<footer>
<nav>
<a href="/" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<ol>
<li>
<a href="/courses">Find Courses</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contribute</a>
</li>
</ol>
<ol class="right">
<li>
<a href="/dashboard">My Dashboard</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="/index">Logout</a>
</li>
</ol>
<ol class="social">
<li>
<a href="#"><img src="${static.url('images/linkedin.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/facebook.png')}" /></a>
</li>
<li>
<a href="#"><img src="${static.url('images/twitter.png')}" /></a>
</li>
</ol>
</nav>
<section class="copyright">
<p>Copyright &copy; 2012.edX. <a href="#">Some rights reserved.</a></p>
</section>
</footer>
lms/templates/guest_navigation.html deleted 100644 → 0
<header class="app">
<nav>
<a href="/" class="logo">
<img src="/static/images/logo.png" />
</a>
<ol>
<li><a href="/courses">Courses</a></li>
<li><a href="#">How It Works</a></li>
</ol>
<ol class="user">
<li><a href="/dashboard">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ol>
<ol class="secondary">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">faq</a>
</li>
</ol>
</nav>
</header>
lms/templates/index.html
<%inherit file="main.html" />
<%namespace name='static' file='static_content.html'/>
<section class="container">
<section class="home">
<header>
<h1>The Future of Online Education</h1>
<div class="orginizations">
<div class="orginization mit"><img src="/static/images/mit.png" /></div>
<div class="divider left"></div>
<div class="orginization edx"><img src="/static/images/edx.png" /></div>
<div class="divider right"></div>
<div class="orginization harvard"><img src="/static/images/harvard.png" /></div>
</div>
<section class="video-wrapper">
<div class="video-player">
<div class="video-inner">
<iframe width="640" height="360" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</section>
<div class="bottom-divider"></div>
<section class="welcome">
<div class="intro">
<h1>The Future of Online Education</h1>
<p>
EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education.
</p>
</div>
<div class="signup-wrapper">
<section class="sign-up">
<a href="#" class="find-courses">Find Courses</a>
<a href="#" class="create-account">Sign Up</a>
</section>
</div>
</section>
</header>
<section class="welcome">
<div class="intro">
<h2>"The single biggest change in education since the printing press."</h2>
<p>
EdX is a joint partnership between The Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX will offer Harvard and MIT classes online for free. Through this partnership, the institutions aim to extend their collective reach to build a global community of online learners and to improve education for everyone.
</p>
</div>
<div class="signup-wrapper">
<section class="sign-up top">
<a href="#">Sign Up Now</a>
</section>
</div>
</section>
<section class="university-partners">
<section class="partners">
<img src="/static/images/mit_bw.png" />
<img src="/static/images/edx_bw.png" />
<img src="/static/images/harvard_bw.png" />
</section>
</section>
<section class="highlighted-courses">
<article class="course">
<a href="/course_info">
<div class="cover">
<div class="shade"></div>
<div class="arrow"></div>
<img src="/static/images/history.png" />
</div>
<section class="info">
<hgroup>
<h2>18th Century History</h2>
<p>Adam Smith, Harvard University</p>
</hgroup>
</section>
<a href="/university_profile.html">
<img src="${static.url('images/mit_bw.png')}" />
<div class="name">MITx</div>
</a>
</article>
<a href="/university_profile.html">
<img src="${static.url('images/harvard_bw.png')}" />
<div class="name">HarvardX</div>
</a>
</section>
</section>
<section class="sign-up middle">
<form>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<input type="submit" value="Sign Up">
</form>
<section class="courses">
<%include file="course.html" />
</section>
<section class="more-info">
<h2>More Information & News</h2>
<h2>edX News & Announcements</h2>
<section class="news">
<article></article>
<article></article>
......@@ -79,8 +54,5 @@
</section>
</section>
<section class="social-media">
<h2>Social Media</h2>
</section>
</section>
</section>
lms/templates/main.html
......@@ -4,6 +4,7 @@
<head>
<%block name="title"><title>MITx 6.002x</title></%block>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="${static.url('js/jquery.treeview.css')}" type="text/css" media="all" />
% if settings.MITX_FEATURES['USE_DJANGO_PIPELINE']:
......@@ -63,8 +64,11 @@
${self.body()}
<%block name="bodyextra"/>
<%include file="footer.html" />
<%block name="js_extra"/>
<script src="${static.url('js/my_courses_dropdown.js')}"></script>
<script src="${static.url('js/sticky_footer.js')}"></script>
<script src="${static.url('js/sticky_filter.js')}"></script>
</body>
</html>
lms/templates/navigation.html
<%namespace name='static' file='static_content.html'/>
<header class="app" aria-label="Global Navigation">
<nav>
<section class="wrapper">
<a href="${ MITX_ROOT_URL }" class="logo">
<img src="${static.url('images/logo.png')}" />
</a>
<a href="/courses" class="discover-courses">Find Courses</a>
%if user.is_authenticated():
<h1>${ settings.COURSE_TITLE }</h1>
<ol class="user">
<li>
<a href="/dashboard" class="user-dashboard">
<span class="avatar"><img src="/static/images/profile.jpg" /></span>
${ user.username }
</a>
</li>
<li>
<a href="#" class="options">&#9662</a>
<ol class="user-options">
<li><a href="#">Account Settings</a></li>
<li><a href="/logout">Log Out</a></li>
</ol>
</li>
</ol>
<nav class="user">
<ol>
<li>
<a href="/dashboard" class="user-link">
<span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
Neil deGrasse Tyson
</a>
</li>
<li>
<a href="#" class="options">&#9662</a>
<ol class="user-options">
<li><a href="#">Help</a></li>
<li><a href="/logout">Log Out</a></li>
</ol>
</li>
</ol>
</nav>
%else:
<ol>
<li><a href="/courses">Courses</a></li>
<li><a href="#">How It Works</a></li>
</ol>
<ol class="user">
<li><a href="/dashboard">Log In</a></li>
<li><a href="#">Sign Up</a></li>
</ol>
<ol class="secondary">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="#">faq</a>
</li>
</ol>
<nav class="guest">
<ol>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Jobs</a>
</li>
<li>
<a href="/dashboard">Log In</a>
</li>
<li>
<a href="#">Sign Up</a>
</li>
</ol>
</nav>
%endif
</nav>
</section>
</header>
static/coffee/src/calculator.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Calculator = (function() {
function Calculator() {
$('.calc').click(this.toggle);
$('form#calculator').submit(this.calculate).submit(function(e) {
return e.preventDefault();
});
$('div.help-wrapper a').hover(this.helpToggle).click(function(e) {
return e.preventDefault();
});
}
Calculator.prototype.toggle = function() {
$('li.calc-main').toggleClass('open');
$('#calculator_wrapper #calculator_input').focus();
if ($('.calc.closed').length) {
$('.calc').attr('aria-label', 'Open Calculator');
} else {
$('.calc').attr('aria-label', 'Close Calculator');
}
return $('.calc').toggleClass('closed');
};
Calculator.prototype.helpToggle = function() {
return $('.help').toggleClass('shown');
};
Calculator.prototype.calculate = function() {
return $.getWithPrefix('/calculate', {
equation: $('#calculator_input').val()
}, function(data) {
return $('#calculator_output').val(data.result);
});
};
return Calculator;
})();
}).call(this);
static/coffee/src/courseware.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Courseware = (function() {
Courseware.prefix = '';
function Courseware() {
Courseware.prefix = $("meta[name='path_prefix']").attr('content');
new Navigation;
new Calculator;
new FeedbackForm;
Logger.bind();
this.bind();
this.render();
}
Courseware.start = function() {
return new Courseware;
};
Courseware.prototype.bind = function() {
return $('.course-content .sequence, .course-content .tab').bind('contentChanged', this.render);
};
Courseware.prototype.render = function() {
$('.course-content .video').each(function() {
var id;
id = $(this).attr('id').replace(/video_/, '');
return new Video(id, $(this).data('streams'));
});
$('.course-content .problems-wrapper').each(function() {
var id;
id = $(this).attr('id').replace(/problem_/, '');
return new Problem(id, $(this).data('url'));
});
return $('.course-content .histogram').each(function() {
var id;
id = $(this).attr('id').replace(/histogram_/, '');
return new Histogram(id, $(this).data('histogram'));
});
};
return Courseware;
})();
}).call(this);
static/coffee/src/feedback_form.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.FeedbackForm = (function() {
function FeedbackForm() {
$('#feedback_button').click(function() {
var data;
data = {
subject: $('#feedback_subject').val(),
message: $('#feedback_message').val(),
url: window.location.href
};
return $.postWithPrefix('/send_feedback', data, function() {
return $('#feedback_div').html('Feedback submitted. Thank you');
}, 'json');
});
}
return FeedbackForm;
})();
}).call(this);
static/coffee/src/histogram.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Histogram = (function() {
function Histogram(id, rawData) {
this.id = id;
this.rawData = rawData;
this.xTicks = [];
this.yTicks = [];
this.data = [];
this.calculate();
this.render();
}
Histogram.prototype.calculate = function() {
var count, log_count, score, _i, _len, _ref, _ref1, _results;
_ref = this.rawData;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
_ref1 = _ref[_i], score = _ref1[0], count = _ref1[1];
log_count = Math.log(count + 1);
this.data.push([score, log_count]);
this.xTicks.push([score, score.toString()]);
_results.push(this.yTicks.push([log_count, count.toString()]));
}
return _results;
};
Histogram.prototype.render = function() {
return $.plot($("#histogram_" + this.id), [
{
data: this.data,
bars: {
show: true,
align: 'center',
lineWidth: 0,
fill: 1.0
},
color: "#b72121"
}
], {
xaxis: {
min: -1,
max: Math.max.apply(Math, $.map(this.xTicks, function(data) {
return data[0] + 1;
})),
ticks: this.xTicks,
tickLength: 0
},
yaxis: {
min: 0.0,
max: Math.max.apply(Math, $.map(this.yTicks, function(data) {
return data[0] * 1.1;
})),
ticks: this.yTicks,
labelWidth: 50
}
});
};
return Histogram;
})();
}).call(this);
static/coffee/src/logger.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Logger = (function() {
function Logger() {}
Logger.log = function(event_type, data) {
return $.getWithPrefix('/event', {
event_type: event_type,
event: JSON.stringify(data),
page: window.location.href
});
};
Logger.bind = function() {
return window.onunload = function() {
return $.ajax({
url: "" + Courseware.prefix + "/event",
data: {
event_type: 'page_close',
event: '',
page: window.location.href
},
async: false
});
};
};
return Logger;
})();
this.log_event = Logger.log;
}).call(this);
static/coffee/src/main.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
jQuery.postWithPrefix = function(url, data, callback, type) {
return $.post("" + Courseware.prefix + url, data, callback, type);
};
jQuery.getWithPrefix = function(url, data, callback, type) {
return $.get("" + Courseware.prefix + url, data, callback, type);
};
$(function() {
$.ajaxSetup({
headers: {
'X-CSRFToken': $.cookie('csrftoken')
},
dataType: 'json'
});
window.onTouchBasedDevice = function() {
return navigator.userAgent.match(/iPhone|iPod|iPad/i);
};
$("a[rel*=leanModal]").leanModal();
$('#csrfmiddlewaretoken').attr('value', $.cookie('csrftoken'));
if ($('body').hasClass('courseware')) {
Courseware.start();
}
window.submit_circuit = function(circuit_id) {
$("input.schematic").each(function(index, element) {
return element.schematic.update_value();
});
schematic_value($("#schematic_" + circuit_id).attr("value"));
return $.postWithPrefix("/save_circuit/" + circuit_id, {
schematic: schematic_value
}, function(data) {
if (data.results === 'success') {
return alert('Saved');
}
});
};
return window.postJSON = function(url, data, callback) {
return $.postWithPrefix(url, data, callback);
};
});
}).call(this);
static/coffee/src/modules/problem.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Problem = (function() {
function Problem(id, url) {
this.id = id;
this.refreshAnswers = __bind(this.refreshAnswers, this);
this.save = __bind(this.save, this);
this.show = __bind(this.show, this);
this.reset = __bind(this.reset, this);
this.check = __bind(this.check, this);
this.bind = __bind(this.bind, this);
this.element = $("#problem_" + id);
this.content_url = "" + url + "problem_get?id=" + this.id;
this.render();
}
Problem.prototype.$ = function(selector) {
return $(selector, this.element);
};
Problem.prototype.bind = function() {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
window.update_schematics();
this.$('section.action input:button').click(this.refreshAnswers);
this.$('section.action input.check').click(this.check);
this.$('section.action input.reset').click(this.reset);
this.$('section.action input.show').click(this.show);
return this.$('section.action input.save').click(this.save);
};
Problem.prototype.render = function(content) {
if (content) {
this.element.html(content);
return this.bind();
} else {
return this.element.load(this.content_url, this.bind);
}
};
Problem.prototype.check = function() {
var _this = this;
Logger.log('problem_check', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_check", this.answers, function(response) {
switch (response.success) {
case 'incorrect':
case 'correct':
return _this.render(response.contents);
default:
return alert(response.success);
}
});
};
Problem.prototype.reset = function() {
var _this = this;
Logger.log('problem_reset', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_reset", {
id: this.id
}, function(content) {
return _this.render(content);
});
};
Problem.prototype.show = function() {
var _this = this;
if (!this.element.hasClass('showed')) {
Logger.log('problem_show', {
problem: this.id
});
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_show", function(response) {
$.each(response, function(key, value) {
var choice, _i, _len, _results;
if ($.isArray(value)) {
_results = [];
for (_i = 0, _len = value.length; _i < _len; _i++) {
choice = value[_i];
_results.push(_this.$("label[for='input_" + key + "_" + choice + "']").attr({
correct_answer: 'true'
}));
}
return _results;
} else {
return _this.$("#answer_" + key).text(value);
}
});
_this.$('.show').val('Hide Answer');
return _this.element.addClass('showed');
});
} else {
this.$('[id^=answer_]').text('');
this.$('[correct_answer]').attr({
correct_answer: null
});
this.element.removeClass('showed');
return this.$('.show').val('Show Answer');
}
};
Problem.prototype.save = function() {
var _this = this;
Logger.log('problem_save', this.answers);
return $.postWithPrefix("/modx/problem/" + this.id + "/problem_save", this.answers, function(response) {
if (response.success) {
return alert('Saved');
}
});
};
Problem.prototype.refreshAnswers = function() {
this.$('input.schematic').each(function(index, element) {
return element.schematic.update_value();
});
this.$(".CodeMirror").each(function(index, element) {
if (element.CodeMirror.save) {
return element.CodeMirror.save();
}
});
return this.answers = this.$("[id^=input_" + this.id + "_]").serialize();
};
return Problem;
})();
}).call(this);
static/coffee/src/modules/sequence.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Sequence = (function() {
function Sequence(id, elements, tag, position) {
this.id = id;
this.elements = elements;
this.tag = tag;
this.previous = __bind(this.previous, this);
this.next = __bind(this.next, this);
this.goto = __bind(this.goto, this);
this.toggleArrows = __bind(this.toggleArrows, this);
this.element = $("#sequence_" + this.id);
this.buildNavigation();
this.bind();
this.render(position);
}
Sequence.prototype.$ = function(selector) {
return $(selector, this.element);
};
Sequence.prototype.bind = function() {
this.element.bind('contentChanged', this.toggleArrows);
return this.$('#sequence-list a').click(this.goto);
};
Sequence.prototype.buildNavigation = function() {
var _this = this;
return $.each(this.elements, function(index, item) {
var link, list_item, title;
link = $('<a>').attr({
"class": "seq_" + item.type + "_inactive",
'data-element': index + 1
});
title = $('<p>').html(item.title);
list_item = $('<li>').append(link.append(title));
return _this.$('#sequence-list').append(list_item);
});
};
Sequence.prototype.toggleArrows = function() {
this.$('.sequence-nav-buttons a').unbind('click');
if (this.position === 1) {
this.$('.sequence-nav-buttons .prev a').addClass('disabled');
} else {
this.$('.sequence-nav-buttons .prev a').removeClass('disabled').click(this.previous);
}
if (this.position === this.elements.length) {
return this.$('.sequence-nav-buttons .next a').addClass('disabled');
} else {
return this.$('.sequence-nav-buttons .next a').removeClass('disabled').click(this.next);
}
};
Sequence.prototype.render = function(new_position) {
if (this.position !== new_position) {
if (this.position !== void 0) {
this.mark_visited(this.position);
$.postWithPrefix("/modx/" + this.tag + "/" + this.id + "/goto_position", {
position: new_position
});
}
this.mark_active(new_position);
this.$('#seq_content').html(eval(this.elements[new_position - 1].content));
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
this.position = new_position;
return this.element.trigger('contentChanged');
}
};
Sequence.prototype.goto = function(event) {
var new_position;
event.preventDefault();
new_position = $(event.target).data('element');
Logger.log("seq_goto", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.next = function(event) {
var new_position;
event.preventDefault();
new_position = this.position + 1;
Logger.log("seq_next", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.previous = function(event) {
var new_position;
event.preventDefault();
new_position = this.position - 1;
Logger.log("seq_prev", {
old: this.position,
"new": new_position,
id: this.id
});
return this.render(new_position);
};
Sequence.prototype.link_for = function(position) {
return this.$("#sequence-list a[data-element=" + position + "]");
};
Sequence.prototype.mark_visited = function(position) {
return this.link_for(position).attr({
"class": "seq_" + this.elements[position - 1].type + "_visited"
});
};
Sequence.prototype.mark_active = function(position) {
return this.link_for(position).attr({
"class": "seq_" + this.elements[position - 1].type + "_active"
});
};
return Sequence;
})();
}).call(this);
static/coffee/src/modules/tab.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Tab = (function() {
function Tab(id, items) {
this.id = id;
this.items = items;
this.onShow = __bind(this.onShow, this);
this.element = $("#tab_" + id);
this.render();
}
Tab.prototype.$ = function(selector) {
return $(selector, this.element);
};
Tab.prototype.render = function() {
var _this = this;
$.each(this.items, function(index, item) {
var tab;
tab = $('<a>').attr({
href: "#" + (_this.tabId(index))
}).html(item.title);
_this.$('.navigation').append($('<li>').append(tab));
return _this.element.append($('<section>').attr({
id: _this.tabId(index)
}));
});
return this.element.tabs({
show: this.onShow
});
};
Tab.prototype.onShow = function(element, ui) {
this.$('section.ui-tabs-hide').html('');
this.$("#" + (this.tabId(ui.index))).html(eval(this.items[ui.index]['content']));
return this.element.trigger('contentChanged');
};
Tab.prototype.tabId = function(index) {
return "tab-" + this.id + "-" + index;
};
return Tab;
})();
}).call(this);
static/coffee/src/modules/video.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Video = (function() {
function Video(id, videos) {
var _this = this;
this.id = id;
window.player = null;
this.element = $("#video_" + this.id);
this.parseVideos(videos);
this.fetchMetadata();
this.parseSpeed();
$("#video_" + this.id).data('video', this);
if (YT.Player) {
this.embed();
} else {
window.onYouTubePlayerAPIReady = function() {
return $('.course-content .video').each(function() {
return $(this).data('video').embed();
});
};
}
}
Video.prototype.youtubeId = function(speed) {
return this.videos[speed || this.speed];
};
Video.prototype.parseVideos = function(videos) {
var _this = this;
this.videos = {};
return $.each(videos.split(/,/), function(index, video) {
var speed;
video = video.split(/:/);
speed = parseFloat(video[0]).toFixed(2).replace(/\.00$/, '.0');
return _this.videos[speed] = video[1];
});
};
Video.prototype.parseSpeed = function() {
this.setSpeed($.cookie('video_speed'));
return this.speeds = ($.map(this.videos, function(url, speed) {
return speed;
})).sort();
};
Video.prototype.setSpeed = function(newSpeed) {
if (this.videos[newSpeed] !== void 0) {
this.speed = newSpeed;
return $.cookie('video_speed', "" + newSpeed, {
expires: 3650,
path: '/'
});
} else {
return this.speed = '1.0';
}
};
Video.prototype.embed = function() {
return this.player = new VideoPlayer(this);
};
Video.prototype.fetchMetadata = function(url) {
var _this = this;
this.metadata = {};
return $.each(this.videos, function(speed, url) {
return $.get("http://gdata.youtube.com/feeds/api/videos/" + url + "?v=2&alt=jsonc", (function(data) {
return _this.metadata[data.data.id] = data.data;
}), 'jsonp');
});
};
Video.prototype.getDuration = function() {
return this.metadata[this.youtubeId()].duration;
};
return Video;
})();
}).call(this);
static/coffee/src/modules/video/video_caption.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoCaption = (function() {
function VideoCaption(player, youtubeId) {
this.player = player;
this.youtubeId = youtubeId;
this.toggle = __bind(this.toggle, this);
this.seekPlayer = __bind(this.seekPlayer, this);
this.onMouseLeave = __bind(this.onMouseLeave, this);
this.onMovement = __bind(this.onMovement, this);
this.onMouseEnter = __bind(this.onMouseEnter, this);
this.onWindowResize = __bind(this.onWindowResize, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.render();
this.bind();
}
VideoCaption.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoCaption.prototype.bind = function() {
$(window).bind('resize', this.onWindowResize);
$(this.player).bind('resize', this.onWindowResize);
$(this.player).bind('updatePlayTime', this.onUpdatePlayTime);
this.$('.hide-subtitles').click(this.toggle);
return this.$('.subtitles').mouseenter(this.onMouseEnter).mouseleave(this.onMouseLeave).mousemove(this.onMovement).bind('mousewheel', this.onMovement).bind('DOMMouseScroll', this.onMovement);
};
VideoCaption.prototype.captionURL = function() {
return "/static/subs/" + this.youtubeId + ".srt.sjson";
};
VideoCaption.prototype.render = function() {
this.$('.video-wrapper').after("<ol class=\"subtitles\"><li>Attempting to load captions...</li></ol>");
this.$('.video-controls .secondary-controls').append("<a href=\"#\" class=\"hide-subtitles\" title=\"Turn off captions\">Captions</a>");
this.$('.subtitles').css({
maxHeight: this.$('.video-wrapper').height() - 5
});
return this.fetchCaption();
};
VideoCaption.prototype.fetchCaption = function() {
var _this = this;
return $.getWithPrefix(this.captionURL(), function(captions) {
_this.captions = captions.text;
_this.start = captions.start;
return _this.renderCaption();
});
};
VideoCaption.prototype.renderCaption = function() {
var container,
_this = this;
container = $('<ol>');
$.each(this.captions, function(index, text) {
return container.append($('<li>').html(text).attr({
'data-index': index,
'data-start': _this.start[index]
}));
});
this.$('.subtitles').html(container.html());
this.$('.subtitles li[data-index]').click(this.seekPlayer);
return this.$('.subtitles').prepend($('<li class="spacing">').height(this.topSpacingHeight())).append($('<li class="spacing">').height(this.bottomSpacingHeight()));
};
VideoCaption.prototype.search = function(time) {
var index, max, min;
min = 0;
max = this.start.length - 1;
while (min < max) {
index = Math.ceil((max + min) / 2);
if (time < this.start[index]) {
max = index - 1;
}
if (time >= this.start[index]) {
min = index;
}
}
return min;
};
VideoCaption.prototype.onUpdatePlayTime = function(event, time) {
var newIndex;
time = Math.round(Time.convert(time, this.player.currentSpeed(), '1.0') * 1000 + 250);
newIndex = this.search(time);
if (newIndex !== void 0 && this.currentIndex !== newIndex) {
if (this.currentIndex) {
this.$(".subtitles li.current").removeClass('current');
}
this.$(".subtitles li[data-index='" + newIndex + "']").addClass('current');
this.currentIndex = newIndex;
return this.scrollCaption();
}
};
VideoCaption.prototype.onWindowResize = function() {
this.$('.subtitles').css({
maxHeight: this.captionHeight()
});
this.$('.subtitles .spacing:first').height(this.topSpacingHeight());
this.$('.subtitles .spacing:last').height(this.bottomSpacingHeight());
return this.scrollCaption();
};
VideoCaption.prototype.onMouseEnter = function() {
if (this.frozen) {
clearTimeout(this.frozen);
}
return this.frozen = setTimeout(this.onMouseLeave, 10000);
};
VideoCaption.prototype.onMovement = function() {
return this.onMouseEnter();
};
VideoCaption.prototype.onMouseLeave = function() {
if (this.frozen) {
clearTimeout(this.frozen);
}
this.frozen = null;
if (this.player.isPlaying()) {
return this.scrollCaption();
}
};
VideoCaption.prototype.scrollCaption = function() {
if (!this.frozen && this.$('.subtitles .current:first').length) {
return this.$('.subtitles').scrollTo(this.$('.subtitles .current:first'), {
offset: -this.calculateOffset(this.$('.subtitles .current:first'))
});
}
};
VideoCaption.prototype.seekPlayer = function(event) {
var time;
event.preventDefault();
time = Math.round(Time.convert($(event.target).data('start'), '1.0', this.player.currentSpeed()) / 1000);
return $(this.player).trigger('seek', time);
};
VideoCaption.prototype.calculateOffset = function(element) {
return this.captionHeight() / 2 - element.height() / 2;
};
VideoCaption.prototype.topSpacingHeight = function() {
return this.calculateOffset(this.$('.subtitles li:not(.spacing):first'));
};
VideoCaption.prototype.bottomSpacingHeight = function() {
return this.calculateOffset(this.$('.subtitles li:not(.spacing):last'));
};
VideoCaption.prototype.toggle = function(event) {
event.preventDefault();
if (this.player.element.hasClass('closed')) {
this.$('.hide-subtitles').attr('title', 'Turn off captions');
this.player.element.removeClass('closed');
return this.scrollCaption();
} else {
this.$('.hide-subtitles').attr('title', 'Turn on captions');
return this.player.element.addClass('closed');
}
};
VideoCaption.prototype.captionHeight = function() {
if (this.player.element.hasClass('fullscreen')) {
return $(window).height() - this.$('.video-controls').height();
} else {
return this.$('.video-wrapper').height();
}
};
return VideoCaption;
})();
}).call(this);
static/coffee/src/modules/video/video_control.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoControl = (function() {
function VideoControl(player) {
this.player = player;
this.togglePlayback = __bind(this.togglePlayback, this);
this.onPause = __bind(this.onPause, this);
this.onPlay = __bind(this.onPlay, this);
this.render();
this.bind();
}
VideoControl.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoControl.prototype.bind = function() {
$(this.player).bind('play', this.onPlay).bind('pause', this.onPause).bind('ended', this.onPause);
return this.$('.video_control').click(this.togglePlayback);
};
VideoControl.prototype.render = function() {
return this.$('.video-controls').append("<div class=\"slider\"></div>\n<div>\n <ul class=\"vcr\">\n <li><a class=\"video_control play\">Play</a></li>\n <li>\n <div class=\"vidtime\">0:00 / 0:00</div>\n </li>\n </ul>\n <div class=\"secondary-controls\">\n <a href=\"#\" class=\"add-fullscreen\" title=\"Fill browser\">Fill Browser</a>\n </div>\n</div>");
};
VideoControl.prototype.onPlay = function() {
return this.$('.video_control').removeClass('play').addClass('pause').html('Pause');
};
VideoControl.prototype.onPause = function() {
return this.$('.video_control').removeClass('pause').addClass('play').html('Play');
};
VideoControl.prototype.togglePlayback = function(event) {
event.preventDefault();
if (this.player.isPlaying()) {
return $(this.player).trigger('pause');
} else {
return $(this.player).trigger('play');
}
};
return VideoControl;
})();
}).call(this);
static/coffee/src/modules/video/video_player.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoPlayer = (function() {
function VideoPlayer(video) {
this.video = video;
this.toggleFullScreen = __bind(this.toggleFullScreen, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.update = __bind(this.update, this);
this.onSpeedChange = __bind(this.onSpeedChange, this);
this.onPause = __bind(this.onPause, this);
this.onPlay = __bind(this.onPlay, this);
this.onStateChange = __bind(this.onStateChange, this);
this.onReady = __bind(this.onReady, this);
this.bindExitFullScreen = __bind(this.bindExitFullScreen, this);
this.currentTime = 0;
this.element = $("#video_" + this.video.id);
this.render();
this.bind();
}
VideoPlayer.prototype.$ = function(selector) {
return $(selector, this.element);
};
VideoPlayer.prototype.bind = function() {
$(this).bind('seek', this.onSeek).bind('updatePlayTime', this.onUpdatePlayTime).bind('speedChange', this.onSpeedChange).bind('play', this.onPlay).bind('pause', this.onPause).bind('ended', this.onPause);
$(document).keyup(this.bindExitFullScreen);
this.$('.add-fullscreen').click(this.toggleFullScreen);
if (!onTouchBasedDevice()) {
return this.addToolTip();
}
};
VideoPlayer.prototype.bindExitFullScreen = function(event) {
if (this.element.hasClass('fullscreen') && event.keyCode === 27) {
return this.toggleFullScreen(event);
}
};
VideoPlayer.prototype.render = function() {
new VideoControl(this);
new VideoCaption(this, this.video.youtubeId('1.0'));
new VideoSpeedControl(this, this.video.speeds);
new VideoProgressSlider(this);
return this.player = new YT.Player(this.video.id, {
playerVars: {
controls: 0,
wmode: 'transparent',
rel: 0,
showinfo: 0,
enablejsapi: 1
},
videoId: this.video.youtubeId(),
events: {
onReady: this.onReady,
onStateChange: this.onStateChange
}
});
};
VideoPlayer.prototype.addToolTip = function() {
return this.$('.add-fullscreen, .hide-subtitles').qtip({
position: {
my: 'top right',
at: 'top center'
}
});
};
VideoPlayer.prototype.onReady = function() {
$(this).trigger('ready');
$(this).trigger('updatePlayTime', 0);
if (!onTouchBasedDevice()) {
return $('.course-content .video:first').data('video').player.play();
}
};
VideoPlayer.prototype.onStateChange = function(event) {
switch (event.data) {
case YT.PlayerState.PLAYING:
return $(this).trigger('play');
case YT.PlayerState.PAUSED:
return $(this).trigger('pause');
case YT.PlayerState.ENDED:
return $(this).trigger('ended');
}
};
VideoPlayer.prototype.onPlay = function() {
Logger.log('play_video', {
id: this.currentTime,
code: this.player.getVideoEmbedCode()
});
if (window.player && window.player !== this.player) {
window.player.pauseVideo();
}
window.player = this.player;
if (!this.player.interval) {
return this.player.interval = setInterval(this.update, 200);
}
};
VideoPlayer.prototype.onPause = function() {
Logger.log('pause_video', {
id: this.currentTime,
code: this.player.getVideoEmbedCode()
});
if (window.player === this.player) {
window.player = null;
}
clearInterval(this.player.interval);
return this.player.interval = null;
};
VideoPlayer.prototype.onSeek = function(event, time) {
this.player.seekTo(time, true);
if (this.isPlaying()) {
clearInterval(this.player.interval);
return this.player.interval = setInterval(this.update, 200);
} else {
this.currentTime = time;
return $(this).trigger('updatePlayTime', time);
}
};
VideoPlayer.prototype.onSpeedChange = function(event, newSpeed) {
this.currentTime = Time.convert(this.currentTime, parseFloat(this.currentSpeed()), newSpeed);
this.video.setSpeed(parseFloat(newSpeed).toFixed(2).replace(/\.00$/, '.0'));
if (this.isPlaying()) {
this.player.loadVideoById(this.video.youtubeId(), this.currentTime);
} else {
this.player.cueVideoById(this.video.youtubeId(), this.currentTime);
}
return $(this).trigger('updatePlayTime', this.currentTime);
};
VideoPlayer.prototype.update = function() {
if (this.currentTime = this.player.getCurrentTime()) {
return $(this).trigger('updatePlayTime', this.currentTime);
}
};
VideoPlayer.prototype.onUpdatePlayTime = function(event, time) {
var progress;
progress = Time.format(time) + ' / ' + Time.format(this.duration());
return this.$(".vidtime").html(progress);
};
VideoPlayer.prototype.toggleFullScreen = function(event) {
event.preventDefault();
if (this.element.hasClass('fullscreen')) {
this.$('.exit').remove();
this.$('.add-fullscreen').attr('title', 'Fill browser');
this.element.removeClass('fullscreen');
} else {
this.element.append('<a href="#" class="exit">Exit</a>').addClass('fullscreen');
this.$('.add-fullscreen').attr('title', 'Exit fill browser');
this.$('.exit').click(this.toggleFullScreen);
}
return $(this).trigger('resize');
};
VideoPlayer.prototype.play = function() {
if (this.player.playVideo) {
return this.player.playVideo();
}
};
VideoPlayer.prototype.isPlaying = function() {
return this.player.getPlayerState() === YT.PlayerState.PLAYING;
};
VideoPlayer.prototype.pause = function() {
return this.player.pauseVideo();
};
VideoPlayer.prototype.duration = function() {
return this.video.getDuration();
};
VideoPlayer.prototype.currentSpeed = function() {
return this.video.speed;
};
return VideoPlayer;
})();
}).call(this);
static/coffee/src/modules/video/video_progress_slider.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoProgressSlider = (function() {
function VideoProgressSlider(player) {
this.player = player;
this.onStop = __bind(this.onStop, this);
this.onChange = __bind(this.onChange, this);
this.onSlide = __bind(this.onSlide, this);
this.onUpdatePlayTime = __bind(this.onUpdatePlayTime, this);
this.onReady = __bind(this.onReady, this);
this.buildSlider();
this.buildHandle();
$(this.player).bind('updatePlayTime', this.onUpdatePlayTime);
$(this.player).bind('ready', this.onReady);
}
VideoProgressSlider.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoProgressSlider.prototype.buildSlider = function() {
return this.slider = this.$('.slider').slider({
range: 'min',
change: this.onChange,
slide: this.onSlide,
stop: this.onStop
});
};
VideoProgressSlider.prototype.buildHandle = function() {
this.handle = this.$('.ui-slider-handle');
return this.handle.qtip({
content: "" + (Time.format(this.slider.slider('value'))),
position: {
my: 'bottom center',
at: 'top center',
container: this.handle
},
hide: {
delay: 700
},
style: {
classes: 'ui-tooltip-slider',
widget: true
}
});
};
VideoProgressSlider.prototype.onReady = function() {
return this.slider.slider('option', 'max', this.player.duration());
};
VideoProgressSlider.prototype.onUpdatePlayTime = function(event, currentTime) {
if (!this.frozen) {
this.slider.slider('option', 'max', this.player.duration());
return this.slider.slider('value', currentTime);
}
};
VideoProgressSlider.prototype.onSlide = function(event, ui) {
this.frozen = true;
this.updateTooltip(ui.value);
return $(this.player).trigger('seek', ui.value);
};
VideoProgressSlider.prototype.onChange = function(event, ui) {
return this.updateTooltip(ui.value);
};
VideoProgressSlider.prototype.onStop = function(event, ui) {
var _this = this;
this.frozen = true;
$(this.player).trigger('seek', ui.value);
return setTimeout((function() {
return _this.frozen = false;
}), 200);
};
VideoProgressSlider.prototype.updateTooltip = function(value) {
return this.handle.qtip('option', 'content.text', "" + (Time.format(value)));
};
return VideoProgressSlider;
})();
}).call(this);
static/coffee/src/modules/video/video_speed_control.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.VideoSpeedControl = (function() {
function VideoSpeedControl(player, speeds) {
this.player = player;
this.speeds = speeds;
this.onSpeedChange = __bind(this.onSpeedChange, this);
this.changeVideoSpeed = __bind(this.changeVideoSpeed, this);
this.render();
this.bind();
}
VideoSpeedControl.prototype.$ = function(selector) {
return this.player.$(selector);
};
VideoSpeedControl.prototype.bind = function() {
$(this.player).bind('speedChange', this.onSpeedChange);
this.$('.video_speeds a').click(this.changeVideoSpeed);
if (onTouchBasedDevice()) {
return this.$('.speeds').click(function() {
return $(this).toggleClass('open');
});
} else {
this.$('.speeds').mouseenter(function() {
return $(this).addClass('open');
});
this.$('.speeds').mouseleave(function() {
return $(this).removeClass('open');
});
return this.$('.speeds').click(function(event) {
event.preventDefault();
return $(this).removeClass('open');
});
}
};
VideoSpeedControl.prototype.render = function() {
var _this = this;
this.$('.secondary-controls').prepend("<div class=\"speeds\">\n <a href=\"#\">\n <h3>Speed</h3>\n <p class=\"active\"></p>\n </a>\n <ol class=\"video_speeds\"></ol>\n</div>");
$.each(this.speeds, function(index, speed) {
var link;
link = $('<a>').attr({
href: "#"
}).html("" + speed + "x");
return _this.$('.video_speeds').prepend($('<li>').attr('data-speed', speed).html(link));
});
return this.setSpeed(this.player.currentSpeed());
};
VideoSpeedControl.prototype.changeVideoSpeed = function(event) {
event.preventDefault();
if (!$(event.target).parent().hasClass('active')) {
return $(this.player).trigger('speedChange', $(event.target).parent().data('speed'));
}
};
VideoSpeedControl.prototype.onSpeedChange = function(event, speed) {
return this.setSpeed(parseFloat(speed).toFixed(2).replace(/\.00$/, '.0'));
};
VideoSpeedControl.prototype.setSpeed = function(speed) {
this.$('.video_speeds li').removeClass('active');
this.$(".video_speeds li[data-speed='" + speed + "']").addClass('active');
return this.$('.speeds p.active').html("" + speed + "x");
};
return VideoSpeedControl;
})();
}).call(this);
static/coffee/src/navigation.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Navigation = (function() {
function Navigation() {
var active;
if ($('#accordion').length) {
active = $('#accordion ul:has(li.active)').index('#accordion ul');
$('#accordion').bind('accordionchange', this.log).accordion({
active: active >= 0 ? active : 1,
header: 'h3',
autoHeight: false
});
$('#open_close_accordion a').click(this.toggle);
$('#accordion').show();
}
}
Navigation.prototype.log = function(event, ui) {
return log_event('accordion', {
newheader: ui.newHeader.text(),
oldheader: ui.oldHeader.text()
});
};
Navigation.prototype.toggle = function() {
return $('.course-wrapper').toggleClass('closed');
};
return Navigation;
})();
}).call(this);
static/coffee/src/time.js 0 → 100755
// Generated by CoffeeScript 1.3.3
(function() {
this.Time = (function() {
function Time() {}
Time.format = function(time) {
var hours, minutes, pad, seconds;
pad = function(number) {
if (number < 10) {
return "0" + number;
} else {
return number;
}
};
seconds = Math.floor(time);
minutes = Math.floor(seconds / 60);
hours = Math.floor(minutes / 60);
seconds = seconds % 60;
minutes = minutes % 60;
if (hours) {
return "" + hours + ":" + (pad(minutes)) + ":" + (pad(seconds % 60));
} else {
return "" + minutes + ":" + (pad(seconds % 60));
}
};
Time.convert = function(time, oldSpeed, newSpeed) {
return (time * oldSpeed / newSpeed).toFixed(3);
};
return Time;
})();
}).call(this);
static/sass/application.css 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
static/sass/marketing-ie.css 0 → 100755
body {
margin: 0;
padding: 0; }
.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
margin: 0;
overflow: hidden; }
div#enroll form {
display: none; }
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