Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
789d69d3
Commit
789d69d3
authored
Jul 12, 2012
by
Galen Frechette
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
converts modals to use jquery leanModal
parent
bb673b5b
Hide whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
101 additions
and
75 deletions
+101
-75
lms/static/js/toggle_login_modal.js
+57
-25
lms/static/sass/_course_info.scss
+1
-0
lms/static/sass/_index.scss
+2
-3
lms/static/sass/_shared_modal.scss
+24
-32
lms/templates/index.html
+8
-2
lms/templates/login_modal.html
+1
-1
lms/templates/navigation.html
+2
-2
lms/templates/portal/course_about.html
+4
-3
lms/templates/signup_modal.html
+1
-1
lms/templates/video_modal.html
+1
-6
No files found.
lms/static/js/toggle_login_modal.js
View file @
789d69d3
$
(
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
View file @
789d69d3
...
...
@@ -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
View file @
789d69d3
...
...
@@ -256,7 +256,7 @@
.highlighted-courses
{
@include
box-sizing
(
border-box
);
margin-bottom
:
0px
;
margin-bottom
:
4
0px
;
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
(
2
53
,
253
,
253
);
background
:
rgb
(
2
48
,
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
View file @
789d69d3
.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
View file @
789d69d3
...
...
@@ -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
View file @
789d69d3
<
%!
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
View file @
789d69d3
...
...
@@ -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
View file @
789d69d3
...
...
@@ -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
View file @
789d69d3
<
%
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
View file @
789d69d3
<
%
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>
✕
</p>
</div>
</div>
</div>
</section>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment