Skip to content

E
edx-platform
Commit 78b0e863 by Galen Frechette
Options

cleans up login modal and adds js for toggling login modal

parent ec1510ca
Showing with 74 additions and 71 deletions
lms/static/js/toggle_login_modal.js 0 → 100644
$(document).ready(function () {
$('a.login').click(function() {
$('.modal-wrapper').addClass("visible");
});
$('div.close-modal').click(function() {
$('.modal-wrapper').removeClass("visible");
});
});
lms/static/sass/_shared_login_modal.scss
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7))); @include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
bottom: 0; bottom: 0;
content: ""; content: "";
//display: none; display: none;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
...@@ -14,27 +14,43 @@ ...@@ -14,27 +14,43 @@
} }
.login-modal { .login-modal {
background: rgba(200, 200, 200, 1); background: rgba(0,0,0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.9);
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(0 5px 35px 0px rgba(0,0,0, 0.2)); @include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5));
color: #fff; color: #fff;
padding: 6px; padding: 10px;
width: grid-width(8); width: grid-width(7);
@include vertically-and-horizontally-centered(430px, grid-width(8)); @include vertically-and-horizontally-centered(400px, grid-width(7));
z-index: 10; z-index: 10;
.inner-wrapper { .inner-wrapper {
background: rgba(235, 235, 235, 1); @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
border: 1px solid rgba(180, 180, 180, 1);
@include border-radius(4px); @include border-radius(4px);
@include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 1px 0 0 rgba(255, 255, 255, 0.3)); border: 1px solid rgba(0, 0, 0, 0.9);
height: 410px; @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
height: 380px;
overflow: hidden;
padding: 30px; padding: 30px;
position: relative; position: relative;
&::before {
@include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
content: "";
display: block;
height: 400px;
left: 0px;
margin: 0 auto;
position: absolute;
bottom: -140px;
width: 100%;
}
header { header {
margin-bottom: 30px; margin-bottom: 30px;
padding-top: 5px;
position: relative; position: relative;
z-index: 2;
&::after { &::after {
@extend .faded-hr-divider; @extend .faded-hr-divider;
...@@ -45,27 +61,21 @@ ...@@ -45,27 +61,21 @@
} }
h3 { h3 {
color: $base-font-color; color: $lighter-base-font-color;
font: normal 2.2rem/2.4rem $sans-serif; font: normal 1.4rem/1.8rem $serif;
padding-bottom: 20px; padding-bottom: 20px;
text-align: center; text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.4); text-shadow: 0 1px rgba(255,255,255, 0.4);
text-transform: uppercase; text-transform: uppercase;
vertical-align: middle; vertical-align: middle;
img {
@include inline-block;
display: none;
height: 60px;
margin-right: 10px;
vertical-align: middle;
}
} }
} }
form { form {
@include clearfix; @include clearfix;
position: relative;
z-index: 2;
label { label {
display: none; display: none;
...@@ -75,9 +85,19 @@ ...@@ -75,9 +85,19 @@
background: rgb(230,230,230); background: rgb(230,230,230);
border: 1px solid rgb(200,200,200); border: 1px solid rgb(200,200,200);
@include border-radius(3px); @include border-radius(3px);
@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
display: block; display: block;
margin-bottom: 40px; margin-bottom: 60px;
padding: 6px 10px; padding: 8px 10px;
position: relative;
&::before {
@extend .faded-hr-divider;
bottom: -30px;
content: "";
display: block;
position: absolute;
}
} }
input[type="checkbox"] { input[type="checkbox"] {
...@@ -96,34 +116,18 @@ ...@@ -96,34 +116,18 @@
display: block; display: block;
height: 45px; height: 45px;
margin: 0 auto; margin: 0 auto;
width: 50%; width: 70%;
} }
} }
.login-extra { .login-extra {
margin-top: 40px; padding: 15px 0px;
padding: 20px 0px;
position: relative; position: relative;
@include transition(opacity 0.15s linear);
&:hover {
p {
opacity: 1;
}
}
&::before {
@extend .faded-hr-divider;
content: "";
display: block;
position: absolute;
top: 0px;
}
p { p {
color: $lighter-base-font-color; color: $lighter-base-font-color;
font: normal italic 1.2rem/1.6rem $serif; font: normal italic 1.2rem/1.6rem $serif;
opacity: 0.7;
text-align: center; text-align: center;
a { a {
...@@ -133,50 +137,40 @@ ...@@ -133,50 +137,40 @@
} }
span + a { span + a {
border-left: 1px solid rgb(200,200,200); margin-left: 15px;
margin-left: 10px;
padding-left: 10px;
} }
} }
} }
.close-modal { .close-modal {
background: rgba(200,200,200, 0.7); //background: rgb(240,240,240);
border: 1px solid rgba(180,180,180, 0.7); //border: 1px solid rgba(180,180,180, 0.7);
@include border-radius(50px); @include border-radius(2px);
//@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
cursor: pointer;
@include inline-block; @include inline-block;
padding: 4px; padding: 5px 10px;
position: absolute; position: absolute;
right: -16px; right: 5px;
top: -16px; top: 5px;
@include transition(all, 0.15s, ease-out); @include transition(all, 0.15s, ease-out);
.inner { .inner {
background: rgb(255,255,255);
border: 1px solid rgb(180,180,180);
@include border-radius(50px);
@include box-shadow(0 1px 0 0 rgba(255, 255, 255, 0.3));
height: 26px;
width: 26px;
p { p {
color: rgb(210,210,210); color: $lighter-base-font-color;
font: normal 15px/17px $sans-serif; font: normal 1.2rem/1.2rem $sans-serif;
padding-top: 4px;
text-align: center; text-align: center;
text-shadow: 0 -1px rgba(0,0,0, 0.3); text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all, 0.15s, ease-out); @include transition(all, 0.15s, ease-out);
} }
} }
&:hover { &:hover {
background: rgba(200,200,200, 1); //background: rgb(235,235,235);
border: 1px solid rgba(180,180,180, 1); //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
cursor: pointer;
@include box-shadow(0 1px 3px 0 rgba(0,0,0, 0.15));
p { p {
color: lighten(red, 15%); color: $base-font-color;
} }
} }
} }
......
lms/templates/login_modal.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<section class="login-modal"> <section class="login-modal">
<div class="inner-wrapper"> <div class="inner-wrapper">
<header> <header>
<h3><img src="${static.url('images/edx_bw.png')}">Log In</h3> <h3>Log In</h3>
</header> </header>
<form id="login_form" method="post"> <form id="login_form" method="post">
...@@ -16,19 +16,19 @@ ...@@ -16,19 +16,19 @@
<input name="remember" type="checkbox"> <input name="remember" type="checkbox">
Remember me Remember me
</label> </label>
<input name="submit" type="submit" value="Log In"> <input name="submit" type="submit" value="Submit">
</form> </form>
<section class="login-extra"> <section class="login-extra">
<p> <p>
<span>Not enrolled? <a href="#">Sign up here.</a></span> <span>Not enrolled? <a href="#">Sign up.</a></span>
<a href="#" class="pwd-reset">Forgot your password?</a> <a href="#" class="pwd-reset">Forgot password?</a>
</p> </p>
</section> </section>
<div class="close-modal"> <div class="close-modal">
<div class="inner"> <div class="inner">
<p>✖</p> <p>&#10005;</p>
</div> </div>
</div> </div>
</div> </div>
......
lms/templates/main.html
...@@ -68,6 +68,7 @@ ...@@ -68,6 +68,7 @@
<%block name="js_extra"/> <%block name="js_extra"/>
<script src="${static.url('js/my_courses_dropdown.js')}"></script> <script src="${static.url('js/my_courses_dropdown.js')}"></script>
<script src="${static.url('js/sticky_footer.js')}"></script> <script src="${static.url('js/sticky_footer.js')}"></script>
<script src="${static.url('js/toggle_login_modal.js')}"></script>
<script src="${static.url('js/sticky_filter.js')}"></script> <script src="${static.url('js/sticky_filter.js')}"></script>
</body> </body>
......
lms/templates/navigation.html
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<a href="#">Jobs</a> <a href="#">Jobs</a>
</li> </li>
<li> <li>
<a href="/dashboard">Log In</a> <a href="#" class="login">Log In</a>
</li> </li>
<li> <li>
<a href="#">Sign Up</a> <a href="#">Sign Up</a>
......
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