Skip to content

E
edx-platform
Commit 1d7b3015 by Galen Frechette
Options

adds signup modal

parent cd8051fb
Showing with 319 additions and 146 deletions
lms/static/js/toggle_login_modal.js
$(document).ready(function () {
$('a.login').click(function() {
$('.modal-wrapper').addClass("visible");
$('a#login').click(function() {
$('.modal.login-modal').addClass("visible");
$('.modal-overlay').addClass("visible");
});
$('div.close-modal').click(function() {
$('.modal-wrapper').removeClass("visible");
$('.modal.login-modal').removeClass("visible");
$('.modal-overlay').removeClass("visible");
});
$('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");
});
});
lms/static/sass/_base_mixins.scss
@mixin vertically-and-horizontally-centered ( $height, $width ) {
left: 50%;
margin-left: -$width / 2;
margin-top: -$height / 2;
//margin-top: -$height / 2;
min-height: $height;
min-width: $width;
position: fixed;
top: 45%;
position: absolute;
top: 150px;
}
lms/static/sass/_shared_forms.scss
......@@ -34,7 +34,7 @@ form {
}
input[type="submit"] {
@include button(shiny, $pink);
@include button(shiny, $blue);
@include border-radius(3px);
font: normal italic 1.2rem/1.6rem $serif;
height: 35px;
......
lms/static/sass/_shared_login_modal.scss → lms/static/sass/_shared_modal.scss
.modal-wrapper {
@include background-image(radial-gradient(50% 45%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
.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;
......@@ -12,51 +13,162 @@
&.visible {
display: block;
}
}
.login-modal {
background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(0px);
@include box-shadow(0 15px 70px 5px rgba(0,0,0, 0.5));
color: #fff;
padding: 8px;
width: grid-width(6);
.modal {
background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(0px);
@include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5));
color: #fff;
display: none;
padding: 8px;
width: grid-width(6);
z-index: 10;
&.visible {
display: block;
}
&.login-modal {
@include vertically-and-horizontally-centered(410px, grid-width(6));
z-index: 10;
.inner-wrapper {
background: rgb(240,240,240);
@include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 410px;
}
}
&.signup-modal {
@include vertically-and-horizontally-centered(965px, grid-width(6));
.inner-wrapper {
height: 965px;
}
}
.inner-wrapper {
background: rgb(240,240,240);
@include border-radius(0px);
border: 1px solid rgba(0, 0, 0, 0.9);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
overflow: hidden;
position: relative;
header {
margin-bottom: 30px;
overflow: hidden;
padding: 28px 20px 0px;
position: relative;
z-index: 2;
header {
margin-bottom: 30px;
overflow: hidden;
padding: 28px 20px 0px;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
}
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
position: relative;
z-index: 2;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
&::after {
@extend .faded-hr-divider;
bottom: 0px;
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
top: -140px;
width: 100%;
z-index: 1;
top: -1px;
}
}
h3 {
color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif;
padding-bottom: 20px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
position: relative;
z-index: 2;
}
}
form {
margin-bottom: 12px;
padding: 0px 20px;
position: relative;
z-index: 2;
label {
display: none;
}
input[type="checkbox"] {
margin-right: 5px;
}
input[type="email"],
input[type="text"],
input[type="password"] {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
label.remember-me,
label.terms-of-service,
label.honor-code {
background: rgb(233,233,233);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 20px;
padding: 8px 10px;
&:hover {
background: rgb(230,230,230);
}
a {
//color: $base-font-color;
font: normal 1.2rem/1.6rem $serif;
text-decoration: underline;
&:hover {
//color: $lighter-base-font-color;
}
}
}
.honor-code-summary {
margin-bottom: 20px;
padding: 0px 10px;
position: relative;
p {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
}
hr {
@extend .faded-hr-divider-light;
border: none;
margin: 0px;
margin-top: 30px;
position: relative;
z-index: 2;
......@@ -70,53 +182,26 @@
}
}
h3 {
color: $lighter-base-font-color;
font: normal 1.4rem/1.8rem $serif;
padding-bottom: 20px;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase;
vertical-align: middle;
position: relative;
z-index: 2;
}
}
form {
margin-bottom: 12px;
padding: 0px 20px;
position: relative;
z-index: 2;
ul {
@include box-sizing(border-box);
margin: 0;
padding: 0 0 0 20px;
width: 100%;
label {
display: none;
}
li {
color: $lighter-base-font-color;
font: 300 1.2rem/1.6rem $sans-serif;
margin-bottom: 10px;
input[type="checkbox"] {
margin-right: 5px;
&:last-child {
margin-bottom: 0px;
}
}
}
}
input[type="email"],
input[type="password"] {
background: rgb(255,255,255);
display: block;
height: 45px;
margin-bottom: 20px;
width: 100%;
}
label.remember-me {
background: rgb(230,230,230);
border: 1px solid rgb(200,200,200);
@include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block;
margin-bottom: 38px;
padding: 8px 10px;
position: relative;
}
.submit {
padding-top: 18px;
input[type="submit"] {
display: block;
......@@ -125,56 +210,56 @@
width: 70%;
}
}
}
.login-extra {
position: relative;
z-index: 2;
.login-extra {
position: relative;
z-index: 2;
p {
p {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-align: center;
a {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-align: center;
a {
color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif;
text-decoration: underline;
text-decoration: underline;
&:hover {
color: $base-font-color;
}
&:hover {
color: $base-font-color;
}
}
span + a {
margin-left: 15px;
}
span + a {
margin-left: 15px;
}
}
}
.close-modal {
@include border-radius(2px);
cursor: pointer;
@include inline-block;
padding: 10px;
position: absolute;
right: 2px;
top: 0px;
z-index: 3;
.close-modal {
@include border-radius(2px);
cursor: pointer;
@include inline-block;
padding: 10px;
position: absolute;
right: 2px;
top: 0px;
z-index: 3;
.inner {
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all, 0.15s, ease-out);
}
.inner {
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all, 0.15s, ease-out);
}
}
&:hover {
p {
color: $base-font-color;
}
&:hover {
p {
color: $base-font-color;
}
}
}
......
lms/static/sass/application.scss
......@@ -10,7 +10,7 @@
@import 'shared_header';
@import 'shared_list_of_courses';
@import 'shared_course_filter';
@import 'shared_login_modal';
@import 'shared_modal';
@import 'index';
@import 'dashboard';
......
lms/templates/login_modal.html
<%namespace name='static' file='static_content.html'/>
<section class="modal-wrapper">
<section class="login-modal">
<div class="inner-wrapper">
<header>
<h3>Log In</h3>
<hr>
</header>
<section class="modal login-modal">
<div class="inner-wrapper">
<header>
<h3>Log In</h3>
<hr>
</header>
<form id="login_form" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="e-mail">
<label>Password</label>
<input name="password" type="password" placeholder="password">
<label class="remember-me">
<input name="remember" type="checkbox">
Remember me
</label>
<form id="login_form" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label class="remember-me">
<input name="remember" type="checkbox">
Remember me
</label>
<div class="submit">
<input name="submit" type="submit" value="Submit">
</form>
</div>
</form>
<section class="login-extra">
<p>
<span>Not enrolled? <a href="#">Sign up.</a></span>
<a href="#" class="pwd-reset">Forgot password?</a>
</p>
</section>
<section class="login-extra">
<p>
<span>Not enrolled? <a href="#">Sign up.</a></span>
<a href="#" class="pwd-reset">Forgot password?</a>
</p>
</section>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
</section>
</div>
</section>
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
......
lms/templates/navigation.html
......@@ -48,9 +48,9 @@
<ol>
<li class="primary">
<div class="divider"></div>
<a href="#" class="login">Log In</a>
<a href="#" id="login">Log In</a>
<div class="divider"></div>
<a href="#" class="signup">Sign Up</a>
<a href="#" id="signup">Sign Up</a>
<div class="divider"></div>
</li>
</ol>
......@@ -61,4 +61,8 @@
%if not user.is_authenticated():
<%include file="login_modal.html" />
<%include file="signup_modal.html" />
<section class="modal-overlay">
</section>
%endif
lms/templates/signup_modal.html 0 → 100644
<%namespace name='static' file='static_content.html'/>
<section class="modal signup-modal">
<div class="inner-wrapper">
<header>
<h3>Sign Up for edX</h3>
<hr>
</header>
<form id="login_form" method="post">
<label>E-mail</label>
<input name="email" type="email" placeholder="E-mail">
<label>Password</label>
<input name="password" type="password" placeholder="Password">
<label>Public Username</label>
<input name="username" type="text" placeholder="Public Username">
<label>Full Name</label>
<input name="fullname" type="text" placeholder="Full Name">
<label>Your Location</label>
<input name="location" type="text" placeholder="Your Location">
<label>Prefered Language</label>
<input name="language" type="text" placeholder="Prefered Language">
<label class="terms-of-service">
<input name="terms-of-service" type="checkbox">
I agree to the
<a href="#">Terms of Service</a>
</label>
<label class="honor-code">
<input name="honor-code" type="checkbox">
I agree to the
<a href="#">Honor Code</a>
, sumarized below as:
</label>
<div class="honor-code-summary">
<ul>
<li>
<p>Complete all mid-terms and final exams with only my own work.</p>
</li>
<li>
<p>Maintain only one account, and not share the username or password.</p>
</li>
<li>
<p>Not engage in any activity that would dishonestly improve my results, or improve or hurt those of others.</p>
</li>
<li>
<p>Not post answers to problems that are being used to assess student performance.</p>
</li>
</ul>
<hr>
</div>
<div class="submit">
<input name="submit" type="submit" value="Create My Account">
</div>
</form>
<section class="login-extra">
<p>
<span>Already have an account? <a href="#">Login.</a></span>
</p>
</section>
<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