diff --git a/lms/static/js/toggle_login_modal.js b/lms/static/js/toggle_login_modal.js index 1ff06fa76c..6818926583 100644 --- a/lms/static/js/toggle_login_modal.js +++ b/lms/static/js/toggle_login_modal.js @@ -16,5 +16,14 @@ $(document).ready(function () { $('.modal.signup-modal').removeClass("visible"); $('.modal-overlay').removeClass("visible"); }); + + $('.hero').click(function() { + $('.modal.video-modal').addClass("visible"); + $('.modal-overlay').addClass("visible"); + }); + $('div.close-modal').click(function() { + $('.modal.video-modal').removeClass("visible"); + $('.modal-overlay').removeClass("visible"); + }); }); diff --git a/lms/static/sass/_course_info.scss b/lms/static/sass/_course_info.scss index 70d470e1e2..d3fb5cdbea 100644 --- a/lms/static/sass/_course_info.scss +++ b/lms/static/sass/_course_info.scss @@ -4,8 +4,8 @@ } header.course-profile { - background: rgb(240,240,240); - @include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); + background: rgb(245,245,245); + //@include background-image(linear-gradient(-90deg, rgb(230,230,230), rgb(245,245,245))); @include box-shadow(0 1px 80px 0 rgba(0,0,0, 0.5)); border-bottom: 1px solid rgb(200,200,200); @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.1)); @@ -16,7 +16,7 @@ @include clearfix; margin: 0 auto; max-width: 1200px; - padding: 40px 0px 40px; + padding: 50px 0px 40px; position: relative; width: flex-grid(12); @@ -41,8 +41,6 @@ z-index: 2; > hgroup { - //@include inline-block; - //padding: 0 30px; position: relative; hr { @@ -69,9 +67,9 @@ h1 { font: bold 2.8rem/3.2rem $sans-serif; - margin-bottom: 0px; + @include inline-block; + margin-right: 5px; text-shadow: 0 1px rgba(255,255,255, 0.6); - //text-align: center; span { color: $lighter-base-font-color; @@ -81,7 +79,7 @@ } h2 { - //text-align: center; + @include inline-block; a { color: $lighter-base-font-color; @@ -94,31 +92,92 @@ } } } + + .course-dates { + p { + color: $lighter-base-font-color; + @include inline-block; + font: 300 1.2rem/1.6rem $sans-serif; + margin-top: 0px; + margin-right: 20px; + text-transform: uppercase; + + &:last-child { + margin: 0; + } + + > span { + color: $base-font-color; + font: 300 1.2rem/1.6rem $sans-serif; + margin-left: 5px; + } + } + } } .actions { float: left; - padding-top: 5px; position: relative; width: flex-grid(4); z-index: 2; - a.register { - @include button(shiny, $blue); + &:hover { + .register-wrapper { + @include box-shadow(0 1px 16px 0 rgba($blue, 0.35)); + border-color: rgb(180,180,180); + } + } + + .register-wrapper { + @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%)); @include box-sizing(border-box); - @include border-radius(3px); - display: block; - font: italic 1.2rem/1.6rem $serif; - margin-bottom: 10px; - padding: 10px 0px; - text-transform: uppercase; - text-align: center; - width: flex-grid(12); + @include box-shadow(0 1px 8px 0 rgba(0,0,0, 0.1), inset 0 0 0 1px rgba(255,255,255, 0.9)); + border: 1px solid rgb(210,210,210); + @include border-radius(4px); + @include transition(all, 0.15s, linear); + padding: 10px; + + a.register { + @include button(shiny, $blue); + @include box-sizing(border-box); + @include border-radius(3px); + display: block; + font: italic 1.2rem/1.6rem $serif; + padding: 10px 0px; + position: relative; + text-transform: uppercase; + text-align: center; + width: flex-grid(12); + z-index: 1; + } } .social-sharing { - background: rgb(230,230,230); - height: 40px; + padding: 0px 20px; + + p { + background: rgb(245,245,245); + @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.075), inset 0 0 0 1px rgba(255,255,255, 0.9)); + border: 1px solid rgb(210,210,210); + border-top: 0; + @include border-bottom-radius(4px); + padding: 5px 10px; + margin: 0 auto; + color: $lighter-base-font-color; + font: italic 300 1.2rem/1.6rem $serif; + margin: 0 0 5px 0; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.6); + + &:last-child { + margin: 0; + } + + > span { + font: normal 1.2rem/1.6rem $sans-serif; + margin-right: 5px; + } + } } } } @@ -131,8 +190,7 @@ border-bottom: 1px solid rgb(220,220,220); @include box-sizing(border-box); @include clearfix; - margin-bottom: 40px; - //text-align: center; + margin: 40px 0; width: flex-grid(12); &::after { @@ -142,14 +200,22 @@ } a { + border-bottom: 3px solid transparent; color: $lighter-base-font-color; @include inline-block; font: normal 1.2rem/1.6rem $sans-serif; - padding: 30px 20px; + margin: 0 15px; + padding: 0px 5px 15px; text-align: center; + text-transform: uppercase; + + &:first-child { + margin-left: 0px; + } &:hover, &.active { - background: rgb(240,240,240); + border-color: $pink; + //background: rgb(240,240,240); color: $base-font-color; } } @@ -175,8 +241,6 @@ width: flex-grid(8); .inner-wrapper { - //padding: 0 60px; - > section { &::after { @@ -242,25 +306,6 @@ background: rgb(245,245,245); margin-bottom: 20px; padding: 15px; - - &.dates { - p { - border-bottom: 1px solid rgb(220,220,220); - margin-bottom: 15px; - margin-top: 0px; - padding-bottom: 5px; - - &:last-child { - border: none; - margin: 0; - padding: 0; - } - - > span { - margin-left: 20px; - } - } - } } .media { @@ -273,11 +318,53 @@ .hero { height: 180px; overflow: hidden; + position: relative; + + .play-intro { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.6), rgba(255,255,255, 0.4))); + @include border-radius(4px); + @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); + border: 1px solid rgba(0,0,0, 0.3); + height: 80px; + left: 50%; + margin-top: -40px; + margin-left: -40px; + position: absolute; + top: 50%; + width: 80px; + + &::after { + color: $base-font-color; + content: "\25B6"; + display: block; + font: normal 3.2rem/3.2rem $sans-serif; + left: 50%; + margin-left: -12px; + margin-top: -17px; + position: absolute; + text-shadow: 0 1px rgba(255,255,255, 0.8); + top: 50%; + } + } img { min-width: 100%; } } + + &:hover { + cursor: pointer; + + .play-intro { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 0.7), rgba(255,255,255, 0.5))); + @include box-shadow(0 1px 10px 0 rgba(0,0,0, 0.2)); + border: 1px solid rgba(0,0,0, 0.4); + + &::after { + color: $pink; + } + } + } } } } diff --git a/lms/static/sass/_shared_modal.scss b/lms/static/sass/_shared_modal.scss index 207515f521..e34bdb2121 100644 --- a/lms/static/sass/_shared_modal.scss +++ b/lms/static/sass/_shared_modal.scss @@ -34,6 +34,21 @@ display: block; } + &.video-modal { + //height: 360px; + left: 50%; + margin-left: -320px; + //margin-top: -180px; + //top: 50%; + width: 642px; + + .inner-wrapper { + height: 360px; + padding: 0px; + width: 640px; + } + } + .inner-wrapper { background: rgb(240,240,240); @include border-radius(0px); diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css index c931ca5b67..d5f230ee0c 100755 --- a/lms/static/sass/application.css +++ b/lms/static/sass/application.css @@ -2078,6 +2078,14 @@ header.app { z-index: 10; } .modal.visible { display: block; } + .modal.video-modal { + left: 50%; + margin-left: -320px; + width: 642px; } + .modal.video-modal .inner-wrapper { + height: 360px; + padding: 0px; + width: 640px; } .modal .inner-wrapper { background: #f0f0f0; -webkit-border-radius: 0px; @@ -3389,12 +3397,7 @@ nav.course-material { .course-info .container { margin-bottom: 60px; } .course-info header.course-profile { - background: #f0f0f0; - background-image: -webkit-linear-gradient(-90deg, #e6e6e6, #f5f5f5); - background-image: -moz-linear-gradient(-90deg, #e6e6e6, #f5f5f5); - background-image: -ms-linear-gradient(-90deg, #e6e6e6, #f5f5f5); - background-image: -o-linear-gradient(-90deg, #e6e6e6, #f5f5f5); - background-image: linear-gradient(-90deg, #e6e6e6, #f5f5f5); + background: #f5f5f5; -webkit-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 80px 0 rgba(0, 0, 0, 0.5); @@ -3408,7 +3411,7 @@ nav.course-material { zoom: 1; margin: 0 auto; max-width: 1200px; - padding: 40px 0px 40px; + padding: 50px 0px 40px; position: relative; width: 100%; } .course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after { @@ -3468,81 +3471,189 @@ nav.course-material { width: 100%; } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 { font: bold 2.8rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif; - margin-bottom: 0px; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + margin-right: 5px; text-shadow: 0 1px rgba(255, 255, 255, 0.6); } .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h1 span { color: #a0a0a0; display: none; font: 300 1.2rem/3rem "Open Sans", Verdana, Geneva, sans-serif; } - .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a { - color: #a0a0a0; - font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; - text-shadow: 0 1px rgba(255, 255, 255, 0.6); } - .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover { - color: #1d9dd9; } + .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 { + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; } + .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a { + color: #a0a0a0; + font: italic bold 1.4rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + .course-info header.course-profile .intro-inner-wrapper .intro > hgroup h2 a:hover { + color: #1d9dd9; } + .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p { + color: #a0a0a0; + display: -moz-inline-box; + -moz-box-orient: vertical; + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; + font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + margin-top: 0px; + margin-right: 20px; + text-transform: uppercase; } + .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p:last-child { + margin: 0; } + .course-info header.course-profile .intro-inner-wrapper .intro .course-dates p > span { + color: #3c3c3c; + font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + margin-left: 5px; } .course-info header.course-profile .intro-inner-wrapper .actions { float: left; - padding-top: 5px; position: relative; width: 31.984%; z-index: 2; } - .course-info header.course-profile .intro-inner-wrapper .actions a.register { - border: 1px solid #002e88; - border-bottom: 1px solid #001e5f; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - border-radius: 5px; - -webkit-box-shadow: inset 0 1px 0 0 #42bae5; - -moz-box-shadow: inset 0 1px 0 0 #42bae5; - box-shadow: inset 0 1px 0 0 #42bae5; - color: white; - display: inline; - font-size: 14px; - font-weight: bold; - background-color: #1d9dd9; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab)); - background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); - background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); - background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); - background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); - background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); - padding: 7px 20px 8px; - text-align: center; - text-decoration: none; - text-shadow: 0 -1px 1px #001067; + .course-info header.course-profile .intro-inner-wrapper .actions:hover .register-wrapper { + -webkit-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); + -moz-box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); + box-shadow: 0 1px 16px 0 rgba(29, 157, 217, 0.35); + border-color: #b4b4b4; } + .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper { + background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); + background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - display: block; - font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; - margin-bottom: 10px; - padding: 10px 0px; - text-transform: uppercase; - text-align: center; - width: 100%; } - .course-info header.course-profile .intro-inner-wrapper .actions a.register:hover { - cursor: pointer; - background-color: #108ec7; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); - background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); - background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); - background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); - background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); - background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } - .course-info header.course-profile .intro-inner-wrapper .actions a.register:active { - -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; - -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; - box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } + -webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + -moz-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + border: 1px solid #d2d2d2; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-transition-property: all; + -moz-transition-property: all; + -ms-transition-property: all; + -o-transition-property: all; + transition-property: all; + -webkit-transition-duration: 0.15s; + -moz-transition-duration: 0.15s; + -ms-transition-duration: 0.15s; + -o-transition-duration: 0.15s; + transition-duration: 0.15s; + -webkit-transition-timing-function: linear; + -moz-transition-timing-function: linear; + -ms-transition-timing-function: linear; + -o-transition-timing-function: linear; + transition-timing-function: linear; + -webkit-transition-delay: 0; + -moz-transition-delay: 0; + -ms-transition-delay: 0; + -o-transition-delay: 0; + transition-delay: 0; + padding: 10px; } + .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register { + border: 1px solid #002e88; + border-bottom: 1px solid #001e5f; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: inset 0 1px 0 0 #42bae5; + -moz-box-shadow: inset 0 1px 0 0 #42bae5; + box-shadow: inset 0 1px 0 0 #42bae5; + color: white; + display: inline; + font-size: 14px; + font-weight: bold; + background-color: #1d9dd9; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab)); + background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%); + padding: 7px 20px 8px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px #001067; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + -o-border-radius: 3px; + border-radius: 3px; + display: block; + font: italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + padding: 10px 0px; + position: relative; + text-transform: uppercase; + text-align: center; + width: 100%; + z-index: 1; } + .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:hover { + cursor: pointer; + background-color: #108ec7; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a)); + background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); + background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); } + .course-info header.course-profile .intro-inner-wrapper .actions .register-wrapper a.register:active { + -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; + -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; + box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; } .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing { - background: #e6e6e6; - height: 40px; } + padding: 0px 20px; } + .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p { + background: #f5f5f5; + -webkit-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + -moz-box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.9); + border: 1px solid #d2d2d2; + border-top: 0; + -webkit-border-bottom-left-radius: 4px; + -moz-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + -ms-border-bottom-left-radius: 4px; + -o-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + -ms-border-bottom-right-radius: 4px; + -o-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + padding: 5px 10px; + margin: 0 auto; + color: #a0a0a0; + font: italic 300 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif; + margin: 0 0 5px 0; + text-align: center; + text-shadow: 0 1px rgba(255, 255, 255, 0.6); } + .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p:last-child { + margin: 0; } + .course-info header.course-profile .intro-inner-wrapper .actions .social-sharing p > span { + font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; + margin-right: 5px; } .course-info .container { zoom: 1; } .course-info .container:before, .course-info .container:after { @@ -3556,7 +3667,7 @@ nav.course-material { -moz-box-sizing: border-box; box-sizing: border-box; zoom: 1; - margin-bottom: 40px; + margin: 40px 0; width: 100%; } .course-info .container nav:before, .course-info .container nav:after { content: ""; @@ -3567,6 +3678,7 @@ nav.course-material { content: ""; display: none; } .course-info .container nav a { + border-bottom: 3px solid transparent; color: #a0a0a0; display: -moz-inline-box; -moz-box-orient: vertical; @@ -3576,10 +3688,14 @@ nav.course-material { *display: inline; *vertical-align: auto; font: normal 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; - padding: 30px 20px; - text-align: center; } + margin: 0 15px; + padding: 0px 5px 15px; + text-align: center; + text-transform: uppercase; } + .course-info .container nav a:first-child { + margin-left: 0px; } .course-info .container nav a:hover, .course-info .container nav a.active, .course-info .container nav.sequence-nav ol li a.seq_video_active, .course-info .container nav.sequence-nav ol li a.seq_other_active, .course-info .container nav.sequence-nav ol li a.seq_vertical_active, .course-info .container nav.sequence-nav ol li a.seq_problem_active { - background: #f0f0f0; + border-color: #b62568; color: #3c3c3c; } .course-info .container h2 { color: #a0a0a0; @@ -3639,17 +3755,6 @@ nav.course-material { background: #f5f5f5; margin-bottom: 20px; padding: 15px; } - .course-info .course-sidebar > section.dates p { - border-bottom: 1px solid #dcdcdc; - margin-bottom: 15px; - margin-top: 0px; - padding-bottom: 5px; } - .course-info .course-sidebar > section.dates p:last-child { - border: none; - margin: 0; - padding: 0; } - .course-info .course-sidebar > section.dates p > span { - margin-left: 20px; } .course-info .course-sidebar .media { border: 1px solid #c8c8c8; -webkit-box-sizing: border-box; @@ -3660,9 +3765,57 @@ nav.course-material { width: 100%; } .course-info .course-sidebar .media .hero { height: 180px; - overflow: hidden; } + overflow: hidden; + position: relative; } + .course-info .course-sidebar .media .hero .play-intro { + background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); + background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); + background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); + background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4)); + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.3); + height: 80px; + left: 50%; + margin-top: -40px; + margin-left: -40px; + position: absolute; + top: 50%; + width: 80px; } + .course-info .course-sidebar .media .hero .play-intro::after { + color: #3c3c3c; + content: "\25B6"; + display: block; + font: normal 3.2rem/3.2rem "Open Sans", Verdana, Geneva, sans-serif; + left: 50%; + margin-left: -12px; + margin-top: -17px; + position: absolute; + text-shadow: 0 1px rgba(255, 255, 255, 0.8); + top: 50%; } .course-info .course-sidebar .media .hero img { min-width: 100%; } + .course-info .course-sidebar .media:hover { + cursor: pointer; } + .course-info .course-sidebar .media:hover .play-intro { + background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); + background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); + background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); + background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); + background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); + -webkit-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); + border: 1px solid rgba(0, 0, 0, 0.4); } + .course-info .course-sidebar .media:hover .play-intro::after { + color: #b62568; } html { height: 100%; diff --git a/lms/templates/portal/course_about.html b/lms/templates/portal/course_about.html index afa35b4689..1b1d728e39 100644 --- a/lms/templates/portal/course_about.html +++ b/lms/templates/portal/course_about.html @@ -1,112 +1,113 @@ -<%! from django.core.urlresolvers import reverse %> -<%namespace name='static' file='../static_content.html'/> +<%namespace name='static' file='static_content.html'/> <%block name="js_extra"> -<%inherit file="../main.html" /> +<%inherit file="main.html" /> -
-
-
- -

${course.get_about_section("title")} (${course.get_about_section("number")})

-

${course.get_about_section("university")}

-
-

${course.get_about_section("short_description")}

-
- -
- -
-
-
-

About the course staff

-
-
- -
-

Anant Agarwal

-

Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”

-
-
-
- -
-

Gerald Sussman

-

Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.

-
-
-
- -
-

Piotr Mitros

-

Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

-
+
+
+
+
+
+

${course.get_about_section("title")}

${course.get_about_section("university")}

+
+
+
+

Class Starts: 7/12/12

+

Final Exam: 12/09/12

+

Total Length: 15 weeks

+
-
+
+
+ Register +
+ +
+ + -
-
+
+
+ + +
+
+

About this course

+

${course.get_about_section("description")}

+ +

Requirements

+

${course.get_about_section("requirements")}

+ +

Syllabus

+

${course.get_about_section("syllabus")}

+ +

Textbook

+ ${course.get_about_section("textbook")} + +

Frequently Asked Questions

+ ${course.get_about_section("faq")} + + ${course.get_about_section("more_info")} +
+ +
+

Course staff

+
+
+ +
+

Anant Agarwal

+

Director of MIT’s Computer Science and Artificial Intelligence Laboratory (CSAIL) and a professor of the Electrical Engineering and Computer Science department at MIT. His research focus is in parallel computer architectures and cloud software systems, and he is a founder of several successful startups, including Tilera, a company that produces scalable multicore processors. Prof. Agarwal won MIT’s Smullin and Jamieson prizes for teaching and co-authored the course textbook “Foundations of Analog and Digital Electronic Circuits.”

