Skip to content

E
edx-platform
Commit 789d69d3 by Galen Frechette
Options

converts modals to use jquery leanModal

parent bb673b5b
Showing with 101 additions and 75 deletions
lms/static/js/toggle_login_modal.js
$(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 = $("<div id='lean_overlay'></div>");
$("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' });
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;
......
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));
}
......
lms/static/sass/_shared_modal.scss
.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);
......
lms/templates/index.html
......@@ -27,12 +27,12 @@
</div>
</div>
<div class="media">
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${static.url('images/courses/space1.jpg')}" />
<div class="play-intro"></div>
</div>
</div>
</a>
</div>
</div>
</header>
......@@ -121,3 +121,9 @@
</section>
</section>
<section id="video-modal" class="modal home-page-video-modal">
<div class="inner-wrapper">
<iframe width="640" height="360" src="http://www.youtube.com/embed/SA6ELdIRkRU" frameborder="0" allowfullscreen></iframe>
</div>
</section>
lms/templates/login_modal.html
<%! from django.core.urlresolvers import reverse %>
<%namespace name='static' file='static_content.html'/>
<section class="modal login-modal">
<section id="login-modal" class="modal login-modal">
<div class="inner-wrapper">
<header>
<h3>Log In</h3>
......
lms/templates/navigation.html
......@@ -37,10 +37,10 @@
<a href="/t/about.html">About</a>
<a href="#">Blog</a>
<a href="${reverse('jobs')}">Jobs</a>
<a href="#" id="login">Log In</a>
<a href="#login-modal" id="login" rel="leanModal">Log In</a>
</li>
<li class="primary">
<a href="#" id="signup">Sign Up</a>
<a href="#signup-modal" id="signup" rel="leanModal">Sign Up</a>
</li>
</ol>
</nav>
......
lms/templates/portal/course_about.html
......@@ -29,13 +29,12 @@
</section>
</section>
</section>
<div class="media">
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${static.url('images/courses/circuits.jpeg')}" />
<div class="play-intro"></div>
</div>
<%include file="../video_modal.html" />
</div>
</a>
</div>
</header>
......@@ -149,3 +148,5 @@
</section>
</section>
</section>
<%include file="../video_modal.html" />
lms/templates/signup_modal.html
<%namespace name='static' file='static_content.html'/>
<section class="modal signup-modal">
<section id="signup-modal" class="modal signup-modal">
<div class="inner-wrapper">
<header>
<h3>Sign Up for edX</h3>
......
lms/templates/video_modal.html
<%namespace name='static' file='static_content.html'/>
<section class="modal video-modal">
<section id="video-modal" class="modal video-modal">
<div class="inner-wrapper">
${course.get_about_section("video")}
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
</div>
</section>
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