diff --git a/lms/static/js/toggle_login_modal.js b/lms/static/js/toggle_login_modal.js index 6818926583..bced4ee933 100644 --- a/lms/static/js/toggle_login_modal.js +++ b/lms/static/js/toggle_login_modal.js @@ -1,29 +1,61 @@ -$(document).ready(function () { - $('a#login').click(function() { - $('.modal.login-modal').addClass("visible"); - $('.modal-overlay').addClass("visible"); - }); - $('div.close-modal').click(function() { - $('.modal.login-modal').removeClass("visible"); - $('.modal-overlay').removeClass("visible"); - }); +(function($){ + $.fn.extend({ + leanModal: function(options) { + var defaults = { + top: 100, + overlay: 0.5, + closeButton: null, + position: 'fixed' + } - $('a#signup').click(function() { - $('.modal.signup-modal').addClass("visible"); - $('.modal-overlay').addClass("visible"); - }); - $('div.close-modal').click(function() { - $('.modal.signup-modal').removeClass("visible"); - $('.modal-overlay').removeClass("visible"); - }); + var overlay = $("
"); + $("body").append(overlay); - $('.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"); - }); -}); + options = $.extend(defaults, options); + return this.each(function() { + var o = options; + + $(this).click(function(e) { + + var modal_id = $(this).attr("href"); + + $("#lean_overlay").click(function() { + close_modal(modal_id); + }); + + $(o.closeButton).click(function() { + close_modal(modal_id); + }); + + var modal_height = $(modal_id).outerHeight(); + var modal_width = $(modal_id).outerWidth(); + + $('#lean_overlay').css({ 'display' : 'block', opacity : 0 }); + $('#lean_overlay').fadeTo(200,o.overlay); + + $(modal_id).css({ + 'display' : 'block', + 'position' : o.position, + 'opacity' : 0, + 'z-index': 11000, + 'left' : 50 + '%', + 'margin-left' : -(modal_width/2) + "px", + 'top' : o.top + "px" + }) + + $(modal_id).fadeTo(200,1); + e.preventDefault(); + + }); + }); + + function close_modal(modal_id){ + $("#lean_overlay").fadeOut(200); + $(modal_id).css({ 'display' : 'none' }); + } + } + }); +})(jQuery); + +$("a[rel*=leanModal]").leanModal({ top : 120, overlay: 1, closeButton: ".close-modal", position: 'absolute' }); diff --git a/lms/static/sass/_course_info.scss b/lms/static/sass/_course_info.scss index 1d74cc0e29..bb8f2efec2 100644 --- a/lms/static/sass/_course_info.scss +++ b/lms/static/sass/_course_info.scss @@ -124,6 +124,7 @@ background: #fff; border-left: 1px solid rgb(100,100,100); @include box-sizing(border-box); + display: block; float: right; padding: 1px; position: relative; diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss index c95b7b7515..1eeee7fc25 100644 --- a/lms/static/sass/_index.scss +++ b/lms/static/sass/_index.scss @@ -256,7 +256,7 @@ .highlighted-courses { @include box-sizing(border-box); - margin-bottom: 0px; + margin-bottom: 40px; position: relative; width: flex-grid(12); z-index: 1; @@ -421,7 +421,6 @@ //background: rgb(245,245,245); border: 1px solid rgb(200,200,200); margin-bottom: 80px; - //padding: 0px 0px 80px; width: flex-grid(12); header { @@ -476,7 +475,7 @@ width: flex-grid(4); &:hover { - background: rgb(253,253,253); + background: rgb(248,248,248); border: 1px solid rgb(220,220,220); @include box-shadow(inset 0 0 3px 0 rgba(0,0,0, 0.1)); } diff --git a/lms/static/sass/_shared_modal.scss b/lms/static/sass/_shared_modal.scss index ac05ea52d4..e952645c16 100644 --- a/lms/static/sass/_shared_modal.scss +++ b/lms/static/sass/_shared_modal.scss @@ -1,18 +1,13 @@ -.modal-overlay { - //background: rgba(255,255,255, 0.7); - @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8))); - bottom: 0; - content: ""; - display: none; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 5; - - &.visible { - display: block; - } +#lean_overlay { + background: transparent; + @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8))); + display: none; + height:100%; + left: 0px; + position: fixed; + top: 0px; + width:100%; + z-index:100; } .modal { @@ -26,24 +21,9 @@ margin-left: -(grid-width(6)) / 2; padding: 8px; position: absolute; - top: 170px; + //top: 170px; width: grid-width(6); - z-index: 10; - - &::before { - @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8))); - bottom: 0; - content: ""; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 1; - } - - &.visible { - display: block; - } + z-index: 12; &.video-modal { left: 50%; @@ -57,6 +37,18 @@ } } + &.home-page-video-modal { + left: 50%; + margin-left: -321px; + width: 642px; + + .inner-wrapper { + height: 360px; + padding: 0px; + width: 640px; + } + } + .inner-wrapper { background: rgb(245,245,245); @include border-radius(0px); diff --git a/lms/templates/index.html b/lms/templates/index.html index 664336e1aa..e585a464ff 100644 --- a/lms/templates/index.html +++ b/lms/templates/index.html @@ -27,12 +27,12 @@ -
+
-
+ @@ -121,3 +121,9 @@ + +
+
+ +
+
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html index 90b5688b73..0cfb334104 100644 --- a/lms/templates/login_modal.html +++ b/lms/templates/login_modal.html @@ -1,7 +1,7 @@ <%! from django.core.urlresolvers import reverse %> <%namespace name='static' file='static_content.html'/> -
+
-
+
- <%include file="../video_modal.html" /> -
+ @@ -149,3 +148,5 @@ + +<%include file="../video_modal.html" /> diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html index 68073276c6..7bfa56e987 100644 --- a/lms/templates/signup_modal.html +++ b/lms/templates/signup_modal.html @@ -1,6 +1,6 @@ <%namespace name='static' file='static_content.html'/> -
+