+
+ +
+
+ +
+

Gerald Sussman

+

Professor of Electrical Engineering at MIT. He is a well known educator in the computer science community, perhaps best known as the author of Structure and Interpretation of Computer Programs, which is universally acknowledged as one of the top ten textbooks in computer science, and as the creator of Scheme, a popular teaching language. His research spans a range of topics, from artificial intelligence, to physics and chaotic systems, to supercomputer design.

+
+ +
+
+ +
+

Piotr Mitros

+

Research Scientist at MIT. His research focus is in finding ways to apply techniques from control systems to optimizing the learning process. Dr. Mitros has worked as an analog designer at Texas Instruments, Talking Lights, and most recently, designed the analog front end for a novel medical imaging modality for Rhythmia Medical.

+
+
+
+
+ +
+
+
+ +
+
+ <%include file="video_modal.html" /> ${course.get_about_section("video")}
-
-

About this course

-
-
- Start - Aug 6th -
-
- Length - 15 weeks -
-
- Final - Dec 24th -
-
- -

${course.get_about_section("description")}

+
+

Course Sumamry

+

${course.get_about_section("short_description")}

-
- -
    -
  • Requirements
    • -
  • Syllabus
    • -
  • Textbook
    • -
  • FAQ
    • -
  • More info
    • -
- -
-
-

Requirements

- ${course.get_about_section("requirements")} -
- -
-

Syllabus

- ${course.get_about_section("syllabus")} -
- -
-

Textbook

- ${course.get_about_section("textbook")} -
- -
-

Frequently Asked Questions

- ${course.get_about_section("faq")} -
- -
- ${course.get_about_section("more_info")} -
-
-
-
-
-
+
+

Course Number (${course.get_about_section("number")})

+
+
+
+
diff --git a/lms/templates/video_modal.html b/lms/templates/video_modal.html new file mode 100644 index 0000000000..89744fb214 --- /dev/null +++ b/lms/templates/video_modal.html @@ -0,0 +1,12 @@ +<%namespace name='static' file='static_content.html'/> + +
+
+ +
+
+

✕

+
+
+
+