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